From a6ed4952dc25383c706a3fe2b823e3cbc63b485b Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Fri, 10 Nov 2023 09:26:05 -0500 Subject: [PATCH 1/9] fix(infieldbutton): no outline on focus-visible --- components/infieldbutton/index.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index aebc2d4c4ae..b816c1c888c 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -310,6 +310,8 @@ governing permissions and limitations under the License. } &:focus-visible { + outline: none; + .spectrum-InfieldButton-fill { background-color: var( --mod-infield-button-background-color-key-focus, From d3a131a3940c20981ab0a165ecec6a097d8143c3 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Fri, 10 Nov 2023 09:47:56 -0500 Subject: [PATCH 2/9] fix(infieldbutton): high contrast mode has a focus outline --- components/infieldbutton/index.css | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index b816c1c888c..156bca542c7 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -176,6 +176,14 @@ governing permissions and limitations under the License. ); } } + + &:hover:not(:disabled), + &:active:not(:disabled), + &:focus-visible:not(:disabled) { + @media (forced-colors: active) { + --highcontrast-infield-button-border-color: Highlight; + } + } } .spectrum-InfieldButton { @@ -216,8 +224,9 @@ governing permissions and limitations under the License. ); border-style: solid; border-color: var( - --mod-infield-button-border-color, - var(--spectrum-infield-button-border-color) + --highcontrast-infield-button-border-color, + var(--mod-infield-button-border-color, + var(--spectrum-infield-button-border-color)) ); border-end-end-radius: var( --mod-infield-button-border-radius, @@ -408,8 +417,6 @@ governing permissions and limitations under the License. } } - - .spectrum-InfieldButton-icon { display: initial; From e4082720627e9d3eb9045e19371c2dcada911427 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Tue, 14 Nov 2023 11:52:12 -0500 Subject: [PATCH 3/9] fix(stepper): no longer touches InfieldButton classes --- components/stepper/index.css | 1 - components/stepper/metadata/mods.md | 1 - 2 files changed, 2 deletions(-) diff --git a/components/stepper/index.css b/components/stepper/index.css index 93eedf16b3c..4b7a9614b5f 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -227,7 +227,6 @@ governing permissions and limitations under the License. .spectrum-Stepper-button { --mod-infield-button-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - --mod-infield-button-stacked-bottom-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); --mod-infield-button-stacked-bottom-border-radius-end-end: 0; --mod-infield-button-stacked-bottom-border-radius-end-start: 0; --mod-infield-button-fill-justify-content: flex-end; diff --git a/components/stepper/metadata/mods.md b/components/stepper/metadata/mods.md index aa81c18f4f0..daa54e86e02 100644 --- a/components/stepper/metadata/mods.md +++ b/components/stepper/metadata/mods.md @@ -15,7 +15,6 @@ | `--mod-stepper-border-width` | | `--mod-stepper-button-background-color-focus` | | `--mod-stepper-button-background-color-keyboard-focus` | -| `--mod-stepper-button-border-width` | | `--mod-stepper-button-width` | | `--mod-stepper-button-width-quiet` | | `--mod-stepper-buttons-background-color` | From 6ab77f8ff30312d0a0029f44e2da141577342e51 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Thu, 16 Nov 2023 14:25:33 -0500 Subject: [PATCH 4/9] fix(stepper): button size + space match infieldbutton spec --- components/stepper/index.css | 1 + components/stepper/metadata/mods.md | 1 + 2 files changed, 2 insertions(+) diff --git a/components/stepper/index.css b/components/stepper/index.css index 4b7a9614b5f..93eedf16b3c 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -227,6 +227,7 @@ governing permissions and limitations under the License. .spectrum-Stepper-button { --mod-infield-button-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + --mod-infield-button-stacked-bottom-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); --mod-infield-button-stacked-bottom-border-radius-end-end: 0; --mod-infield-button-stacked-bottom-border-radius-end-start: 0; --mod-infield-button-fill-justify-content: flex-end; diff --git a/components/stepper/metadata/mods.md b/components/stepper/metadata/mods.md index daa54e86e02..aa81c18f4f0 100644 --- a/components/stepper/metadata/mods.md +++ b/components/stepper/metadata/mods.md @@ -15,6 +15,7 @@ | `--mod-stepper-border-width` | | `--mod-stepper-button-background-color-focus` | | `--mod-stepper-button-background-color-keyboard-focus` | +| `--mod-stepper-button-border-width` | | `--mod-stepper-button-width` | | `--mod-stepper-button-width-quiet` | | `--mod-stepper-buttons-background-color` | From c01d2b68a285e0549444c59c703e6cad9938dd21 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Mon, 11 Dec 2023 10:50:44 -0500 Subject: [PATCH 5/9] fix(stepper): infieldbutton background unchanged on stepper focus --- components/stepper/index.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/stepper/index.css b/components/stepper/index.css index 93eedf16b3c..16af4bd1ffe 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -120,6 +120,7 @@ governing permissions and limitations under the License. --highcontrast-stepper-focus-indicator-color: Highlight; } } + .x { border-radius: var(--spectrum-stepper-button-border-radius-reset); } @@ -154,12 +155,12 @@ governing permissions and limitations under the License. /*** Focused ***/ &.is-focused, &:focus { - --mod-infield-button-background-color: var(--highcontrast-stepper-button-background-color-focus, var(--mod-stepper-button-background-color-focus, var(--spectrum-stepper-button-background-color-focus))); --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus))); .spectrum-Stepper-input { outline: none; } + .spectrum-Stepper-input, .spectrum-Stepper-buttons { border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus))); @@ -178,7 +179,6 @@ governing permissions and limitations under the License. /*** Keyboard Focused ***/ &.is-keyboardFocused, &:focus-visible { - --mod-infield-button-background-color: var(--highcontrast-stepper-button-background-color-keyboard-focus, var(--mod-stepper-button-background-color-keyboard-focus, var(--spectrum-stepper-button-background-color-keyboard-focus))); --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus))); /* keyboard focus indicator is visible */ @@ -201,6 +201,7 @@ governing permissions and limitations under the License. /*** Quiet ***/ .spectrum-Stepper.spectrum-Stepper--quiet { --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); + /* quiet corners are not rounded */ border-start-start-radius: 0; border-start-end-radius: 0; From 5b74dfef5191a8546c200363849b0df2ee5fe0f1 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Mon, 11 Dec 2023 11:12:41 -0500 Subject: [PATCH 6/9] fix(stepper): invalid keyboard focus outline alignment --- components/stepper/index.css | 1 + components/stepper/metadata/mods.md | 66 ++++++++++++++--------------- 2 files changed, 33 insertions(+), 34 deletions(-) diff --git a/components/stepper/index.css b/components/stepper/index.css index 16af4bd1ffe..56efcaa86aa 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -72,6 +72,7 @@ governing permissions and limitations under the License. --mod-stepper-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-negative-border-color-focus-hover)); --mod-stepper-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-negative-border-color-key-focus)); --mod-infield-button-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid)); + --mod-textfield-icon-spacing-inline-start-invalid: 0; &.is-focused, &:focus { diff --git a/components/stepper/metadata/mods.md b/components/stepper/metadata/mods.md index aa81c18f4f0..b30c6007278 100644 --- a/components/stepper/metadata/mods.md +++ b/components/stepper/metadata/mods.md @@ -1,34 +1,32 @@ -| Modifiable Custom Properties | -| ------------------------------------------------------ | -| `--mod-stepper-animation-duration` | -| `--mod-stepper-border-color` | -| `--mod-stepper-border-color-focus` | -| `--mod-stepper-border-color-focus-hover` | -| `--mod-stepper-border-color-focus-hover-invalid` | -| `--mod-stepper-border-color-focus-invalid` | -| `--mod-stepper-border-color-hover` | -| `--mod-stepper-border-color-hover-invalid` | -| `--mod-stepper-border-color-invalid` | -| `--mod-stepper-border-color-keyboard-focus` | -| `--mod-stepper-border-color-keyboard-focus-invalid` | -| `--mod-stepper-border-radius` | -| `--mod-stepper-border-width` | -| `--mod-stepper-button-background-color-focus` | -| `--mod-stepper-button-background-color-keyboard-focus` | -| `--mod-stepper-button-border-width` | -| `--mod-stepper-button-width` | -| `--mod-stepper-button-width-quiet` | -| `--mod-stepper-buttons-background-color` | -| `--mod-stepper-buttons-border-color` | -| `--mod-stepper-buttons-border-color-focus` | -| `--mod-stepper-buttons-border-color-focus-hover` | -| `--mod-stepper-buttons-border-color-hover` | -| `--mod-stepper-buttons-border-color-keyboard-focus` | -| `--mod-stepper-buttons-border-style` | -| `--mod-stepper-buttons-border-width` | -| `--mod-stepper-focus-indicator-color` | -| `--mod-stepper-focus-indicator-gap` | -| `--mod-stepper-focus-indicator-width` | -| `--mod-stepper-height` | -| `--mod-stepper-min-width-multiplier` | -| `--mod-stepper-width` | +| Modifiable Custom Properties | +| --------------------------------------------------- | +| `--mod-stepper-animation-duration` | +| `--mod-stepper-border-color` | +| `--mod-stepper-border-color-focus` | +| `--mod-stepper-border-color-focus-hover` | +| `--mod-stepper-border-color-focus-hover-invalid` | +| `--mod-stepper-border-color-focus-invalid` | +| `--mod-stepper-border-color-hover` | +| `--mod-stepper-border-color-hover-invalid` | +| `--mod-stepper-border-color-invalid` | +| `--mod-stepper-border-color-keyboard-focus` | +| `--mod-stepper-border-color-keyboard-focus-invalid` | +| `--mod-stepper-border-radius` | +| `--mod-stepper-border-width` | +| `--mod-stepper-button-border-width` | +| `--mod-stepper-button-width` | +| `--mod-stepper-button-width-quiet` | +| `--mod-stepper-buttons-background-color` | +| `--mod-stepper-buttons-border-color` | +| `--mod-stepper-buttons-border-color-focus` | +| `--mod-stepper-buttons-border-color-focus-hover` | +| `--mod-stepper-buttons-border-color-hover` | +| `--mod-stepper-buttons-border-color-keyboard-focus` | +| `--mod-stepper-buttons-border-style` | +| `--mod-stepper-buttons-border-width` | +| `--mod-stepper-focus-indicator-color` | +| `--mod-stepper-focus-indicator-gap` | +| `--mod-stepper-focus-indicator-width` | +| `--mod-stepper-height` | +| `--mod-stepper-min-width-multiplier` | +| `--mod-stepper-width` | From 45298740e97170a4249336e2ef25d61f78077596 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Wed, 13 Dec 2023 15:53:16 -0500 Subject: [PATCH 7/9] fix(stepper): infieldbutton isnt focusable in stepper --- components/infieldbutton/stories/template.js | 4 +- components/stepper/metadata/stepper.yml | 68 ++++++++++---------- components/stepper/stories/template.js | 6 +- 3 files changed, 41 insertions(+), 37 deletions(-) diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js index e8b1a82998a..4aec477f3d3 100644 --- a/components/infieldbutton/stories/template.js +++ b/components/infieldbutton/stories/template.js @@ -15,6 +15,7 @@ export const Template = ({ iconName = "Add", isDisabled, isInvalid, + tabIndex = 0, ...globals }) => { const { express } = globals; @@ -35,10 +36,11 @@ export const Template = ({ [`${rootClass}--quiet`]: isQuiet, "is-invalid": isInvalid, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), - })} + })} ?disabled=${isDisabled} aria-haspopup="listbox" type="button" + tabIndex=${tabIndex} >
${when(iconName, () => Icon({ diff --git a/components/stepper/metadata/stepper.yml b/components/stepper/metadata/stepper.yml index 0e45692d70d..5e92079ede1 100644 --- a/components/stepper/metadata/stepper.yml +++ b/components/stepper/metadata/stepper.yml @@ -35,14 +35,14 @@ examples:
- - - - - - - - - - - - - - - - - -