Skip to content

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
Pytal added 3 commits January 27, 2023 15:32
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 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