single-dropdown shows focus rectangle when :disabled? true

[hipitihop]

While the dropdown correctly shows disabled background and sans dropdown button, it still shows the focus rectangle when clicked or keyboard navigated to (tab).

[superstructor]

This is because:

1. the browser has default 'user agent' styles for focus like:

:focus {
outline: -webkit-focus-ring-color auto 1px;
}

2. for 'native input' components such as <input ..> the browser also disables those styles when disabled
3. [single-dropdown ...] is just a structured of styled div > a > span. Not a 'native input' component.

I attempted adding the disabled attribute to the structure when disabled? is true e.g. <span disabled> etc but it had no impact on the styling.

This will need to be fixed in the future styling changes w/ a class that alters the :focus styles when disabled? is true. Cannot fix at the moment as we cannot change :focus styles with inline styles.