Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add keyboard focus border for dropdown options #1744

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

Pytal
Copy link
Contributor

@Pytal Pytal commented Jan 7, 2023

Add keyboard focus border on dropdown options to improve accessibility similar to the examples below:

Active background color

The default dropdown active background color is darkened #5897fb#136cfb to meet minimum WCAG AA contrast ratio requirements

Before After
image image
image image

Visible focus border

When keyboard navigation is detected a visible border #949494 is added around the focused dropdown option

Screenshot
Contrast image
Example image

The example above uses

keyboardFocusBorder: true,

and

--vs-dropdown-option--active-bg: #f5f5f5;
--vs-dropdown-option--active-color: var(--vs-dropdown-option-color);

@Pytal Pytal force-pushed the enh/a11y-keyboard-focus-border branch from 2edcb7f to dd9f644 Compare January 13, 2023 03:07
@Pytal Pytal changed the title [WIP] Add keyboard focus border for dropdown options Add keyboard focus border for dropdown options Jan 13, 2023
@Pytal Pytal marked this pull request as ready for review January 13, 2023 03:19
@Pytal Pytal force-pushed the enh/a11y-keyboard-focus-border branch 4 times, most recently from 6d8355c to f61f2d1 Compare January 18, 2023 02:08
@Pytal Pytal force-pushed the enh/a11y-keyboard-focus-border branch 2 times, most recently from 4f43cb0 to 33bcd2d Compare January 27, 2023 23:30
Signed-off-by: Christopher Ng <[email protected]>
- To meet WCAG AA contrast requirements

Signed-off-by: Christopher Ng <[email protected]>
@Pytal Pytal force-pushed the enh/a11y-keyboard-focus-border branch from 33bcd2d to e042fcd Compare January 27, 2023 23:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant