♿ a11y(bal-nav): button overlays not reachable via keyboard

baloise / design-system

The Baloise Design System consists of reusable components and a clearly defined visual style, that can be assembled together to build any number of applications.

https://design.baloise.dev

Apache License 2.0

100 stars 27 forks source link

♿ a11y(bal-nav): button overlays not reachable via keyboard #1415

Open carolabes opened 5 months ago

carolabes commented 5 months ago

Description of this issue

Button overlays are not reachable via keyboard

How to fix it

Use aria-haspopup for buttons with overlays
Don't use aria-haspopup for button with link

Additional Information

Level A https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

aria-haspopup: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup

Code of Conduct

[X] I agree to follow this project's Code of Conduct

mmarinkov commented 3 months ago

/cib

github-actions[bot] commented 3 months ago

Branch fix/issue-1415 created!

mmarinkov commented 3 months ago

Hi @carolabes, The button with the Kundenservice number was reachable, the close button not. I assume this was the reason for opening the case or am I wrong?

carolabes commented 3 months ago

Hi @mmarinkov, I rechecked this issue on live page and DS. You are right, the phone number button is reachable. I didn't realize that because the order is wrong. The pop ups are placed after the main nav. On the live page I can only reach them if I tab through the entire navigation. I'm not sure if there is already a ticket for the order. But yes, the close button should also be accessible.

mmarinkov commented 3 months ago

Hi @carolabes I would say that #1423 is related to the order issue when navigation via tab. In #1423 we have to prevent access to the background of a modal/pop via tab. So by solving #1423 we should also solve the order issue in this case.

In this case we will work on making the "close button" reachable via keyboard tab.

mmarinkov commented 3 months ago

would need to change tabindex to 0 but this logic would overwrite the one introduced by Gery (5377a64f, fix(select): value with comma, click events, 07.09.2022 at 21:57)

Next step: clarify what would break when changing the tabindex

mmarinkov commented 2 months ago

/cib

github-actions[bot] commented 2 months ago

Branch fix/issue-1415 created!

GinaBiondo-aperto commented 1 month ago

Hey @hirsch88 :) the issue also mentioned an aria-haspopup prop. Was this added as well or should this be passed with the json just like the aria labels?

mmarinkov commented 1 month ago

Hey @GinaBiondo-aperto, the aria-haspopup prop has not been set on the button with link as initially requested in this task.

In our opinion the issue seems to be resolved or do you see something, which we missed?

GinaBiondo-aperto commented 1 month ago

Hey Hey @mmarinkov :) Not sure if I get your point here. Help please :D The aria-haspopup is not set at all. Neither the buttons with link nor without. However it is needed for the buttons in the meta nav that open popups.

mmarinkov commented 1 month ago

We have to set aria-haspopup prop on the button components expect the ones with color="link"

mmarinkov commented 1 month ago

/cib

github-actions[bot] commented 1 month ago

Branch fix/issue-1415 created!