Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Increase underline to match other focussed elements #2820

Conversation

adi-unni
Copy link
Contributor

@adi-unni adi-unni commented Sep 28, 2023

What is the context of this PR?

Fixes: #1668

Skip link previously had a thin underline when focussed. As the components primary use case is for keyboard users, the route of navigation is through the tab index. When hitting tab, the element gets set from a non visible state, straight to focussed which is the last before an action. As with the rest of the components, the underline should be the thickest when focussed. The change increases the underline thickness to match with the rest of the components' focussed states.

How to review this PR

Press tab to bring up the component and check if the new skip-to-content component has a thicker underline.

Checklist

This needs to be completed by the person raising the PR.

  • I have selected the correct Project for this PR (Design System) and selected the correct status
  • I have selected the correct Assignee
  • I have linked the correct Issue

@adi-unni adi-unni added the Enhancement Change of existing feature label Sep 28, 2023
@adi-unni adi-unni self-assigned this Sep 28, 2023
@adi-unni adi-unni linked an issue Sep 28, 2023 that may be closed by this pull request
@netlify
Copy link

netlify bot commented Sep 28, 2023

Deploy Preview for ons-design-system-preview ready!

Name Link
🔨 Latest commit fe56e7b
🔍 Latest deploy log https://app.netlify.com/sites/ons-design-system-preview/deploys/651ea5d6df82c50008c5a905
😎 Deploy Preview https://deploy-preview-2820--ons-design-system-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@adi-unni adi-unni marked this pull request as ready for review September 28, 2023 10:32
@adi-unni adi-unni force-pushed the enhancement/1668/skip-link-hover-state-underline-should-be-thicker branch from 68bebf5 to fe56e7b Compare October 5, 2023 12:02
@adi-unni adi-unni merged commit 94ac5fb into main Oct 5, 2023
8 checks passed
@adi-unni adi-unni deleted the enhancement/1668/skip-link-hover-state-underline-should-be-thicker branch October 5, 2023 15:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Enhancement Change of existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Skip link hover state underline should be thicker
3 participants