Improve the title of the dialog modal for a tip

Created on 21 August 2024, 3 months ago

Problem/Motivation

At the moment the title of a tip dialog modal only contains the actual title. the information of tip for example "2 of 6" is not focusable, placed somwhere else on the dialog modal and not directly accessible. but strictly speaking those number of steps is an important information and the tour is somehow similar to a wizard with its steps. And the recommendation for wizards is placing those number of steps within the title so they are directly accessible.

Steps to reproduce

  • activate your favorite screenreader
  • go to admin/appearance
  • start the tour with your eyes closed
  • try to figure out how many steps are available and keep track of the tip number of the current tip each time.

Proposed resolution

How about moving the steps to the title. and go with either the short form:
x of x: [title]
or the "longer" form:
Tip x of x: [title]

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

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

Comments & Activities

  • Issue created by @rkoller
  • 🇩🇪Germany rkoller Nürnberg, Germany
  • 🇺🇸United States smustgrave

    What about instead of changing it visually we add a sr-only div with "Tip x of x" before the label. Would that meet the requirement?

  • 🇩🇪Germany rkoller Nürnberg, Germany

    hmmm a screenreader once told me "ideally" the content for sighted and screenreader users should be identical. and sometimes you have "semi"sighted folks who are able to grasp visual cue but rely on screenreaders. having the step count in the title and in the bottom right corner would be sort of redundant.

    my other thought was make the steps in the title visually hidden for sighted users while make the count in the bottom right corner hidden from screen readers. but that idea would collide with keep the content in line for sighted and screenreader users if possible.

  • 🇺🇸United States smustgrave

    Maybe we leave the title allow and allow the counter to be picked up by screenreaders.

    I think moving the counter visually to the title will look odd.

    Also seems like a feature request?

  • 🇩🇪Germany rkoller Nürnberg, Germany

    i'll get in a few more opinions. i will ask over in the group participating in the a11y track on starshot what their thoughts are. but i agree moving the counter might look. or it depends. if you move the next button to the corner in the bottom right and the previous corner in the bottom left then it would look visually even again. but with the downside that both buttons are not in close proximity anymore for mouse users. anyway gotta ask folks and will summarize their thoughts (or they comment on their own here - already "advertised" the a11y meta ;) in the discussion after our last meeting)

  • Status changed to Postponed: needs info 3 months ago
  • 🇺🇸United States smustgrave

    Still not sure if we are implementing this but planning for future targets.

  • 🇩🇪Germany rkoller Nürnberg, Germany
  • 🇺🇸United States smustgrave

    So outside updating the title is there any other way to fix?

  • 🇺🇸United States smustgrave

    Okay shepherd js has been updated to latest version. This needs to be re-evaluated

  • Status changed to Closed: outdated 1 day ago
  • 🇺🇸United States smustgrave
Production build 0.71.5 2024