-
Notifications
You must be signed in to change notification settings - Fork 558
Description
Bug Report
Problematic behavior
The accessible name of the modal that is rendered is [object Object], which is not relevant.
And there is also a duplicate role="dialog". Semantically, this is not correct and it may confuse certain screen readers.
Note that visually, the modal title is at the same heading level as "Shared with 3 users".
Expected behavior/code
The accessible name of the modal should be "Share document". Perhaps replace the aria-label attribute with the aria-labelledby="doc-share-modal" attribute which would reference the <h1 id="doc-share-modal-title">Share document</h1> that is already present.
For the second issue:
<div role="dialog" aria-label="[object Object]" aria-modal="true"> ← main modal
<div role="dialog" aria-label="A modal window for sharing content"> ← nested div
Remove role="dialog" and aria-label from this div, it's just a presentational container.
For the third point:
change the "Shared with 3 users" heading to a level 2 heading. There is a conflict between the aria-hidden="true" attribute and aria-labelledby="Shared with 3 users". The aria-hidden="true" attribute must be removed so that the level 2 heading is rendered.
Steps to Reproduce
- Log in to a document in read mode
- Enable the screen reader
- Navigate into the modale
- And then the bug happens!
Critères RGAA
Critère 7.1 : Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère 9.1 : Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Impact
The impact is blocking for screen readers.
Users may be confused by the vocalization of both dialog boxes when opening. Especially since keyboard navigation (landmarks) may be distorted because users may find themselves navigating in a sub-modal without understanding the structure.
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
Status