Problem/Motivation
In Add role="group" to to meet WCAG requirements, comment #22 is correct that if a <figure> has a role of group, it needs an accessible name from an aria-label or aria-labelledby attribute. This role is now provided by default in the media component, but has no accessible label.
Steps to reproduce
- Start with a clean install of Drupal 9, using Bartik or other default themes.
- Create a new basic page and select "Add media" from the toolbar
- Upload an image, and select the "caption" checkbox
- Fill out the caption value beneath the image and save the page.
What should happen: the final markup should render one of two patterns.
<figure role="group" aria-label="Accessible label"/>
<img.../>
<figcaption>Figcaption text</figcaption>
</figure>
<figure role="group" aria-labelledby="id-of-accessible-name-text"/>
<img.../>
<figcaption id="id-of-accessible-name-text">Figcaption text</figcaption>
</figure>
What currently happens: the figure has a role of group, but no accessible name tied to it.
<figure role="group">
<img.../>
<figcaption>Figcaption text</figcaption>
</figure>
Proposed resolution
One of (maybe) three solutions should be acceptable:
- adding core support for an aria-label value an editor can provide, which populates the aria-label attrbute
- Adding an auto-generated ID value to the
<figcaption>or some other text name for the<figure>, and add anaria-labelledbyattribute to<figure>with a value of that ID. - I saw the thread on possibly removing the role from core: Remove role="group" from figure in FilterCaption output. It's another way to go to resolve this particular issue, but also sounds like that's postponed. If a move in that direction isn't immediate, then there should be a patch for adding an accessible name by default until that change happens.
Remaining tasks
Remaining work needs to be defined depending on the preferred approach.
| Comment | File | Size | Author |
|---|---|---|---|
| #15 | 3208640-nr-bot.txt | 149 bytes | needs-review-queue-bot |
Issue fork drupal-3208640
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
carlygerardTagging NorthAmerica2021 for greater visibility.
Comment #3
carlygerardComment #4
carlygerardComment #5
carlygerardComment #6
nicoloye commentedWorking on this issue as part of DrupalConNA.
Comment #8
nicoloye commentedI drafted an early proposition.
There is surely many things to adjust and probably cleaner way to deal with this.
Also I didn't updated tests.
Comment #9
nicoloye commentedComment #11
rferguson commentedWhat about the case to remove the role if there is a figcaption present? It seems to trip the validators right now.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
Permitted ARIA roles - With no figcaption descendant: any, otherwise no permitted roles
OR
https://www.w3.org/TR/html-aria/
figure role=figure
If the figure has no figcaption descendant:
Any role
If the figure has a figcaption descendant:
No role.
Global aria-* attributes and any aria-* attributes applicable to the allowed roles.
Comment #15
needs-review-queue-bot commentedThe Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".
Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.
Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.
Comment #16
mgiffordTagging for https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html
Comment #18
alison#11:
See also: #3076765: Remove role="group" from figure in FilterCaption output
(in case other people find themselves here)