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

a11y: Fix keyboard navigation, aria label/role and focus display for app bar #12774

Open
nwmac opened this issue Dec 4, 2024 · 4 comments · Fixed by #12958
Open

a11y: Fix keyboard navigation, aria label/role and focus display for app bar #12774

nwmac opened this issue Dec 4, 2024 · 4 comments · Fixed by #12958
Assignees
Labels
area/accessibility kind/enhancement priority/0 QA/manual-test Indicates issue requires manually testing size/3 Size Estimate 3
Milestone

Comments

@nwmac
Copy link
Member

nwmac commented Dec 4, 2024

a11y Issue: 18, 1, 19

  1. The app bar button (see below) does not show keyboard and focus presentation.
  2. The pin/unpin icon is missing aria-label and role attributes.

See below for screen shot.

All of the items in the app bar should show focus appropriately and should support keyboard navigation (enter/space to activate).

Additionally, when expanded, the pin/unpin icon should support keyboard navigation and focus appropriately.

image

Pin/Unpin:
image

Issue 19: A focus indicator is not visually available as user tabs through mentioned instances using a keyboard resulting in users with learning and mobility impairments as well as those with low vision not being able to easily find out which element currently has the focus.

image

@nwmac nwmac added this to the v2.11.0 milestone Dec 4, 2024
@github-actions github-actions bot added the QA/dev-automation Issues that engineers have written automation around so QA doesn't have look at this label Dec 4, 2024
@nwmac nwmac changed the title a11y: Fix keyboard navigation and focus display for app bar a11y: Fix keyboard navigation, aria label/role and focus display for app bar Dec 4, 2024
@aalves08 aalves08 assigned aalves08 and unassigned aalves08 Dec 18, 2024
@aalves08 aalves08 added size/3 Size Estimate 3 and removed size/2 Size Estimate 2 labels Dec 18, 2024
@aalves08 aalves08 self-assigned this Dec 30, 2024
@yonasberhe23 yonasberhe23 added QA/manual-test Indicates issue requires manually testing and removed QA/dev-automation Issues that engineers have written automation around so QA doesn't have look at this labels Jan 9, 2025
@yonasberhe23
Copy link
Contributor

Needs manual validation at this time as we dont have existing accessiblity tests. Follow-up ticket to create automated tests coverage rancher/qa-tasks#1639

@yonasberhe23 yonasberhe23 reopened this Jan 9, 2025
@IsaSih IsaSih self-assigned this Jan 13, 2025
@IsaSih
Copy link
Contributor

IsaSih commented Jan 15, 2025

Navigation using tab and return work as expected in
Rancher | v2.11-1e40bc40c55a020fc67dc3c3dde47b41dc94caf1-head
Dashboard | master 574248d
Rancher CLI | v2.11.0-rc.1
Helm | dev
Machine | v0.15.0-rancher125

However, the space bar clicks the burguer menu and the pin icon, but does not perform click actions in elements inside the app menu.

@aalves08
Copy link
Member

The decision made is that "links" that appear as buttons are to have the space key as trigger as simple links, anchors, non-button links should not have the space key as trigger, as per #12959 (comment) + #12959 (comment)

@aalves08
Copy link
Member

aalves08 commented Feb 6, 2025

@IsaSih given the reply from a few weeks ago do you agree we can close this? FYI @rak-phillip @nwmac

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/accessibility kind/enhancement priority/0 QA/manual-test Indicates issue requires manually testing size/3 Size Estimate 3
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants