Skip to content

Commit

Permalink
Merge pull request #2036 from cfpb/ans_tag_focus
Browse files Browse the repository at this point in the history
Adjust tags outline and coloring
  • Loading branch information
anselmbradford authored Sep 5, 2024
2 parents b827eb7 + 843ced7 commit 351f423
Show file tree
Hide file tree
Showing 18 changed files with 52 additions and 26 deletions.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Large diffs are not rendered by default.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/cfpb-design-system/dist/index.css

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions packages/cfpb-design-system/dist/index.css.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/cfpb-design-system/dist/index.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/cfpb-design-system/dist/utilities/index.css

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions packages/cfpb-design-system/dist/utilities/index.css.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/cfpb-design-system/dist/utilities/index.js.map

Large diffs are not rendered by default.

14 changes: 10 additions & 4 deletions packages/cfpb-design-system/src/components/cfpb-forms/tag.scss
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,14 @@ a.a-tag-filter {
$jump-link-text-class: 'a-tag-topic__text'
);
}

@include u-jump-link-group($jump-link-class: 'a-tag-topic');

.a-tag-topic__bullet {
font-size: 1rem;
line-height: 1rem;
}

// Tablet and above.
@include respond-to-min($bp-sm-min) {
.a-tag-topic__text {
// Colors for :link, :visited, :hover, :focus, :active
Expand All @@ -85,9 +85,7 @@ a.a-tag-filter {
.a-tag-topic:focus,
.a-tag-topic:active {
border-bottom: none;

// Normally we offset the focus 2px, but we need 3px here for the underline.
outline-offset: 3px;
outline-offset: 1px;

.a-tag-topic__text {
// Move the underline down 1px.
Expand All @@ -99,6 +97,14 @@ a.a-tag-filter {
.a-tag-topic:hover .a-tag-topic__text {
border-bottom: 1px solid var(--gold-80);
}

.a-tag-topic:focus {
outline-color: var(--gray);

.a-tag-topic__text {
border-bottom-style: solid !important;
}
}
}

// Tag group sets the spacing between tags.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@

// Mobile only.
@include respond-to-max($bp-xs-max) {
position: relative;
display: flex;
align-items: center;
gap: math.div(5px, $base-font-size-px) + rem;
Expand All @@ -41,6 +42,24 @@
// 100% width is needed when block or jump link are applied to a <button>.
width: 100%;

// We create a faux focus rectangle in the ::after pseudoelement to better
// control the positioning of the focus rectangle, which would overwise
// overlap the top border of the jumplink when it appears in a group.
&:focus {
outline: none;

&::after {
position: absolute;
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
outline: 1px dotted var(--gray);
outline-offset: 2px;
}
}

// Only right-hand align arrow icons.
.cf-icon-svg--right {
margin-left: auto;
Expand All @@ -66,7 +85,8 @@
border-top: none;
}

.#{$jump-link-class}:hover::before {
.#{$jump-link-class}:hover::before,
.#{$jump-link-class}:focus::before {
position: absolute;
top: -1px;
content: '';
Expand Down

0 comments on commit 351f423

Please sign in to comment.