[#48802] - [6.2] Atum: improve contrast of Guided Tours cancel icon (#48404)
- Pending
- Medium
- Build: 6.2-dev
- # 48802
- Diff
- Nikhil-sinhaa:fix/48404-tour-cancel
User tests: Successful: Unsuccessful:
Pull Request for Issue #48404 (part 1 of 3: Guided Tours cancel icon). Split from #48795 , one PR per icon.
- I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.
Summary of Changes
The "Cancel ×" icon in Guided Tours was below the WCAG 2.2 SC 1.4.11 (Non-text Contrast) minimum of 3:1 in light mode. SCSS only (blocks/_shepard-modals.scss), no PHP/JS changes.
- Light mode: the icon used Shepherd's default
rgba(128,128,128,.75)on the#e6e6e6header. It now uses the Atum tokenvar(--gray-600), andvar(--body-color)on hover and keyboard focus. - Dark mode already uses the template link colour (6.57:1) and is unchanged.
- The browser focus ring is kept.
Measured contrast (after alpha compositing, against the header background):
| State | Before | After |
|---|---|---|
| Light, default | 2.27:1 | 4.15:1 |
| Light, hover | ~9.2:1 | 12.36:1 |
| Light, keyboard focus | 2.27:1 + ring | 12.36:1 + ring |
| Dark, default | 6.57:1 | 6.57:1 (unchanged) |
| Dark, hover | 8.15:1 | 8.15:1 (unchanged) |
Notes:
- Joomla tour steps always have a title, so the rule targets
.shepherd-has-title .shepherd-content .shepherd-cancel-icon, the same selector as the existing dark-mode rule. - The category remove × and the MFA default star from the same issue are fixed in separate PRs.
Testing Instructions
Apply the PR and run npm ci && npm run build so the Atum CSS is rebuilt. Use Atum in light mode, then repeat in dark mode.
- Click Take a Tour in the header and start any tour (for example "Welcome to Joomla!").
- Inspect the "Cancel ×" icon in the tour header: default (pointer away, no focus), hover, and keyboard focus (Tab to it).
- Measure the icon colour against the header background with any contrast checker.
- Also try a narrow viewport (about 640px wide, equivalent to 200% zoom).
Actual result BEFORE applying this Pull Request
In light mode the icon is rgba(128,128,128,.75) on #e6e6e6, about 2.27:1, and looks faint.
Light, default:
Light, hover:
Light, keyboard focus:
Dark, default:
Light, 640px (200% zoom equivalent):
Expected result AFTER applying this Pull Request
In light mode the icon is var(--gray-600) (rgb(102,110,118)), about 4.15:1, and var(--body-color) on hover and keyboard focus. The focus ring is kept. Dark mode is unchanged. Checked in Firefox (computed and rendered values).
Light, default:
Light, hover:
Light, keyboard focus:
Dark, default:
Light, 640px (200% zoom equivalent):
Link to documentations
Please select:
-
Documentation link for guide.joomla.org:
-
No documentation changes for guide.joomla.org needed
-
Pull Request link for manual.joomla.org:
-
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | NPM Change |
I have tested this item ✅ successfully on 2be2e7b
I have successfully tested this. Thanks @Nikhil-sinhaa! for the fix.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48802.
the background color of the header is #e6e6e6
the new color of the Cancel text and icon is #666e76
| Labels |
Added:
a11y
NPM Resource Changed
PR-6.2-dev
|
||
Do you think there is enough visual difference between regular and :hover
Thanks @brianteeman, you're right. I only checked the icon against 3:1 (SC 1.4.11), but the "Cancel" label is 16px text, so it needs 4.5:1 (SC 1.4.3). #666e76 on #e6e6e6 is 4.15:1, so the label failed.
I've changed it to var(--gray-700) (#495057), which is 6.55:1 for both the label and the icon. Hover and keyboard focus (--body-color, 12.36:1), the focus ring, and dark mode (6.57:1) are unchanged.
Previous commit (#666e76, 4.15:1) |
After (#495057, 6.55:1) |
After, keyboard focus |
|---|---|---|
 |
 |
 |
@exlemor could you please retest? The colour changed after your test.
@brianteeman Good point. With the darker default, regular (#495057) and hover (#212529) are only 1.89:1 apart, so the colour change alone is too subtle.
I'll add an underline to the "Cancel" label on hover and keyboard focus, so the state change doesn't rely on colour alone. It will apply in both light and dark mode, and the focus ring stays. I'll push it shortly.
That sounds a good idea.
Now you see the benefit of individual pr
Thanks @brianteeman, agreed. Splitting it made this much easier to review and fix
@brianteeman Pushed in d22aa29: "Cancel" is now underlined on hover and keyboard focus, in both light and dark mode. The focus ring is kept.
| Regular | Hover | Keyboard focus | |
|---|---|---|---|
| Light |  |
 |
 |
| Dark |  |
 |
 |
@exlemor could you please retest when you have time? There are two changes since your test: the darker default colour and the hover/focus underline.
I have tested this item ✅ successfully on d22aa29
Hello @Nikhil-sinhaa, I have re-tested this and found it to be improved/successful. Thank you for your continued work.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48802.
I have tested this item ✅ successfully on d22aa29
Hello @Nikhil-sinhaa, I have re-tested this and found it to be improved/successful. Thank you for your continued work.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48802.
I have tested this item ✅ successfully on 2be2e7b
I have successfully tested this. Thanks @Nikhil-sinhaa! for the fix.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48802.