Improve Accessibility of readmore widget

Created on 20 November 2024, 5 months ago

I believe the following items should be addressed:

The toggler should have an aria-controls attribute that connects it with the readmore wrapper. See MDN Web Docs, aria-controls
When the readmore wrapper is opened, the user's focus should be shifted to the first newly exposed element, which is before the toggler. The views_show_more module does something like this, see views_showmore.js, ~ line 132. But rather than looking for a focusable element, I think we should focus directly to the first element.
When the readmore wrapper is closed, the user's focus should remain on the toggle.

📌 Task

Status

Active

Version

3.0

Component

Code

Created by

🇺🇸United States sonfd Portland, ME

Live updates comments and jobs are added and updated live.

Merge Requests

!10Improve Accessibility of readmore widget
Open
🇺🇸United States sonfd
updated 3 months ago

Issue created by @sonfd
Comment 5 months ago →
🇺🇸United States sonfd Portland, ME
It may be that Issue #3258956 → should be merged into this one.
Comment 5 months ago →
🇺🇸United States sonfd Portland, ME
I spoke with my colleague @hbrokmeier → offline and we recommend focusing directly on the readmore wrapper after the widget is opened, rather than the first element inside that container. As a result, I'm updating the issue summary to reflect this.
Comment 5 months ago →
🇺🇸United States sonfd Portland, ME
Merge request !103488663: Improve Accessibility of readmore widget. → (Open) created by sonfd
Comment 3 months ago →
🇺🇸United States sonfd Portland, ME

Production build 0.71.5 2024