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

[carolabes]

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

• I agree to follow this project's Code of Conduct

[mmarinkov]

/cib

[github-actions]

Branch fix/issue-1415 created!

[mmarinkov]

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]

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]

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]

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

Next step: clarify what would break when changing the tabindex

[mmarinkov]

/cib

[github-actions]

Branch fix/issue-1415 created!

[GinaBiondo-aperto]

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]

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]

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]

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

[mmarinkov]

/cib

[github-actions]

Branch fix/issue-1415 created!

[mmarinkov]

we have to define the aria-haspopup on the popup compoment (not popover)