Skip to content

Add Craft.cp.announce() and implement for various loading states#15569

Merged
brandonkelly merged 14 commits into5.4from
a11y/fixes
Aug 29, 2024
Merged

Add Craft.cp.announce() and implement for various loading states#15569
brandonkelly merged 14 commits into5.4from
a11y/fixes

Conversation

@gcamacho079
Copy link
Copy Markdown
Contributor

@gcamacho079 gcamacho079 commented Aug 20, 2024 •
edited
Loading

Description

Previously, we had live regions that were very localized (i.e., one for element indexes, live regions attached to buttons like the MultiFunctionBtn, etc.). This PR attempts to simplify screen reader announcements for status messages by:

  • Adding a method for making screen reader accessible announcements
  • Setting a default live region when initializing the control panel (#global-live-region)
  • Adding a live region to the Slideout component (in addition to the Modal live region implemented by @i-just)
  • Listening for the addition/removal of modal layers and modifying the active live region accordingly; this is important because activating a modal layer hides other layers (including the #global-live-region and contents of previous layers) from assistive technology.

Related issues

Resolves PT-2091, PT-2062, PT-2064, PT-2063, PT-2060, PT-2089, PT-2031

@gcamacho079 gcamacho079 added the accessibility 👤 features related to accessibility label Aug 20, 2024
@linear
Copy link
Copy Markdown

linear Bot commented Aug 20, 2024

PT-2091 “Sign in with a passkey” button shows loading spinner on click but loading state is not announced to screen reader users

Only add live region to form button if there are messages attached to…
028a8d6 
… the button; add loading message on add passkey click
@linear
Copy link
Copy Markdown

linear Bot commented Aug 20, 2024

PT-2062 When clicking the “Add a passkey button” the loading message isn’t conveyed to screen reader users

@linear
Copy link
Copy Markdown

linear Bot commented Aug 23, 2024

PT-2064 When clicking “Set up” button, loading spinner isn’t announced to screen reader users

@linear
Copy link
Copy Markdown

linear Bot commented Aug 23, 2024

PT-2063 Status message associated with password reset loading state isn’t announced to screen reader users

@linear
Copy link
Copy Markdown

linear Bot commented Aug 26, 2024

PT-2060 “Verify” button shows loading spinner on click but loading state is not announced to screen reader users

Lupe Camacho added 2 commits August 26, 2024 15:22
Use Craft announcer in entry mover, make/use addLiveRegion in Modal.j…
49a5308 
…s, use Craft announcer in PreviewFileModal.js
Add live region to slideouts, ensure slideout live region can also be…
c329bcf 
… set as the active live region; cleanup attributes
@linear
Copy link
Copy Markdown

linear Bot commented Aug 27, 2024

PT-2089 “Download codes” button loading status isn’t conveyed to screen reader users

@linear
Copy link
Copy Markdown

linear Bot commented Aug 27, 2024

PT-2031 Loading and search complete status messages are not announced

@gcamacho079 gcamacho079 changed the title A11y/fixes Add Craft.cp.announce() and implement for various loading states Aug 27, 2024
@gcamacho079 gcamacho079 marked this pull request as ready for review August 27, 2024 18:03
brianjhanson
brianjhanson approved these changes Aug 28, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@brianjhanson brianjhanson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! It could be useful to split the announce function out from the Craft.cp object, but that's probably for down the road.

@gcamacho079
Copy link
Copy Markdown
Contributor Author

gcamacho079 commented Aug 28, 2024

Looks good! It could be useful to split the announce function out from the Craft.cp object, but that's probably for down the road.

Thank you for reviewing @brianjhanson. Where do you think it would be best to move it to?

@brianjhanson
Copy link
Copy Markdown
Contributor

brianjhanson commented Aug 28, 2024

Looks good! It could be useful to split the announce function out from the Craft.cp object, but that's probably for down the road.

Thank you for reviewing @brianjhanson. Where do you think it would be best to move it to?

Excellent question and why I think it's for a separate PR. It would probably make the most sense as a separate package but we don't have any of the infrastructure in place for that yet.

@brandonkelly
Release note
ed3ab18 
[ci skip]
@brandonkelly brandonkelly merged commit 84ba503 into 5.4 Aug 29, 2024
@brandonkelly brandonkelly deleted the a11y/fixes branch August 29, 2024 22:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@brianjhanson brianjhanson brianjhanson approved these changes

@i-just i-just i-just approved these changes

@brandonkelly brandonkelly Awaiting requested review from brandonkelly

Assignees

No one assigned

Labels

accessibility 👤 features related to accessibility

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@gcamacho079 @brianjhanson @i-just @brandonkelly