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

[Accessibility] Autocomplete - Fix up/down arrow and labels for screen reader [v3] #1383

Merged
merged 9 commits into from
Jan 26, 2024

Conversation

dvoituron
Copy link
Collaborator

[Accessibility] Autocomplete - Fix up/down arrow and labels for screen reader

Add a new FluentKeyCode component

In some circumstances, Blazor does not retrieve all the KeyDown information received from JavaScript. FluentKeyCode retrieves this data, in a similar way to the JavaScript KeyCode library and to this demo sample.

The FluentKeyCode component extends the functionality of OnKeyDown by adding the KeyCode property when the OnKeyDown event is raised.

Example:

<FluentKeyCode Anchor="MyCard" OnKeyDown="@KeyDownHandler" />
KeyCode.mp4

Fix the Autocomplete component

The numeric keypad arrow (up/down) can now be used to navigate through list items.
Labels have been updated to be read by the NVDA screen reader.

Autocomplete-Fix-Accessibility.mp4

Unit Tests

Unit tests have been updated and verified.

@dvoituron dvoituron changed the title [Accessibility] Autocomplete - Fix up/down arrow and labels for screen reader [Accessibility] Autocomplete - Fix up/down arrow and labels for screen reader [v3] Jan 25, 2024
@dvoituron dvoituron added this to the V4.3.2 milestone Jan 25, 2024
Copy link

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1383.westeurope.3.azurestaticapps.net

1 similar comment
Copy link

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1383.westeurope.3.azurestaticapps.net

@dvoituron dvoituron modified the milestones: V4.3.2, V3.5.4 Jan 25, 2024
@dvoituron dvoituron added the v3 label Jan 25, 2024
Copy link

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1383.westeurope.3.azurestaticapps.net

@vnbaaij vnbaaij enabled auto-merge (squash) January 26, 2024 08:24
Copy link

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-1383.westeurope.3.azurestaticapps.net

@vnbaaij vnbaaij merged commit bf50d3a into dev Jan 26, 2024
4 checks passed
@vnbaaij vnbaaij deleted the users/dvoituron/accessibility/fix-autocomplete-keys branch January 26, 2024 08:33
vnbaaij pushed a commit that referenced this pull request Jan 30, 2024
…n reader [v3] (#1383)

* Add FluentKeyCode

* Add FluentKeyCode and samples

* Fix Autocomplete Accessibility using AriaLabel

* Update IsReachedMaxItems when Remove last item

* Update Unit Tests

* Update Unit Tests

* Remove unused log
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants