Skip to content

fix: add box shadow instead of outline for all focusable elements and some spacing to the elements#552

Merged
samcunliffe merged 2 commits intoUCL-ARC:mainfrom
cuteshaun:cuteshaun/all-keyboard-indicators-stay-in-view
Jun 17, 2025
Merged

fix: add box shadow instead of outline for all focusable elements and some spacing to the elements#552
samcunliffe merged 2 commits intoUCL-ARC:mainfrom
cuteshaun:cuteshaun/all-keyboard-indicators-stay-in-view

Conversation

@cuteshaun
Copy link
Copy Markdown
Contributor

This PR improves focus visibility

Issues

  • The search and source repository buttons lacked visible focus indicators.
  • The theme toggle button had a low-contrast focus style in dark mode.
  • Default outline styles used system/WebKit colors, resulting in inconsistent rendering across browsers.
  • Some focus outlines were obscured due to insufficient spacing around elements.

Changes

  • Replaced default outline with custom box-shadow styles, using accessible colors for both light and dark themes.
  • Removed the default hover outline effect on the theme toggle button to improve visual consistency.
  • Added padding/margin adjustments to ensure focus indicators remain visible.
  • Verified styles work across Chrome/Firefox.
screen-recording-2025-06-16-at-134028_DuMjmcNW.mp4

Closes #536, #534

Copy link
Copy Markdown
Member

@samcunliffe samcunliffe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Another great fix! Thanks so much!!

box-shadow: 0 0 0 3px var(--outline-color);
border-radius: 2px;
transition: box-shadow 0.2s ease;
}
Copy link
Copy Markdown
Member

@samcunliffe samcunliffe Jun 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirmed fix of

For example:
Screenshot 2025-06-17 at 09 40 35Screenshot 2025-06-17 at 09 40 40

C.f. James' original comment and screenshots in #534. (Also apparent in the video!)

@samcunliffe samcunliffe requested a review from paddyroddy June 17, 2025 08:44
@samcunliffe samcunliffe added enhancement New feature or request website Related to https://github-pages.arc.ucl.ac.uk/python-tooling accessibility Something relating to the ease of accessibility (alt-text, colour choices, language, etc) labels Jun 17, 2025
@samcunliffe samcunliffe linked an issue Jun 17, 2025 that may be closed by this pull request
Copy link
Copy Markdown
Member

@paddyroddy paddyroddy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A master of your craft

$blue-400: #4da6ff;
$green-700: #00755c;
$red-600: #d13c3c;
$purple-500: rgba(215, 186, 255, 0.65);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of interest why rgba here rather than a HEX?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure. I used rgba because it’s easier to adjust the opacity by changing the last argument. There’s also the option to use hex with alpha, like #d13c3c65, where the last two control opacity. However, I’m not sure about browser support for that, and I’ve just got used to using rgba in these cases)

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the explanation!

Comment thread docs/_sass/custom/custom.scss Outdated
}
}

//Outline styles
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would tend to put a space here

Suggested change
//Outline styles
// Outline styles

@samcunliffe samcunliffe merged commit 0360b94 into UCL-ARC:main Jun 17, 2025
16 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility Something relating to the ease of accessibility (alt-text, colour choices, language, etc) enhancement New feature or request website Related to https://github-pages.arc.ucl.ac.uk/python-tooling

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Ensure all keyboard focus indicators stay in view and are well-contrasted in both colour modes Make website more accessible

3 participants