Daily Accessibility ReviewModal dialogs missing accessible name (aria-label/aria-labelledby)

[github-actions[bot]]

Problem

The AppModal component (shell/components/AppModal.vue) renders a dialog with role="dialog" and aria-modal="true", but does not provide an accessible name via aria-label or aria-labelledby. According to WCAG and ARIA specifications, every dialog must have an accessible name so screen reader users can understand the purpose of the modal when focus moves to it.

Code Location

shell/components/AppModal.vue, lines ~198–210:

<div
  v-bind="$attrs"
  id="modal-container-element"
  ref="modalRef"
  :class="customClass"
  class="modal-container"
  :style="modalStyles"
  role="dialog"
  aria-modal="true"
  `@click`.stop
>
  <slot><!--Empty content--></slot>
</div>

Notice: no aria-label or aria-labelledby attribute.

Impact

When a modal opens and focus moves into the dialog, screen readers (NVDA, JAWS, VoiceOver) announce the dialog container but cannot announce what the dialog is about because there is no accessible name. Users are left without context about the modal's purpose.

WCAG 2.2 Reference

• 4.1.2 Name, Role, Value (Level A) — For all user interface components, the name and role can be programmatically determined. Dialogs (role="dialog") must have an accessible name. (www.w3.org/redacted)
• ARIA Authoring Practices Guide — Every dialog must have an accessible name provided by aria-label or aria-labelledby. (www.w3.org/redacted)

Suggested Fix

Add a name or title prop to AppModal and use it as the accessible name:

<!-- AppModal.vue template -->
<div
  role="dialog"
  aria-modal="true"
  :aria-label="name || title"
  ...
>

Or, if dialog content always starts with a heading, use aria-labelledby:

<!-- AppModal.vue: expose a prop and id mechanism -->
<div
  role="dialog"
  aria-modal="true"
  :aria-labelledby="labelledBy"
  ...
>

Many modal usages should then pass a title prop or include a heading with the corresponding id so the aria-labelledby association can be established.

Generated by Daily Accessibility Review · ● 2.4M · ◷

• expires on Jun 5, 2026, 8:36 AM UTC

[github-actions[bot]]

This discussion was automatically closed because it expired on 2026-06-05T08:36:59.595Z.

Closed by Workflow