From d1e9e047ebffefd2d761d802849450812b578506 Mon Sep 17 00:00:00 2001 From: Robin Garrison Date: Fri, 22 Nov 2024 09:11:02 -0600 Subject: [PATCH 1/2] Add focus style --- .../css-library/dist/stylesheets/core.css | 7 +- .../formation-overrides/core/base.css | 3 +- packages/storybook/.storybook/style.scss | 2 + .../stories/va-radio-uswds.stories.jsx | 1 + .../va-additional-info/va-additional-info.css | 1 + .../src/components/va-alert/va-alert-slot.css | 1 + .../src/components/va-alert/va-alert.scss | 3 +- .../va-back-to-top/va-back-to-top.css | 6 +- .../va-breadcrumbs/va-breadcrumbs-slot.css | 6 +- .../va-button-pair/va-button-pair.scss | 1 + .../components/va-checkbox/va-checkbox.scss | 3 +- .../va-header-minimal/va-header-minimal.scss | 4 +- .../va-link-action/va-link-action.css | 12 +- .../src/components/va-link/va-link.scss | 22 ++-- .../va-maintenance-banner.scss | 1 + .../va-notification/va-notification.scss | 16 +-- .../va-official-gov-banner.scss | 4 +- .../va-official-gov-banner.tsx | 5 +- .../va-progress-bar/va-progress-bar.css | 1 + .../va-promo-banner/va-promo-banner.tsx | 1 + .../va-radio-option/va-radio-option.scss | 3 +- .../va-table-inner/va-table-inner.scss | 7 +- .../web-components/src/mixins/focusable.css | 104 +++++++++++++++++- 23 files changed, 172 insertions(+), 42 deletions(-) diff --git a/packages/css-library/dist/stylesheets/core.css b/packages/css-library/dist/stylesheets/core.css index d5a6c1268f..61dcbb13e6 100644 --- a/packages/css-library/dist/stylesheets/core.css +++ b/packages/css-library/dist/stylesheets/core.css @@ -128,7 +128,7 @@ unclassed elements: ---------------------------------------- Broswer compatibility mode ---------------------------------------- -When true, outputs woff and ttf font +When true, outputs woff and ttf font formats in addition to woff2 ---------------------------------------- */ @@ -1877,7 +1877,7 @@ body { display: none !important; /* stylelint-disable-line declaration-no-important */ } -input:not([disabled]):focus, +/* input:not([disabled]):focus, select:not([disabled]):focus, textarea:not([disabled]):focus, button:not([disabled]):focus { @@ -1897,6 +1897,7 @@ iframe:focus, outline: 2px dotted #aeb0b5; outline-offset: 3px; } +*/ /** Variables ported over from Formation so that we can keep those stylesheets @@ -4435,7 +4436,7 @@ unclassed elements: ---------------------------------------- Broswer compatibility mode ---------------------------------------- -When true, outputs woff and ttf font +When true, outputs woff and ttf font formats in addition to woff2 ---------------------------------------- */ diff --git a/packages/css-library/dist/stylesheets/formation-overrides/core/base.css b/packages/css-library/dist/stylesheets/formation-overrides/core/base.css index e67e7d00ec..120414b0df 100644 --- a/packages/css-library/dist/stylesheets/formation-overrides/core/base.css +++ b/packages/css-library/dist/stylesheets/formation-overrides/core/base.css @@ -40,7 +40,7 @@ body { display: none !important; /* stylelint-disable-line declaration-no-important */ } -input:not([disabled]):focus, +/* input:not([disabled]):focus, select:not([disabled]):focus, textarea:not([disabled]):focus, button:not([disabled]):focus { @@ -60,5 +60,6 @@ iframe:focus, outline: 2px dotted #aeb0b5; outline-offset: 3px; } +*/ /*# sourceMappingURL=base.css.map */ diff --git a/packages/storybook/.storybook/style.scss b/packages/storybook/.storybook/style.scss index 8f5fa2b064..675917c580 100644 --- a/packages/storybook/.storybook/style.scss +++ b/packages/storybook/.storybook/style.scss @@ -7,6 +7,8 @@ $formation-asset-path: '~@department-of-veterans-affairs/formation/assets'; @import '@department-of-veterans-affairs/formation/sass/base/_b-breakpoints.scss'; @import '@department-of-veterans-affairs/formation/sass/site/_m-crisis-line.scss'; +@import '../../web-components/src/mixins/focusable.css'; + // Remove Negative Margin via Default Storybook CSS // This is causing the show code button to overlap with components // Height Auto fixes Firefox Bug with height being set to a fixed 70px value diff --git a/packages/storybook/stories/va-radio-uswds.stories.jsx b/packages/storybook/stories/va-radio-uswds.stories.jsx index bc943990fb..e938a89583 100644 --- a/packages/storybook/stories/va-radio-uswds.stories.jsx +++ b/packages/storybook/stories/va-radio-uswds.stories.jsx @@ -432,6 +432,7 @@ const defaultArgs = { export const Default = Template.bind(null); Default.args = { + name: 'group0', ...defaultArgs, }; Default.argTypes = propStructure(radioDocs); diff --git a/packages/web-components/src/components/va-additional-info/va-additional-info.css b/packages/web-components/src/components/va-additional-info/va-additional-info.css index 9e26961af3..e7f693a2f2 100644 --- a/packages/web-components/src/components/va-additional-info/va-additional-info.css +++ b/packages/web-components/src/components/va-additional-info/va-additional-info.css @@ -1,5 +1,6 @@ @import "~@department-of-veterans-affairs/css-library/dist/stylesheets/uswds-typography.css"; @import '../../mixins/links.css'; +@import '../../mixins/focusable.css'; :host { display: block; diff --git a/packages/web-components/src/components/va-alert/va-alert-slot.css b/packages/web-components/src/components/va-alert/va-alert-slot.css index 374afe4212..db49f8abcc 100644 --- a/packages/web-components/src/components/va-alert/va-alert-slot.css +++ b/packages/web-components/src/components/va-alert/va-alert-slot.css @@ -1,3 +1,4 @@ +@import '../../mixins/focusable.css'; /* .usa-alert__heading */ :is(va-alert) > :is(h1, h2, h3, h4, h5, h6) { diff --git a/packages/web-components/src/components/va-alert/va-alert.scss b/packages/web-components/src/components/va-alert/va-alert.scss index 57facd0254..a765d2ffef 100644 --- a/packages/web-components/src/components/va-alert/va-alert.scss +++ b/packages/web-components/src/components/va-alert/va-alert.scss @@ -2,6 +2,7 @@ @use 'usa-alert/src/styles/usa-alert'; @import "~@department-of-veterans-affairs/css-library/dist/stylesheets/uswds-typography.css"; +@import '../../mixins/focusable.css'; :host { display: block; @@ -13,7 +14,7 @@ font-size: 21.28px; /* 1.33rem */ margin-top: 0; margin-bottom: 8px; /* 0.5rem */ - font-family: var(--font-serif); + font-family: var(--font-serif); } .va-alert-close:hover { diff --git a/packages/web-components/src/components/va-back-to-top/va-back-to-top.css b/packages/web-components/src/components/va-back-to-top/va-back-to-top.css index 9230f304e0..e3e1a88ecc 100644 --- a/packages/web-components/src/components/va-back-to-top/va-back-to-top.css +++ b/packages/web-components/src/components/va-back-to-top/va-back-to-top.css @@ -46,11 +46,11 @@ a { position: absolute; transition: background-color 0.25s ease-in; } -a:not([disabled]):active, a:not([disabled]):focus { +/* a:not([disabled]):active, a:not([disabled]):focus { border-radius: 5px; outline: 2px solid var(--vads-color-action-focus-on-light); outline-offset: 2px; -} +} */ a:not([disabled]):hover { border-radius: 5px; background-color: var(--vads-color-gray-cool-light); @@ -60,7 +60,7 @@ a:not([disabled]):hover { div a { display: none; } - + div.reveal a { display: inherit; border-bottom-left-radius: 5px; diff --git a/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs-slot.css b/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs-slot.css index 355b050edf..56c1599520 100644 --- a/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs-slot.css +++ b/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs-slot.css @@ -1,3 +1,5 @@ +@import '../../mixins/focusable.css'; + va-breadcrumbs .va-breadcrumbs-li { display: inline-block; line-height: 1.5; @@ -53,10 +55,10 @@ va-breadcrumbs li > a:hover { } -va-breadcrumbs li > a:focus { +/* va-breadcrumbs li > a:focus { outline: 2px solid var(--vads-color-action-focus-on-light); outline-offset: 2px; -} +} */ va-breadcrumbs li > a[aria-current='page'] { color: var(--vads-color-base-darker); diff --git a/packages/web-components/src/components/va-button-pair/va-button-pair.scss b/packages/web-components/src/components/va-button-pair/va-button-pair.scss index 4c78cfac59..7cc5b8d79d 100644 --- a/packages/web-components/src/components/va-button-pair/va-button-pair.scss +++ b/packages/web-components/src/components/va-button-pair/va-button-pair.scss @@ -1,6 +1,7 @@ @forward 'settings'; @use 'usa-button-group/src/styles/usa-button-group'; +@import '../../mixins/focusable.css'; :host { display: flex; diff --git a/packages/web-components/src/components/va-checkbox/va-checkbox.scss b/packages/web-components/src/components/va-checkbox/va-checkbox.scss index cc02df2500..ceb816e70b 100644 --- a/packages/web-components/src/components/va-checkbox/va-checkbox.scss +++ b/packages/web-components/src/components/va-checkbox/va-checkbox.scss @@ -9,6 +9,7 @@ @use 'usa-error-message/src/styles/usa-error-message'; @import '../../mixins/uswds-error-border.scss'; +@import '../../mixins/focusable.css'; :host { display: block; @@ -20,6 +21,6 @@ } .usa-checkbox__input:focus + [class*='__label']::before { - outline: 2px solid var(--vads-color-action-focus-on-light); + // outline: 2px solid var(--vads-color-action-focus-on-light); outline-offset: 4px; } \ No newline at end of file diff --git a/packages/web-components/src/components/va-header-minimal/va-header-minimal.scss b/packages/web-components/src/components/va-header-minimal/va-header-minimal.scss index eb260ccb8c..be8f4deb26 100644 --- a/packages/web-components/src/components/va-header-minimal/va-header-minimal.scss +++ b/packages/web-components/src/components/va-header-minimal/va-header-minimal.scss @@ -1,3 +1,5 @@ +@import '../../mixins/focusable.css'; + .va-header { display: flex; margin-left: auto; @@ -15,7 +17,7 @@ } .va-logo-link:focus { - outline: 2px solid var(--vads-color-action-focus-on-light); + // outline: 2px solid var(--vads-color-action-focus-on-light); } .va-logo { diff --git a/packages/web-components/src/components/va-link-action/va-link-action.css b/packages/web-components/src/components/va-link-action/va-link-action.css index c486dd415a..a9ceb9f8ed 100644 --- a/packages/web-components/src/components/va-link-action/va-link-action.css +++ b/packages/web-components/src/components/va-link-action/va-link-action.css @@ -1,5 +1,6 @@ @import '../../mixins/links.css'; @import '../../mixins/accessibility.css'; +@import '../../mixins/focusable.css'; :host { display: inline-flex; @@ -13,10 +14,10 @@ font-weight: 700; font-size: 1.06rem; padding: 0.5rem 0; - &:active { + /* &:active { outline: 2px solid var(--vads-color-action-focus-on-light); outline-offset: 2px; - } + } */ } :host a.va-link--primary, @@ -29,7 +30,7 @@ :host a.va-link--reverse { color: var(--vads-color-white); - &:hover, &:active { + &:hover, &:active, &:focus { color: var(--vads-color-action-focus-on-light); background-color: transparent; } @@ -75,8 +76,9 @@ color: var(--vads-color-black); } -:host a.va-link--reverse:hover va-icon, -:host a.va-link--reverse:active va-icon { +:host a.va-link--reverse:not(:focus):hover va-icon, +:host a.va-link--reverse:not(:focus):active va-icon { + color: var(--uswds-system-color-gray-90); background-color: var(--vads-color-action-focus-on-light) !important; } diff --git a/packages/web-components/src/components/va-link/va-link.scss b/packages/web-components/src/components/va-link/va-link.scss index a042f4482d..6d9eaf3ec0 100644 --- a/packages/web-components/src/components/va-link/va-link.scss +++ b/packages/web-components/src/components/va-link/va-link.scss @@ -1,32 +1,40 @@ @use 'uswds-helpers/src/styles/usa-sr-only'; @import '~@department-of-veterans-affairs/css-library/dist/stylesheets/uswds-typography.css'; @import '../../mixins/links.css'; +@import '../../mixins/focusable.css'; :host { display: inline; } // override formation [href]:focus style that added an outline to the host resulting in a double outline for the link -:host([href]:focus) { - outline: none !important; -} +// :host([href]:focus) { +// outline: none !important; +// } :host a { cursor: pointer; text-decoration: underline; font: inherit; + + &:focus, + &:active { + color: var(--vads-color-gray-90) !important; + } } :host a.va-link--reverse, :host a.va-link--reverse .link-icon--back { color: var(--vads-color-white); - &:hover, - &:active, + &:not(:focus):hover, + &:not(:focus):active, &:hover .link-icon--back, &:active .link-icon--back { - color: var(--vads-color-action-focus-on-light); - background-color: transparent; + color: var(--vads-color-gray-90); + background-color: var(--uswds-system-color-gray-20); + // color: var(--vads-color-action-focus-on-light); + // background-color: transparent; } } diff --git a/packages/web-components/src/components/va-maintenance-banner/va-maintenance-banner.scss b/packages/web-components/src/components/va-maintenance-banner/va-maintenance-banner.scss index 192ddac666..dedd82b19c 100644 --- a/packages/web-components/src/components/va-maintenance-banner/va-maintenance-banner.scss +++ b/packages/web-components/src/components/va-maintenance-banner/va-maintenance-banner.scss @@ -1,5 +1,6 @@ @import "~@department-of-veterans-affairs/css-library/dist/stylesheets/uswds-typography.css"; @import '../../mixins/buttons.css'; +@import '../../mixins/focusable.css'; .maintenance-banner { border-top: 8px solid; diff --git a/packages/web-components/src/components/va-notification/va-notification.scss b/packages/web-components/src/components/va-notification/va-notification.scss index 8da70fd514..260872dab9 100644 --- a/packages/web-components/src/components/va-notification/va-notification.scss +++ b/packages/web-components/src/components/va-notification/va-notification.scss @@ -1,3 +1,5 @@ +@import '../../mixins/focusable.css'; + :host { display: block; position: relative; @@ -30,7 +32,7 @@ va-link { i.fa-times-circle::before { content: '\F057'; /* fa-times-circle*/ font-size: 20px; -} +} i.action-required::before { content: '\F06A'; /* fa-exclamation-circle */ @@ -103,12 +105,12 @@ p { background-color: transparent; } -.va-notification-close:active, .va-notification-close:focus { - color: var(--vads-color-base); - background-color: transparent; - outline: 2px solid var(--vads-color-action-focus-on-light); - outline-offset: 2px; -} +// .va-notification-close:active, .va-notification-close:focus { +// color: var(--vads-color-base); +// background-color: transparent; +// outline: 2px solid var(--vads-color-action-focus-on-light); +// outline-offset: 2px; +// } .va-notification-close > i { margin-right: 8px; diff --git a/packages/web-components/src/components/va-official-gov-banner/va-official-gov-banner.scss b/packages/web-components/src/components/va-official-gov-banner/va-official-gov-banner.scss index 4838dc1194..f5791ee359 100644 --- a/packages/web-components/src/components/va-official-gov-banner/va-official-gov-banner.scss +++ b/packages/web-components/src/components/va-official-gov-banner/va-official-gov-banner.scss @@ -1,4 +1,5 @@ @import "~@department-of-veterans-affairs/css-library/dist/stylesheets/uswds-typography.css"; +@import '../../mixins/focusable.css'; :host { display: block; @@ -116,7 +117,8 @@ } button:not([disabled]):focus { - outline: 2px solid var(--vads-color-action-focus-on-light); + // outline: 2px solid var(--vads-color-action-focus-on-light); + background-color: transparent; } button[aria-expanded=false], button[aria-expanded=true] { diff --git a/packages/web-components/src/components/va-official-gov-banner/va-official-gov-banner.tsx b/packages/web-components/src/components/va-official-gov-banner/va-official-gov-banner.tsx index 6d4807d23f..1b4f183624 100644 --- a/packages/web-components/src/components/va-official-gov-banner/va-official-gov-banner.tsx +++ b/packages/web-components/src/components/va-official-gov-banner/va-official-gov-banner.tsx @@ -141,8 +141,8 @@ export class VaOfficialGovBanner { if (tld === 'gov' || tld === 'mil') { return ( -