Problem/Motivation

The "Local Tasks" bar uses semantic markup for a navigation bar, and behaves like one (clicking one of the links refreshes the page and focus is moved to the top). However the link for the current page has visually hidden text that says "active tab" (which is redundant since the active link also has an aria-current attribute).

Using the language of tabs implies the links should behave like tabs (which they don't): https://www.w3.org/WAI/ARIA/apg/patterns/tabs/

It's important for a component's appearance and semantics to convey the same expected behaviors: https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html

Steps to reproduce

Log in and view a page with local tasks, such as your user profile.

links that say View, Shortcuts, and Edit

Focus the links with a screen reader, or inspect them in dev tools; the active link has visually hidden text that says "active tab".

Proposed resolution

Remove "active tab" visually hidden text.

CommentFileSizeAuthor
#6 Screenshot 2024-03-06 at 12.26.23 PM.png311.94 KBsmustgrave
#5 With-patch-shortcut-mobile 2024-03-06 at 5.48.30 PM.png193.12 KBmgifford
#5 With-patch-shortcut 2024-03-06 at 5.48.10 PM.png203.73 KBmgifford
#5 With-patch-view 2024-03-06 at 5.47.23 PM.png237.67 KBmgifford
#5 With-redundant-text-shortcut-mobile 2024-03-06 at 5.45.50 PM.png156.63 KBmgifford
#5 With-redundant-text-shortcut 2024-03-06 at 5.45.11 PM.png206.55 KBmgifford
#5 With-redundant-text-view 2024-03-06 at 5.43.36 PM.png245.84 KBmgifford
local_tasks.png10.5 KBcamilledavis

Issue fork drupal-3424746

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

camilledavis created an issue. See original summary.

camilledavis’s picture

camilledavis commented
Issue summary: View changes

camilledavis opened merge request !6835

camilledavis’s picture

camilledavis commented
Status: Active » Needs review
mgifford’s picture

mgifford
he/him
Primary language English
commented
StatusFileSize
new With-redundant-text-view 2024-03-06 at 5.43.36 PM.png245.84 KB
new With-redundant-text-shortcut 2024-03-06 at 5.45.11 PM.png206.55 KB
new With-redundant-text-shortcut-mobile 2024-03-06 at 5.45.50 PM.png156.63 KB
new With-patch-view 2024-03-06 at 5.47.23 PM.png237.67 KB
new With-patch-shortcut 2024-03-06 at 5.48.10 PM.png203.73 KB
new With-patch-shortcut-mobile 2024-03-06 at 5.48.30 PM.png193.12 KB

I like this idea, but I'm missing something.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attribut...

I couldn't find aria-current="page" in the page.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attribut...

Here's a snapshot of what I see with SimplyTest.me & D10:

<li class="tabs__tab js-tab is-active js-active-tab" data-original-order="1">
  <a href="/user/1/shortcuts" class="tabs__link js-tabs-link is-active" data-drupal-link-system-path="user/1/shortcuts">Shortcuts</a>
      <button class="reset-appearance tabs__trigger" aria-label="Tabs display toggle" data-drupal-nav-tabs-trigger="">
      <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m15 9h-14c-.56016 0-1-.43984-1-1s.43984-1 1-1h14c.5602 0 1 .43984 1 1s-.4398 1-1 1zm0-5h-14c-.56016 0-1-.43984-1-1s.43984-1 1-1h14c.5602 0 1 .43984 1 1s-.4398 1-1 1zm-14 8h14c.5602 0 1 .4398 1 1s-.4398 1-1 1h-14c-.56016 0-1-.4398-1-1s.43984-1 1-1z" fill="#003ECC" fill-rule="evenodd"></path></svg>    </button>
  </li>

I've uploaded some screenshots with/without the patch.

I'd love to know what I am missing.

smustgrave’s picture

smustgrave commented
StatusFileSize
new Screenshot 2024-03-06 at 12.26.23 PM.png311.94 KB

Maybe it's just claro

pic

I'm on 11.x the content view and see aria-current and the visually-hidden

camilledavis’s picture

camilledavis commented

I believe aria-current it was added in this issue: https://www.drupal.org/project/drupal/issues/3038523

mgifford’s picture

mgifford
he/him
Primary language English
commented

Thanks smustgrave - I appreciate you verifying that. I wasn't starting with D11 but obviously should have been here.

That makes sense @camille.davis@civicactions.com

I tested with code without that.

In which case I don't have a problem removing the redundant text.. Who wants redundant text!

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented

but talking of the link provided in #7. @larowlan provided a few examples in #3038523-38: Add aria-current attribute to navigation items where the aria-current is used. so it isn't only about local tasks but also for menu linkes, breadcrumbs and pagers, or are there even more places? would it make sense to extend the scope of this issue or open up a follow up issue to make things consistent across the board?

but overall definitely a good and reasonable change

smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community
Issue tags: +Needs Review Queue Initiative

Per #9 I checked pagination and am seeing the same thing. Opened #3426416: Check breadcrumbs, pagination, and menu links for redundant visually hidden to research those other components.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
Version: 11.x-dev » 10.3.x-dev
Status: Reviewed & tested by the community » Fixed

Committed and pushed 205d4bfbda to 11.x and dde87be077 to 10.3.x. Thanks!

Backported to 10.3.x so this will be in the next minor release (same as #3038523: Add aria-current attribute to navigation items) since it is a markup change.

  • alexpott committed dde87be0 on 10.3.x 
    Issue #3424746 by camille.davis@civicactions.com, mgifford, smustgrave,...

  • alexpott committed 79d8c3c6 on 11.x 
    Issue #3424746 by camille.davis@civicactions.com, mgifford, smustgrave,...

Status: Fixed » Closed (fixed)

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