Breadcrumb separators are focusable with the voiceover cursor and get also announced

Created on 19 December 2024, about 1 month ago

Problem/Motivation

If you step through the breadcrumb in claro in for example voiceover by pressing "VO-arrow right" the breadcrumb segment separators are focusable and are getting announced, which is not desirable (claro.mp4 - the problem is also illustrated in scott o haras example page https://scottaohara.github.io/a11y_breadcrumbs/ in the screen reader announcements section).

Steps to reproduce

  • Test any page in the admin ui with more than one segment in the breadcrumb with a screen reader

Proposed resolution

I would suggest to follow the behavior Olivero is applying (olivero.mp4)

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

๐Ÿ› Bug report
Status

Active

Version

11.0 ๐Ÿ”ฅ

Component

Claro theme

Created by

๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

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.

  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Comments & Activities

  • Issue created by @rkoller
  • ๐Ÿ‡จ๐Ÿ‡ดColombia luisfersegura

    I will work in this

  • ๐Ÿ‡จ๐Ÿ‡ดColombia luisfersegura

    Hi, I was not able to reproduce.

    Can you upload the videos that you mensioned?

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

    not sure why the videos havent been uploaded and added back then. apologies. in both videos i first tab through the breadcrumb and then shift tab back to the start as illustrated by the keycastr output. then i do the same by stepping through the breadcrumb one way pressing VO arrow right... in claro the separators are announced and in focus, in olivero they are ignored.

  • ๐Ÿ‡ท๐Ÿ‡บRussia Chi

    I guess it happens because Claro is using content property for drawing the separators. The possible fix would be to use background-image instead like Olivero does.

Production build 0.71.5 2024