darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-07 03:43:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix focus bug in Safari

Browse Source 
Most browsers apply the focus style when a link is
clicked but Safari just applies the active style.
This meant our large links, with expanded click
areas, didn't get the focus style themselves but
their psuedo-elements (which create the expanded
click area) did.

This adds the focus styles to the active state of
links with the expanded click area, to ensure all
of their click area gets the focus style.
This commit is contained in:
Tom Byers
2022-01-27 14:56:15 +00:00
parent 5ad8f41123
commit 10ab1dfe72
1 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/assets/stylesheets/components/message.scss
View File

@@ -108,17 +108,22 @@ a {
}
}
&:active,
&:focus {
&:focus,
&:active {
&,
&::before {
background-color: $govuk-focus-colour;
box-shadow: 0px -2px $govuk-focus-colour, 0px 4px $govuk-focus-text-colour;
}
&,
& + .template-list-item-hint,
.message-type {
color: $govuk-text-colour;
color: $govuk-focus-text-colour;
}
&::before {
box-shadow: 0px -2px $govuk-focus-colour, 0px 4px $govuk-focus-text-colour;
}
}
@@ -177,7 +182,8 @@ a {
background-image: file-url('folder-blue-bold-hover.svg');
}
&:focus {
&:focus,
&:active {
background-image: file-url('folder-black-bold.svg');
}