Page MenuHomePhabricator

Dialog: Implement best approach for becoming keyboard and screenreader accessible
Closed, ResolvedPublic3 Estimated Story Points

Description

Issue

Arising from T342395, Codex should follow the best approach or making Dialog keyboard and screenreader accessible. Premises:

  • When the dialog is first opened, the focus is set in a place that makes it easy to access the content in the rest of the dialog, and it's impossible to navigate elements behind the dialog.
  • The dialog is closable via keyboard

Developer notes

ARIA roles and attributes

  • While aria-modal="true" removes requirement of putting aria-hidden on background content, as the aria-modal informs assistive technologies that content outside a dialog is inert, it's the safer way currently to have both attributes in use on the dialog and the background content elements.

This is most simple when teleported dialogs are the way to go, see related discussion at T343476

Keyboard navigation

  • The escaping of dialogs by pressing (ESC) has already been part since the original Dialog implementation.

Focus management

  • Putting the dialog element at end of body so it is not (mistakenly) a descendant of any element that has aria-hidden set to true. See also conversation in T343476#9078810 following.

Resources

ARIA authoring practices on modal dialog and specifically on focus trapping
More on focus management:
https://allyjs.io/tutorials/accessible-dialog.html#reacting-to-kbdtabkbd-and-kbdshift-tabkbd
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role#focus_management

Acceptance Criteria

  • Add aria-modal="true" to the already implemented role="dialog" element.
  • Focus on initial dialog open should work in a predictable way.
  • Users should not be able to interact with content behind the dialog when open.
    • Keep focus trap as initially implemented
    • Rely on aria-hidden="true" thank to its wider support over only aria-modal on background elements for all direct body children incl script tags
    • Add inert as future-facing attribute for non-interactable background elements
  • The user should always have a way to exit the dialog using keyboard navigation. Established in initial implementation

Event Timeline

Catrope set the point value for this task to 3.Aug 14 2023, 5:12 PM
Catrope added a subscriber: Volker_E.

Assigning to @Volker_E to write the task description

Volker_E renamed this task from PLACEHOLDER dialog a11y to Dialog; Implement best approach for making Dialog keyboard and screenreader accessible.Aug 15 2023, 7:21 AM
Volker_E added projects: Accessibility, Codex.
Volker_E updated the task description. (Show Details)
Volker_E renamed this task from Dialog; Implement best approach for making Dialog keyboard and screenreader accessible to Dialog: Implement best approach for becoming keyboard and screenreader accessible.Aug 15 2023, 7:22 AM

Change 947971 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] Dialog: Add `aria-modal="true"` to the dialog element

https://gerrit.wikimedia.org/r/947971

Change 947971 merged by jenkins-bot:

[design/codex@main] Dialog: Add `aria-modal="true"` to the dialog element

https://gerrit.wikimedia.org/r/947971

Change 949555 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.16.1 to v0.17.0

https://gerrit.wikimedia.org/r/949555

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/6188b4e5fe/w

Change 949555 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.16.1 to v0.17.0

https://gerrit.wikimedia.org/r/949555

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/6188b4e5fe/w/

As mentioned in T342395#9092253, implementing the body child element attributes makes most sense after the default teleportation patch has been finalized. cc: @egardner

CCiufo-WMF triaged this task as Medium priority.Aug 28 2023, 5:12 PM

Change 953742 had a related patch set uploaded (by Catrope; author: Catrope):

[design/codex@main] Dialog: Set aria-hidden and inert on the rest of the page when open

https://gerrit.wikimedia.org/r/953742

I believe this patch should address the remaining acceptance criteria, by adding aria-hidden and inert. The focus behavior already seems to be working as specified, as far as I can tell in my testing.

Change 953742 merged by jenkins-bot:

[design/codex@main] Dialog: Set aria-hidden and inert on the rest of the page when open

https://gerrit.wikimedia.org/r/953742

CCiufo-WMF changed the task status from Open to In Progress.Sep 8 2023, 8:07 PM

Change 956973 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v0.18.0 to v0.19.0

https://gerrit.wikimedia.org/r/956973

Change 956973 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.18.0 to v0.19.0

https://gerrit.wikimedia.org/r/956973