Improper use of aria-expanded for nav buttons which trigger drawer / notify dialog

[kirsty-hames]

Subject of the issue

The following issue has been reported by an external accessibility auditor:

The aria-expanded="false" attribute is specified to the "Open course resources.", "Page progress" and "Visual accessibility settings" image buttons. However the mentioned image buttons displays a modal dialog on activating them and there is no expand/collapse functionality is associated with the mentioned image buttons. This might create confusion for screen reader users.

Fails WCAG Success Criteria 4.1.2 https://www.w3.org/WAI/WCAG20/Understanding/name-role-value

Having done some research I'm inclined to agree. Please see my points below but I'm interested in hearing thought from others.

• The use of aria-expanded assumes the button toggles the collapse as well as the expanding of the dialog. The button only triggers the expanding of the dialog. The dialog is self closing (either shadow or close button).
• The dialog isn't a sibling or child of the button.
• Whilst MDN references the use of aria-expanded for dialog elements, I think this is in reference to non-modal dialogs (where focus can move outside of the dialog whilst still visible). Modal dialogs trap focus within the popup only and prevent learners from interacting with the rest of the page until the dialog is closed. Therefor the change in aria-expanded state isn't accessible, it will only be read as "collapsed".
• The WCAG dialog (modal) example doesn't include aria-expanded.

Some of these points were made previously when the initial issue was raised for WCAG fail of Drawer.

Reference: initial issue raise to implement aria-expanded.

Steps to reproduce

1. Using screen reader, navigate to the mentioned image buttons.
2. Listen that the incorrect state is announced.

Expected behaviour

Whilst I don't think aria-expanded is the appropriate use, I do think it's useful to indicate the buttons do trigger the change in page content.
As an alternative to aria-expanded, I wonder whether adding "Open" to the existing button aria-labels is sufficient? Like we already have for Resources, "Open course resources". However if people are in favour of the current implementation I'm happy to leave as is.

[oliverfoster]

aria-haspopup=dialog ?

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-haspopup
https://w3c.github.io/aria/#aria-haspopup

[kirsty-hames]

Thanks Olly. I think aria-haspopup=dialog does seem more appropriate than aria-expanded. One of the notes in the w3c reference you shared queries whether the use of aria-haspopup is necessary:

If there is no visual indication that an element will trigger a popup, authors are advised to consider whether use of aria-haspopup is necessary, and avoid using it when it's not.

There is no visual indicator that the navigation buttons trigger a popup. However, if we are going to include ARIA I still think aria-haspopup=dialog better describes the functionality than aria-expanded.

[oliverfoster]

I think that it is a button in the fixed navigation bar is an acceptable visual indication / axiom. I think user's should be quite used to dialogs appearing from navigation bar button clicks, or at least not be surprised by it.

aria-haspopup has changed reasonable recently to become what it is in that w3c reference, it didn't used to be for this purpose, it would be worth checking that it's supported in the screen-reader/browser combinations.

[kirsty-hames]

I think that it is a button in the fixed navigation bar is an acceptable visual indication / axiom. I think user's should be quite used to dialogs appearing from navigation bar button clicks, or at least not be surprised by it.

aria-haspopup has changed reasonable recently to become what it is in that w3c reference, it didn't used to be for this purpose, it would be worth checking that it's supported in the screen-reader/browser combinations.

I've tested this replacing nav button aria-expanded for aria-haspopup="dialog" and it works/reads as expected.

VoiceOver “…dialog pop-up, button”
NVDA “…button opens dialog”
JAWS “…button has popup dialog”

For example, Resources .nav__drawer-btn reads as "Open course resources. Button opens dialog".

Tested with the following combinations:
VoiceOver Safari macOS and iPhone
VoiceOver Chrome and Firefox macOS
JAWS Chrome, Edge and Firefox Windows
NVDA Chrome, Edge and Firefox Windows