At mobile widths, Claro turns the vertical tabs into <details> elements. Within this, the <summary> element has aria-pressed and aria-expanded attributes.

These aria-pressed and aria-expanded attributes don't always reflect the proper state of the control.

On initial pageload, it is fine, but when you click any of them, both attributes are always set to false -- even if the details pane is expanded.

Steps to reproduce
1. Go to /admin/structure/types/manage/article page.
2. click on the vertical tabs on any device. On summary, aria-pressed and aria-expanded attributes don't always reflect the proper state of the control.

Check the attached video for same.

CommentFileSizeAuthor
#9 Screen Recording 2023-05-31 at 8.14.24 AM.mov12.04 MBgauravvvv
#7 3272316-7.patch971 bytesgauravvvv
Add_content_type___Mike.png287.94 KBmherchel

Comments

mherchel created an issue. See original summary.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

removing

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +wcag412

Looks like https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

gauravvvv’s picture

gauravvvv commented
Status: Active » Needs review
StatusFileSize
new 3272316-7.patch971 bytes

I have fixed the issue, provided patch for same. please review

smustgrave’s picture

smustgrave commented
Status: Needs review » Postponed (maintainer needs more info)
Issue tags: +Needs Review Queue Initiative

Tried replicating on 11.x on a node edit page and all the details summary aria-expanded and aria-pressed seem to be toggling fine. Can any additional steps be provided.

gauravvvv’s picture

gauravvvv commented
Issue summary: View changes
Status: Postponed (maintainer needs more info) » Needs review
StatusFileSize
new Screen Recording 2023-05-31 at 8.14.24 AM.mov12.04 MB

I have updated the issue summary, with steps to reproduce.

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Seems like something that we can easily add a test for to show the issue.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.