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 #3

Merged
merged 3 commits into from
Jan 27, 2023

Conversation

Pytal
Copy link
Collaborator

@Pytal Pytal commented Jan 27, 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 self-assigned this Jan 27, 2023
@Pytal Pytal added enhancement New feature or request accessibility labels Jan 27, 2023
@Pytal Pytal added this to the 3.21.0 milestone Jan 27, 2023
@Pytal Pytal force-pushed the enh/a11y-keyboard-focus-border branch from f61f2d1 to 4f43cb0 Compare January 27, 2023 23:26
Pytal added 3 commits January 27, 2023 15:36
Signed-off-by: Christopher Ng <chrng8@gmail.com>
- To meet WCAG AA contrast requirements

Signed-off-by: Christopher Ng <chrng8@gmail.com>
Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal Pytal force-pushed the enh/a11y-keyboard-focus-border branch from 4f43cb0 to bc141b7 Compare January 27, 2023 23:37
@Pytal Pytal merged commit 15be9de into master Jan 27, 2023
@Pytal Pytal deleted the enh/a11y-keyboard-focus-border branch January 27, 2023 23:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant