Skip to content

Modal dialog is missing an accessible name #5502

@alegontarz

Description

@alegontarz

Describe the bug

An ARIA dialog is rendered without an accessible name. The dialog element:
<ngb-modal-window role="dialog" tabindex="-1" aria-modal="true" class="d-block modal fade show">
does not provide a valid accessible name through aria-label, aria-labelledby, or title. As a result, screen reader users may not understand the purpose of the dialog when it opens.

To Reproduce

Steps to reproduce the behavior:

  1. Open the search results page and click on All of DSpace
  2. Inspect the modal element in the DOM or run an accessibility audit.
  3. Check the ngb-modal-window element with role="dialog".

Expected behavior

The dialog has a valid accessible name that describes its purpose.

Suggested Fix

Prefer aria-labelledby tied to the modal heading, for example:

<ngb-modal-window
  role="dialog"
  tabindex="-1"
  aria-modal="true"
  aria-labelledby="modal-title"
  class="d-block modal fade show">
</ngb-modal-window>

<h2 id="modal-title">Filter settings</h2>

Metadata

Metadata

Assignees

Labels

accessibilitycomponent: Discoveryrelated to discovery search or browse systemgood first issueThis is a smaller ticket/bug that may be easier for new contributorsimprovementtestathonReported by a tester during Community Testathon

Type

Projects

Status

🏗 In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions