Popup Accessibility Issues

[DigitalServicesLab]

In recognition of the Breakdance websites comments on accessibility it would be good to get some work done on making any button elements the trigger an action to actually be buttons not anchor tags, and also to get popups to use buttons for the close function not div tags with javascript. Furthermore popups need to be focused once open in order to be keyboard navigable.

"In Breakdance, our elements are built using proper HTML, which means they can easily be interacted with via the keyboard. Instead of working extra hard to re-create interactive elements like buttons using divs and JavaScript, we just use native buttons instead."

I'm foucusing on Icon Box here but it really makes no difference because the same applies to every 'button'.

• <a> tags are for linking to pages/content
• <button> tags are for actions, and that includes....opening popups.

There are half a dozen issues with getting a popup to be WCAG compliant. It would be great to see these addressed.

1. The button that triggers it is not a button, but an anchor tag so requires manual addition of role=button and aria-haspopup=dialog attributes. Anytime a button is used for an action, it should output an actual button not an anchor.
2. Being a link and not a button, it is not operable with the space bar which would be expected but isn't technically required if it can be operated with enter. Custom js is required to make popup triggers work with spacebar. This would be resolved if it was a button.
3. Once the popup opens focus does not move to the popup content but remains on the background page, so tabbing moves the page behind the popup. This is a focus management issue
4. The close 'button' inside the popups are not even anchor tags, they are div tags with event handlers. Exactly what the Breakdance website says they don't do! So this cannot be navigated to with keyboard even if the popup content did have focus. This should be a button.
5. When using a custom 'button' (anchor tag with custom attributes) inside the popup to close the popup, it does not seem possible to get the button to receive focus even with the aid of javascript as the browser sees it as not focusable until you manually interact with it using a mouse, presumably due to the default css applied before it is visible. This is a focus management issue

As it stands popups and their trigger buttons fail the following:

• 1.3.1 Info and Relationships
• 2.1.1 Keyboard
• 2.4.3 Focus order
• 2.4.7 Focus Visible
• 4.1.2 Name, Role, Value