Problem/Motivation

Steps to reproduce

At the moment tour.module.css has no css rule for if an element within a tip dialog modal gets into focus. the focus in use is the default focus style of the browser. for one that style is not in line with the default focus style in claro (is gin using the same css variables btw? ) and the default browser focus style in my case in safari has a too low color contrast (#93B4FB/#FFFFFF -> 2.1:1, but 3:1 would be required).

Proposed resolution

  • go to admin/appearance
  • open the tour
  • tab

Remaining tasks

Add outline: var(--focus-outline) and box-shadow: var(--focus-box-shadow) for the previous and next button as well as the close button of a tour dialog modal.

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#8 touchtarget.jpg37.19 KBrkoller

Issue fork tour-3469283

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:

Comments

rkoller created an issue. See original summary.

smustgrave’s picture

Issue tags: +tour-2.0.3-target
smustgrave’s picture

Assigned: Unassigned » smustgrave

smustgrave’s picture

Status: Active » Needs review
pooja_sharma’s picture

StatusFileSize
new89.05 KB
new77.41 KB
new87.4 KB

I have verified changes has been applied as mentioned in IS & attached the screenshots as well moving to RTBC

pooja_sharma’s picture

Status: Needs review » Reviewed & tested by the community
rkoller’s picture

StatusFileSize
new37.19 KB

looks good, thank you! while testing i've noticed that there is one related detail i forgot. up to you if it should be fixed within this issue or shall we open a new one? if you take a look at the cancel button the target size is too small. the icon itself has 20px by 20 px in the css. for SC2.5.8 the minimum is at 24x24 pixels. for 2.5.5.(AAA) it would require at least 44x44 pixels.

a tour tip modal showing the touch targets and highlighting that the cancel icon has a too small touch target.

  • smustgrave committed 5a4426b4 on 2.0.x
    Issue #3469283: Elements within tip dialog modals only use browser focus...
smustgrave’s picture

Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

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