Block UI A11y errors identified with Axe + Nightwatch

Created on 31 October 2022, about 2 years ago
Updated 22 June 2023, over 1 year ago

Blocked on πŸ“Œ Automated A11y tests in Nightwatch Fixed , which performs the checks that surfaced this

Problem/Motivation

The tests added in πŸ“Œ Automated A11y tests in Nightwatch Fixed identified the following when visiting /admin/structure/block

 βœ– NightwatchAssertError
08:56:50    aXe rule: color-contrast - Elements must have sufficient color contrast
08:56:50 	In element: .region-hero-message > td[colspan="5"] > em
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: color-contrast - Elements must have sufficient color contrast
08:56:50 	In element: .region-sidebar-message > td[colspan="5"] > em
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: color-contrast - Elements must have sufficient color contrast
08:56:50 	In element: .region-content_below-message > td[colspan="5"] > em
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: color-contrast - Elements must have sufficient color contrast
08:56:50 	In element: .region-footer_top-message > td[colspan="5"] > em
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: duplicate-id-active - IDs of active elements must be unique
08:56:50 	In element: .region-title-header > td[colspan="5"] > .region-title__action.js-form-wrapper.form-wrapper
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: duplicate-id-active - IDs of active elements must be unique
08:56:50 	In element: .region-title-primary_menu > td[colspan="5"] > .region-title__action.js-form-wrapper.form-wrapper
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: duplicate-id-active - IDs of active elements must be unique
08:56:50 	In element: .region-title-secondary_menu > td[colspan="5"] > .region-title__action.js-form-wrapper.form-wrapper
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: duplicate-id-active - IDs of active elements must be unique
08:56:50 	In element: .region-title-hero > td[colspan="5"] > .region-title__action.js-form-wrapper.form-wrapper
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: duplicate-id-active - IDs of active elements must be unique
08:56:50 	In element: .region-title-highlighted > td[colspan="5"] > .region-title__action.js-form-wrapper.form-wrapper
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: duplicate-id-active - IDs of active elements must be unique
08:56:50 	In element: .region-title-breadcrumb > td[colspan="5"] > .region-title__action.js-form-wrapper.form-wrapper
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: duplicate-id-active - IDs of active elements must be unique
08:56:50 	In element: .region-title-social > td[colspan="5"] > .region-title__action.js-form-wrapper.form-wrapper
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: duplicate-id-active - IDs of active elements must be unique
08:56:50 	In element: .region-title-content_above > td[colspan="5"] > .region-title__action.js-form-wrapper.form-wrapper
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: duplicate-id-active - IDs of active elements must be unique
08:56:50 	In element: .region-title-content > td[colspan="5"] > .region-title__action.js-form-wrapper.form-wrapper
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: duplicate-id-active - IDs of active elements must be unique
08:56:50 	In element: .region-title-sidebar > td[colspan="5"] > .region-title__action.js-form-wrapper.form-wrapper
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: duplicate-id-active - IDs of active elements must be unique
08:56:50 	In element: .region-title-content_below > td[colspan="5"] > .region-title__action.js-form-wrapper.form-wrapper
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: duplicate-id-active - IDs of active elements must be unique
08:56:50 	In element: .region-title-footer_top > td[colspan="5"] > .region-title__action.js-form-wrapper.form-wrapper
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: duplicate-id-active - IDs of active elements must be unique
08:56:50 	In element: .region-title-footer_bottom > td[colspan="5"] > .region-title__action.js-form-wrapper.form-wrapper
08:56:50   βœ– NightwatchAssertError
08:56:50    aXe rule: region - All page content should be contained by landmarks
08:56:50 	In element: #secondary-tabs-title

Things to consider:

  • It may be easier to split this into multiple issues
  • These tests were performed with Claro as theme, so it is possible some A11y fails are Claro specific, vs. originating from the Block module. For any given issue where that is the case, change the Component to Claro.
  • If any of the a11y errors are considered acceptable (either false positives or there's a tradeoff that provides greater benefit), it's possible to leave something unfixed, but the rationale should be documented within the code.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

πŸ› Bug report
Status

Active

Version

11.0 πŸ”₯

Component
BlockΒ  β†’

Last updated 2 days ago

Created by

πŸ‡ΊπŸ‡ΈUnited States bnjmnm Ann Arbor, MI

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

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024