Problem/Motivation

In the theme settings, the color picker fields for custom accent and focus colors are missing accessible names.

This occurs both:

  • On the admin page settings form.
  • On the user settings form when the "Users can override Default Admin settings" option is enabled (therefore, regular users can encounter this).

WCAG success criterion

SC 4.1.2 Name, Role, Value (Level A)

Deque impact rating

Critical

Accessibility Insights reports

Screenshot of errors highlighted in Accessibility Insights

Title: WCAG 4.1.2: Ensure every form element has a label (#edit-accent-picker)
Tags: Accessibility, WCAG 4.1.2, label

Issue: Ensure every form element has a label (label - https://accessibilityinsights.io/info-examples/web/label)

Target application: Default Admin | Drush Site-Install - https://drupal-core-dev.ddev.site/admin/appearance/settings/default_admin

Element path: #edit-accent-picker

Snippet: <input data-drupal-selector="edit-accent-picker" type="color" id="edit-accent-picker" name="accent_picker" value="" class="form-color form-element form-element--type-color form-element--api-color">

How to fix: 
Fix any of the following:
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element has no placeholder attribute
  Element's default semantics were not overridden with role="none" or role="presentation"

Title: WCAG 4.1.2: Ensure every form element has a label (#edit-focus-picker)
Tags: Accessibility, WCAG 4.1.2, label

Issue: Ensure every form element has a label (label - https://accessibilityinsights.io/info-examples/web/label)

Target application: Default Admin | Drush Site-Install - https://drupal-core-dev.ddev.site/admin/appearance/settings/default_admin

Element path: #edit-focus-picker

Snippet: <input data-drupal-selector="edit-focus-picker" type="color" id="edit-focus-picker" name="focus_picker" value="" class="form-color form-element form-element--type-color form-element--api-color">

How to fix: 
Fix any of the following:
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element has no placeholder attribute
  Element's default semantics were not overridden with role="none" or role="presentation"

Steps to reproduce

  1. Install Drupal with the Standard profile.
  2. Log in as admin.
  3. Install the Default Admin theme and set it as the administration theme.
  4. Go to /admin/appearance/settings/default_admin.
  5. Select the "Custom" option for the "Accent color" and "Focus color" fields.
  6. Run a test with the Axe-core or Accessibility Insights extensions.

Proposed resolution

In Settings::getSettingsForm():

  • Add #title properties for the fields.
  • Hide the labels with '#title_display' => 'invisible'.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#13 Notification_Center.png328.11 KBmherchel
#8 Screenshot_Default_Admin_A11y_Name.png80.13 KBmgifford
#4 3587995-4-no-labels.png71.71 KBkentr

Issue fork drupal-3587995

Command icon 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:

About issue forks

Comments

kentr created an issue. See original summary.

kentr’s picture

kentr commented
Issue summary: View changes
kentr’s picture

kentr commented
Issue summary: View changes
kentr’s picture

kentr commented
Title: [no patch] Default admin theme settings form color pickers lack accessible names » Default admin theme settings form color pickers missing accessible names
Issue summary: View changes
Parent issue: #3585823: [Meta] Improve the accessibility of the Default Admin theme » #933004: Test that all form elements have a #title for accessibility
StatusFileSize
new 3587995-4-no-labels.png71.71 KB

Splitting changes back out from #933004: Test that all form elements have a #title for accessibility.

Changed parent to #933004: Test that all form elements have a #title for accessibility for tracking the cases of empty / missing #title values.

kentr opened merge request !16456

mgifford’s picture

mgifford
he/him
Primary language English
commented
Status: Active » Needs review

Confirmed.

kentr’s picture

kentr commented
Status: Needs review » Needs work

Thanks @mgifford!

It should probably be Needs work because the pipeline is failing.

I think the failure is unrelated, but I don't have the ability to rerun failed jobs to verify.

mgifford’s picture

mgifford
he/him
Primary language English
commented
StatusFileSize
new Screenshot_Default_Admin_A11y_Name.png80.13 KB

Screenshot for the patch

This is a pretty simple screenshot from /admin/appearance/settings/default_admin

Seemed to apply fine on my end. Adding a Tugboat screenshot (with no Accessibility Insights errors).

kentr’s picture

kentr commented

Thanks for trying it out. If you want to mark it RTBC, we can see what the higher-ups think about the test situation.

kentr’s picture

kentr commented

I take that back.

This test passes locally for me, but I'll make changes corresponding to the CI report. Might be due to different environments.

kentr’s picture

kentr commented

After I changed the test and then reverted it to address the new failure that wanted the old values, the pipeline is now passing.

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented
Status: Needs work » Reviewed & tested by the community

This is looking good to me, great work @mgifford and @kentr, thanks a lot.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new Notification_Center.png328.11 KB

Verified labels are showing. Commit incoming.

  • mherchel committed 16ba7552 on main 
    fix: #3587995 Default admin theme settings form color pickers missing...
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Reviewed & tested by the community » Patch (to be ported)

Committed and pushed 16ba75529b3 to main. Thanks!

  • mherchel committed fd5284f5 on 11.x 
    fix: #3587995 Default admin theme settings form color pickers missing...

  • mherchel committed 18e364b0 on 11.4.x 
    fix: #3587995 Default admin theme settings form color pickers missing...
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Patch (to be ported) » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.