Contrib.social

Update aria attributes on start tour button

Open on Drupal.org →
Created on 21 August 2024, 3 months ago
Updated 8 September 2024, 3 months ago

Problem/Motivation

at the moment the tour button has an aria-pressed attribute. problem with that, for screenreader user that doesn't have much benefit, cuz technically as soon as the button is pressed everything except the tip dialog modal gets "hidden" behind the greyed out svg, or on second look it at least should, but at the moment the admin_toolbar is spared from being greyed out in contrast to the jquery ui dialog modals in drupal core where the admin_toolbar is greyed out as well.
Currently the dialog modal for a tour tip is missing the dialog element and or an aria-modal attribute so that everything in the background of the dialog modal gets removed from the accessibility object model. therefore if sheperd would support that the toggle button would be unavailable anyway, so the purpose of a "toggle" button would be obsolet (there will be a to be linked issue upstream). And a toggle doesn't communicate necessarily what happens when a button is toggled. A user not necessarily knows what will happen when the button is clicked.
@andrewmacpherson suggested adding aria-haspopup="dialog" in the issue summary of 🌱 [META] Improve accessibility of tour module Active , indicating to the user that a dialog will appear. Aside the fact that with the tour dialog modal having a dialog element and or an aria-modal attribute in place removing the button from the AOM it also has to be noted that having aria-pressed alongside the aria-haspopup on the button element leads to the following announcement in voiceover: action toggle button, so aria-haspopup is not getting announced with aria-pressed in place. Removing aria-pressed instead leads to the following announcement: action dialog pop up button. As already mentioned on the parent issue, i've raised the topic at the last a11y office hour and folks were in agreement with the suggestion in the proposed resolution section.

Steps to reproduce

  • activate your screenreader of choice
  • go to admin/appearance
  • go to the tour toggle button

Proposed resolution

  • Remove the aria-pressed attribute from the button element
  • Add the aria-haspopup="dialog" to the button element
  • Create an issue upstream in the shepard repo for using a dialog element and or an aria-modal attribute

Remaining tasks

User interface changes

API changes

Data model changes

✨ Feature request
Status

Fixed

Version

2.0

Component

User interface

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.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @rkoller
  • Comment 3 months ago →
    🇺🇸United States smustgrave

    Do we know if this is fixed in shepherd.js version past 10.0.1?

  • Comment 3 months ago →
    🇩🇪Germany rkoller Nürnberg, Germany

    oh the button markup is generated by sheperd? i've assumed that would be on the tour module and or drupal end? will take a look if i am able to figure it out if sheperd 13 which is the current version i suppose is supporting it.

  • Comment 3 months ago →
    🇺🇸United States smustgrave

    The aria-pressed I believe is in tour module but the upstream issue may already be addressed too

  • Comment 3 months ago →
    🇩🇪Germany rkoller Nürnberg, Germany

    i've checked alpha13 of shepherd 12.0.0. ( i guess that is the latest). the dialog element/aria-modal issue for upstream is still necessary. shepherd-element.svelte uses a div and doesnt have the aria-modal attribute either ( i am only on the feedback from mike, just asked him as a reality check before i create the issue upstream). and on the button in shepherd-button.svelt i also dont see aria-pressed nor aria-haspopup. so probably it would make sense to open an issue upstream for that as well. guess both should happen in combination.

  • Comment 3 months ago →
    🇺🇸United States smustgrave

    We can least improve things on our end.

  • Assigned to smustgrave
  • Comment 3 months ago →
    🇺🇸United States smustgrave
  • Merge request !57Issue #3469328 by rkoller, smustgrave: Update aria attributes on start tour button → (Merged) created by smustgrave
  • Status changed to Needs review 3 months ago
  • Comment 3 months ago →
    🇺🇸United States smustgrave

    Probably need to open an upstream issue.

  • Status changed to RTBC 3 months ago
  • Comment 3 months ago →
    🇩🇪Germany rkoller Nürnberg, Germany

    with voiceover i've tested with safari (see and listen in the video), firefox and edge on macos and the dialog popup is announced properly across all browsers. looks good!

    in regards of the upstream issue. do you mean opening an issue in regards of aria-haspopup there as well or do you refer to the dialog element topic? for the latter i've already opened an issue: https://github.com/shepherd-pro/shepherd/issues/2959. i am just battling with the shepherd environment run within ddev (the problems are also mentioned on the issue). otherwise i would already tried opening a pull request (or at least tried if i am able to change the markup to a dialog element locally in a first step).

  • Status changed to Fixed 3 months ago
  • Comment 3 months ago →
    🇺🇸United States smustgrave

    So currently I'm doing some hacky way to make sure the attributes are there since don't have a way to know if or when it would be fixed upstream in shepherd.

  • Comment 3 months ago →
    System Message
    • smustgrave → committed ed858f6f on 2.0.x 
      Issue #3469328 by rkoller, smustgrave: Update aria attributes on start...
  • Comment 2 months ago →
    System Message

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

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024