Daily Accessibility ReviewAppModal dialog missing accessible name (aria-labelledby/aria-label)

[github-actions[bot]]

Problem

The AppModal component renders a role="dialog" element without an accessible name. Every dialog must have a label so that screen reader users understand its purpose when focus moves into it.

File: shell/components/AppModal.vue (lines 198–208)

<div
  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>

The element has role="dialog" and aria-modal="true", but no aria-labelledby or aria-label attribute. Because the component uses a generic <slot>, consumers supply the title — but AppModal provides no mechanism to automatically connect that title to the dialog element.

Real-world impact

PromptRemove.vue wraps an <app-modal> whose visible title is "Are you sure?" inside a <Card> slot:

<app-modal
  name="promptRemove"
  :trigger-focus-trap="true"
  `@close`="close"
>
  <Card>
    <template `#title`>
      <h4>{{ t('promptRemove.title') }}</h4>
    </template>
    ...
  </Card>
</app-modal>

A screen reader user reaching this dialog hears only "dialog" (or nothing), not the title. The same problem affects every other modal in the application that uses AppModal.

WCAG 2.2 references

Criterion	Level	Description
[4.1.2 Name, Role, Value]((www.w3.org/redacted)	AA	For all UI components, name and role can be programmatically determined.

Recommended fix

Add an ariaLabel or ariaLabelledby prop to AppModal and bind it to the dialog container:

<!-- AppModal.vue – new props -->
ariaLabel: { type: String, default: undefined },
ariaLabelledby: { type: String, default: undefined },

<!-- template -->
<div
  role="dialog"
  aria-modal="true"
  :aria-label="ariaLabel"
  :aria-labelledby="ariaLabelledby"
  ...
>

Consumers should then pass the heading's id via :aria-labelledby, for example:

<app-modal aria-labelledby="remove-modal-title" ...>
  <h4 id="remove-modal-title">{{ t('promptRemove.title') }}</h4>
  ...
</app-modal>

Generated by Daily Accessibility Review · ● 3.4M · ◷

• expires on Jun 2, 2026, 8:32 AM UTC