Tabbing highlights #177
Tabbing highlights #177
Conversation
| @@ -116,6 +116,12 @@ | |||
| outline-color: color("primary-vivid"); | |||
| outline-width: 8px; | |||
| } | |||
| &:focus-visible { | |||
There was a problem hiding this comment.
Not exactly sure what's causing it, but there seems to be an extra tab action (two per box) that is weird.
There was a problem hiding this comment.
i'll look into this
| &:focus-visible { | ||
| @include u-bg("transparent"); | ||
| outline-style: solid; | ||
| outline-color: color("primary-vivid"); |
There was a problem hiding this comment.
Is this the right color? To be consistent with the others?
There was a problem hiding this comment.
may also want to try outline-offset: units(0.5); to be consistent with other buttons
There was a problem hiding this comment.
there's probably some variable settings you can use here:
$theme-focus-color: "blue-40v" !default;
$theme-focus-offset: 0 !default;
$theme-focus-style: solid !default;
$theme-focus-width: 0.5 !default;
Ref: default settings
There was a problem hiding this comment.
Yeah this is the right color, I copied the exact styling that is already there for the original hover for the other buttons
| @@ -110,7 +110,7 @@ <h3 class="twoline">Mentorship and <br class="display-none tablet:display-inline | |||
|
|
|||
| <!-- impact --> | |||
| <div class="grid-row"> | |||
| <div class="grid-col box-pane-button home-opportunity"> | |||
| <div class="grid-col box-pane-button home-opportunity" tabindex="0"> | |||
There was a problem hiding this comment.
seems odd to need to force tabindex here
There was a problem hiding this comment.
for divs you need to add tabindex in order for focus to work because by default, it is for elements such as , < button>, or anything that is usually interactive with the user.
There was a problem hiding this comment.
yah, I think I remember struggling with this as it's not a standard HTML element. we do have the a element under it, but I don't think that's what receives the focus here.
<a class="usa-button" href="{{site.baseurl}}/opportunity/">There was a problem hiding this comment.
I think you can use tab index=“-1” on the a to skip the tab stop, but should add an aria-labelledby on the parent div, with reference back to the a child element, to keep a proper accessibility schema. Something to try.
There was a problem hiding this comment.
So this does fix the double tabbing however the div isn't redirecting to the other page because it is not the link element.
|
This one is weird. You might be able to get some help at this |
Fix Accessibility highlights when tabbing through home and fellow page
Fixes #133