Contrib.social

Navigation Top Bar accessibility issues found by Nightwatch tests

Open on Drupal.org →
Created on 21 February 2025, 1 day ago

Problem/Motivation

While working on 📌 Show the Navigation Top Bar in 11.1.x and 10.4.x Active found that Navigation Top Bar has some accessibility issues disclosed by aXe Nightwatch tests.

This issues need to be solved before we can make the Top Bar stable.

From https://git.drupalcode.org/issue/drupal-3507866/-/jobs/4431574

  ️TEST FAILURE (1m 56s):  
   - 2 assertions failed; 1433 passed
   ✖ 1) Tests/a11yTest
   – Accessibility - Navigation Module - Claro page (1.698s)
   → ✖ NightwatchAssertError
   aXe rule: button-name - Buttons must have discernible text
	In element: .toolbar-button--icon--dots
   → ✖ NightwatchAssertError
   aXe rule: region - All page content should be contained by landmarks
	In element: .top-bar__context

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Active

Version

11.0 🔥

Component

navigation.module

Created by

🇪🇸Spain plopesc Valladolid

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @plopesc
  • Comment 1 day ago →
    🇪🇸Spain plopesc Valladolid
  • Merge request !11257Issue #3508199: Navigation Top Bar accessibility issues found by Nightwatch tests → (Open) created by plopesc
  • Pipeline finished with Failed
    1 day ago
    Total: 853s
    #430435
  • Pipeline finished with Failed
    1 day ago
    Total: 574s
    #430453
  • Merge request !11259Issue #3508199: Navigation Top Bar accessibility issues found by Nightwatch tests - TEST ONLY → (Open) created by plopesc
  • Comment 1 day ago →
    🇪🇸Spain plopesc Valladolid

    Since this is not an easy bug to reproduce, created 2 branches:

    • 3508199-navigation-top-bar-axe-test-only: It contains only the code necessary to make the error visible in Nightwatch tests
    • 3508199-navigation-top-bar-axe: It should contain the code necessary to make the error visible in Nightwatch tests + the changes to fix it

    Once tests in 3508199-navigation-top-bar-axe are green and approved, might be necessary to create a new branch that contains only the code necessary to fix the error. This branch will contain a diff between the 2 original ones, and that's the one that should be merged.

    I know this is a bit tricky, but I have not been capable to figure out a better flow for this issue. If someone else have a better proposal, please feel free to show your concerns and ideas.

  • Pipeline finished with Failed
    1 day ago
    Total: 649s
    #430464
  • Comment 1 day ago →
    🇪🇸Spain plopesc Valladolid
  • First commit to issue fork.
  • Pipeline finished with Failed
    about 11 hours ago
    Total: 399s
    #431316
  • Pipeline finished with Failed
    about 10 hours ago
    Total: 740s
    #431323
  • Comment about 10 hours ago →
    🇷🇸Serbia finnsky

    I added a role and text for the button. Nw tests passed.

    But a11y needs to be checked here.

    And in general, what is top_bar? What is its role? Header or navigation?

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024