Skip to content

Incorrect vocalization of the accessible name of the share modal #2001

@cyberbaloo

Description

@cyberbaloo

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

  1. Log in to a document in read mode
  2. Enable the screen reader
  3. Navigate into the modale
  4. 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

No one assigned

    Type

    Projects

    Status

    No status

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions