Accessibility: Low contrast in text colors of select menu options (app category, type of icon)

[neoncitylights]

When using your OS's native dark mode, there is a low amount of contrast between the white (#ffffff) background of select menu, and #e0e0e0 (very close to white) color for select menu options, which is a 1.32:1 WCAG contrast ratio. This makes the menu harder to read.

Steps

• Browser: Firefox v89.0.2 (latest stable version)
• OS: MacOS Big Sur v11.4

1. System Preferences > General > Appearance > Dark
2. Go to https://macosicons.com/ and visit your own user profile
3. Click on any icon that has been submitted or approved
4. Click on either dropdown menu (App category, Type of icon)
5. See the low contrast between #fff background of select menu, and #e0e0e0 (very close to white) color for select menu options.

Proposed solution

Using the same text color from buttons:

.coral--dark .dropdown-select option {
 color: #252525; 
}

Edit: While submitting this, it would probably make more sense to instead make the select menu have a dark background color so it blends in with everything else, oops 😅

Notes

• Wasn't able to reproduce on light mode with FF (didn't test with MS Edge/Safari on this one)
• I was able to reproduce using Microsoft Edge (v91.0.864.54) on the same MacOS version as mentioned above. Adding in the same CSS from above fixes the issue.
• Accessibility when hovering over menu options:
  • Microsoft Edge: Still accessible since the hover background color is a light gray-ish color, and the hover text color is whatever is defined still as #252525 using the CSS above
  • Firefox: Still accessible; for MacOS, the background color of options will (closely match) the accent color chosen in System Preferences > General > Accent color. E.g, choosing blue will make it equal to #0063e1. The default style for options is declared from the user agent stylesheet rules (being the CSS system color keywords):

    
    option:checked {
    background-color: -moz-html-cellhighlight !important;
    color: -moz-html-cellhighlighttext !important;
    }

select:focus > option:checked, select:focus > optgroup > option:checked { background-color: Highlight !important; color: HighlightText !important; }

* I tested with Safari 14.1.1 and I wasn't able to reproduce it on there, since Safari uses MacOS's native menu style for `<select>` elements.
<img width="337" alt="image" src="https://user-images.githubusercontent.com/4723983/123196176-142ec580-d46f-11eb-80e9-1acfdbc658b5.png">

[elrumo]

Thanks for pointing this out, I think it's an issue with Firefox and Edge not making full use of the native dropdown. It seems to use the native dropdown everywhere else, including Chromium-based browsers. I chose to use native un-styles dropdowns instead of custom ones to avoid issues like this, but I guess I didn't test it enough with Firefox and Edge😅.

Sounds like an easy fix, so I'll hopefully fix it this week. Thanks again!

[elrumo]

@neoncitylights should be fixed now, thanks for your help. Still not 100% with the fix, as it's still not using the native dropdown selector on Edge and Firefox when I apply a "color" or "background" property to the dropdown, but at least it has contrast again. I'm surprised no one brought this up earlier, I'll get into the habit of testing new updates in different browsers from now on.