sl-design-system
[Select] Low Contrast Indicator in Select Navigation (Keyboard Interaction)
Provide a general summary of the issue here
Description: When navigating between page numbers in the select using keyboard arrow keys, the grey rectangle that indicates the current focus position has a contrast ratio of only 1.1:1, making it very difficult to see. This fails accessibility standards and should be improved. The same issue occurs in dark mode, where the contrast ratio is 1.6:1.
Link to finding: https://github.com/sl-design-system/components/issues/2514#issuecomment-3319119564
Expected Behavior: The focus indicator should have a minimum contrast ratio of 3:1 to meet accessibility guidelines.
Inspiration:
Tasks
- [x] improve design in figma
- [x] update hover state in figma component
- [ ] implement in code
👤 Your name
DR
🧢 Your Product/Team
SLDS
Be aware there is a 1px border on the left side of the indicator to make it a little bit darker
