-
Notifications
You must be signed in to change notification settings - Fork 6
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
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this the right color? To be consistent with the others?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
may also want to try outline-offset: units(0.5);
to be consistent with other buttons
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah this is the right color, I copied the exact styling that is already there for the original hover for the other buttons
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
seems odd to need to force tabindex
here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 |
Resolved with #519 |
Fix Accessibility highlights when tabbing through home and fellow page
Fixes #133