Accessibility Problems with New Export “dropdown”

While the new “Subscribe to Calendar” dropdown in v5.12.0 is technically keyboard accessible, it has a few very sub-optimal things that should be improved to make the experience more accessible.

1. The div with class tribe-events-c-subscribe-dropdown__button and the ul with the class tribe-events-c-subscribe-dropdown__list has tabindex="0". This means when TABing through the page, the keyboard stops on those elements, but they don’t have any functions or content to interact with. Thus, they add “tab stops” that don’t do anything. Those two tabindexes should be removed.
2. The button with the class tribe-events-c-subscribe-dropdown__button-text should have an aria-expanded attribute (false on page load, true when the dropdown is open) to communicate the state of the menu to assistive technologies.

This is a “disclosure widget” pattern is has well established best practices for accessibility. Here’s one good article about it which demonstrates the aria-expanded attribute among other things.

• This topic was modified 4 years, 5 months ago by mrwweb.

The page I need help with: [log in to see the link]