Accessibility Fixes for Tabs Block

amberhinds commented 1 year ago

Description

The tabs block is missing the necessary ARIA attributes and to make it accessible for screen reader users.

Current Code

This is the HTML that I saw for the block when testing.

<div class="gb-container gb-container-556f2798 gb-tabs" data-opened-tab="3">
<div class="gb-container gb-container-ef96ba99 gb-tabs__buttons">
   <button class="gb-button gb-button-c9499c31 gb-button-text gb-tabs__button" aria-expanded="false">Tab 1</button>
   <button class="gb-button gb-button-9e60ae75 gb-button-text gb-tabs__button" aria-expanded="false">Tab 2</button>
   <button class="gb-button gb-button-5d733888 gb-button-text gb-tabs__button gb-block-is-current" aria-expanded="true">Tab 3</button>
</div>

<div class="gb-container gb-container-035a7023 gb-tabs__items">
<div class="gb-container gb-container-76170fb9 gb-tabs__item">
<p>Tab 1 content.</p>
</div>

<div class="gb-container gb-container-69add859 gb-tabs__item">
<p>Tab 2 content.</p>
</div>

<div class="gb-container gb-container-50fd7973 gb-tabs__item gb-tabs__item-open">
<p>Tab 3 content.</p>
</div>
</div>
</div>

Expected behavior

This is a high-level summary of what is missing to make this block accessible:

Missing role="tablist" on the tabs container.
Missing role="tab" on the tabs.
Missing role="tabpanel" on the tab content container.
Missing aria-controls on the tab buttons to indicate what they control.
Tab buttons should be in a list.
The use of aria-expanded is incorrect. Tabs should use aria-selected instead to indicate which tab is active. Aria-expanded is for multi-selectable elements like accordions, where you can have multiple open or visible at a time. It doesn't really apply to a single tabpanel.

References:

Here are some references to help:

Calvin-Susan commented 1 year ago

Thanks for looking into this, @amberhinds 🙌 You are THE BEST!

JeanPaiva commented 1 year ago

@amberhinds thank you, We will work to improve this on our next release.

tomusborne commented 1 year ago

@amberhinds I've opened a PR in our GBP repo that should address all of this. Any chance you can shoot us an email so I can send you the new code for review?: support@generateblocks.com

Most of these only required us to create default custom HTML attributes when adding a new Tabs block (the fix won't apply to those already created, however users can add these roles via the custom HTML attributes feature).

The aria-controls issue requires setting IDs on your "Tab Item" containers. If the system recognizes IDs on those containers, it will automatically use aria-controls. This is in the current version.

We've replaced aria-expanded with aria-selected.

Thank you again! Really appreciate your help.

tomusborne commented 11 months ago

These improvements have been merged in GBP 1.7.0, which is the next Pro release.

Thanks!

Calvin-Susan commented 11 months ago

Thanks for making accessibility improvements a priority, @tomusborne! 💪

tomusborne / generateblocks