Skip to content
This repository has been archived by the owner on Nov 18, 2021. It is now read-only.

Fix external links focus outline not showing #142

Merged
merged 1 commit into from Jun 12, 2020

Conversation

NickColley
Copy link
Contributor

Make sure that when a user tabs to the link in the footer they know where they are by showing a focus outline.

Before After
focused link in footer no visible focus outline focused link in footer with visible focus outline

https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

The external link contains an override to the overflow. So needs to be after the regular matrix mixin.

Jira: CPP-115

DAC ID: DAC_Missing_Visible_Focus_Indicator_Issue1

Make sure that when a user tabs to the link in the footer they know where they are by showing a focus outline.

https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

The external link contains an override to the overflow. So needs to be after the regular matrix mixin.

Jira: CPP-115

DAC ID: DAC_Missing_Visible_Focus_Indicator_Issue1
@NickColley NickColley requested a review from a team as a code owner June 12, 2020 12:57
@github-actions github-actions bot added the component Relates to an Origami component label Jun 12, 2020
@origamiserviceuser origamiserviceuser added this to incoming in Origami ✨ Jun 12, 2020
@NickColley
Copy link
Contributor Author

I think there could be some improvements to the footer BEM here, since maybe they shouldnt be sharing styles in the first place but hopefully this reflects reverting to a previous behaviour...

.o-footer__external-link {
position: relative;
border-top: 1px solid;
border-bottom: 1px solid;
// Ensure focus outline is visible.
overflow: visible;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This overflow: visible property was not applied since when styles were refactored into mixins they were re-ordered giving the .o-footer__external-link class a lower specificity

@JakeChampion JakeChampion added the release:patch Add to a PR to trigger a PATCH version bump when merged label Jun 12, 2020
@JakeChampion JakeChampion merged commit 934f9fb into master Jun 12, 2020
Origami ✨ automation moved this from incoming to complete Jun 12, 2020
@JakeChampion JakeChampion deleted the fix-visible-outline-for-link branch June 12, 2020 14:01
@JakeChampion
Copy link
Contributor

🙌 Thank you again @NickColley 🎉

@origamiserviceuser
Copy link

🎉 This PR is included in version v7.0.10 🎉

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
component Relates to an Origami component release:patch Add to a PR to trigger a PATCH version bump when merged
Projects
Origami ✨
  
Done
Development

Successfully merging this pull request may close these issues.

None yet

3 participants