Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
When in a collapsed state (narrow view) a nav tabs element (such as the primary tasks) does not expose its status for a screen reader. That status is managed by only a class name. To expose the state to comply with WCAG 4.1.2. attribute arial-expanded can be used.
Proposed resolution
Add aria-expanded attribute to the tabs element and toggle it at the same time with is-oped class. Remove aria-expanded when displayed as tabs.
| Comment | File | Size | Author |
|---|---|---|---|
| #17 | ClaroPrimaryTabsTest-success.txt | 3.5 KB | simohell |
| #17 | ClaroPrimaryTabsTest-fail.txt | 5.6 KB | simohell |
Issue fork drupal-3432632
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
- 3432632-collpsed-nav-tabs-status
changes, plain diff MR !7126 - 3432632-test-only changes, plain diff MR !7808
Comments
Comment #2
simohell commentedComment #4
simohell commentedComment #5
smustgrave commentedCan we add an assertion somewhere that checks this attribute to make sure it doesn't break again?
Comment #6
simohell commentedWe looked at this today at the end of Drupal a11y office hours and based on that I moved the aria attribute to the correct button element. This still doesn't have a test.
Comment #7
mgiffordThanks for raising this at today's Drupal A11y Office Hour Simo!
Comment #8
simohell commentedComment #9
simohell commented@smustgrave About tests: I can see very few tests with themes currently. And this is theme specific f.e. Olivero does this already, but uses a different script. How would we go about testing this?
Comment #10
simohell commentedComment #11
yevko commentedTested, works well.
Comment #13
smustgrave commentedSo we get so few nightwatch tests wasn't sure if the test-only feature worked with nightwatch, it doesn't. And since I'm pretty sure I don't have nightwatch working locally opened a test-only branch with just the test to see it fail.
Unfortunately it didn't
What I meant in #5 was if there was an existing test that we can just put a check that the attribute exists.
Comment #14
simohell commentedWe agreed to add the duplicate nightwatch test as it is adding a comment with @lauriii during DrupalCamp Finland+Baltics contrib day - since locally it passed and we didn't find examples of nightwatch tests testing multiple themes/modules.
Comment #15
smustgrave commentedAh I gotcha, then nvm!
Comment #16
simohell commentedOh. Now I see that that test actually runs against an Olivero test installation.
So I'll need to make it run with actual Claro. My bad, need to fix it.
Comment #17
simohell commentedNow I have a Nightwatch test that uses Claro theme for the test site and fails against 11.x without and succeeds against this MR. So even if it's using much of the test code from Olivero it now actually tests the menu in Claro.
Attaching both the test results run locally.
Comment #18
simohell commentedComment #20
smustgrave commentedAlso pushed the change to the test-only branch and got https://git.drupalcode.org/issue/drupal-3432632/-/pipelines/159222
Closed the MR so the bot doesn't pick up on it.
Great job on the tests!
Comment #26
nod_Committed bd81352 and pushed to 11.x. Thanks!