Inprove accessibility of paragraphs administration : add h3 around title

Created on 6 June 2024, 4 months ago

Problem/Motivation

In Drupal back office, paragraphs edit forms can't be identified by screen readers in "Paragraph (stable)" field widget plugin. This issue complicates the contribution work of visually impaired people.

Steps to reproduce

For example, this issue can be observed using NVDA : https://www.nvaccess.org/
This software generate a quick access summary from the struture (headers) of a web page (h1, h2, h3, etc.)

ex:

<div class="paragraph-type js-form-wrapper form-wrapper" data-drupal-selector="edit-field-contenu-principal-0-top-type" id="edit-field-contenu-principal-0-top-type--Jsmyx_3d7nk">
<span class="paragraph-type-label">Some paragraph name</span>
</div>

Proposed resolution

Add h3 header markup around the paragraph name so that it is integrated to the structure of the administration page in the back office.

ex:

<div class="paragraph-type js-form-wrapper form-wrapper" data-drupal-selector="edit-field-contenu-principal-0-top-type" id="edit-field-contenu-principal-0-top-type--Jsmyx_3d7nk">
<h3><span class="paragraph-type-label">Some paragraph name</span></h3>
</div>
Feature request
Status

Active

Version

1.17

Component

User interface

Created by

🇫🇷France flemaitre

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @flemaitre
  • First commit to issue fork.
Production build 0.71.5 2024