From 8093180d243b567151aa34b8971644df1a63e7a3 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 18 Mar 2026 13:44:05 +0100 Subject: [PATCH 01/17] add fallback for visual focus indication on keyboard navigation --- src/_shame.scss | 36 +-------- src/common/scss/_accessibility-defaults.scss | 79 ++++++++++++++++++++ src/index.scss | 1 + 3 files changed, 81 insertions(+), 35 deletions(-) create mode 100644 src/common/scss/_accessibility-defaults.scss diff --git a/src/_shame.scss b/src/_shame.scss index cc2509725..e64a869eb 100644 --- a/src/_shame.scss +++ b/src/_shame.scss @@ -1,31 +1,13 @@ // Add stuff to test fast and dirty. // This file should not contain any styles. -.#{$prefix}--assistive-text, -.#{$prefix}--visually-hidden { - /* - TODO: move to better place, originally from ~@carbon/styles/scss/css--helpers - but we cannot use it directly because of other included rules there. - */ - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - visibility: inherit; - border: 0; -} - /* WORKAROUND: thinner scrollbars */ * { - scrollbar-width: thin; scrollbar-color: #bbb transparent; + scrollbar-width: thin; &::-webkit-scrollbar { width: 0.25rem; @@ -38,19 +20,3 @@ border-radius: 0.125rem; } } - -/* - CHANGE: default focus behaviour -*/ - -:focus, -input:focus-visible, -textarea:focus-visible { - outline: none; - outline-offset: 0; -} - -:focus-visible { - outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px; - outline-offset: 1px; -} diff --git a/src/common/scss/_accessibility-defaults.scss b/src/common/scss/_accessibility-defaults.scss new file mode 100644 index 000000000..62ab9d1c4 --- /dev/null +++ b/src/common/scss/_accessibility-defaults.scss @@ -0,0 +1,79 @@ +.#{$prefix}--assistive-text, +.#{$prefix}--visually-hidden { + /* + TODO: move to better place, originally from ~@carbon/styles/scss/css--helpers + but we cannot use it directly because of other included rules there. + */ + position: absolute; + visibility: inherit; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + white-space: nowrap; + border: 0; + clip: rect(0, 0, 0, 0); +} + +/* + default focus indicator +*/ + +:root { + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary}; + --#{$eccgui}-a11y-outline-style: solid; + --#{$eccgui}-a11y-outline-width: #{0.25 * $eccgui-size-block-whitespace}; +} + +@keyframes outline-bounce { + 0% { + outline-width: calc(var(--#{$eccgui}-a11y-outline-width) * 0.5); + outline-color: var(--#{$eccgui}-a11y-outline-color); + outline-offset: calc(var(--#{$eccgui}-a11y-outline-width) * -0.5); + } + + 33.3% { + outline-color: var(--#{$eccgui}-a11y-outline-color); + outline-offset: calc(var(--#{$eccgui}-a11y-outline-width)); + } + + 66.6% { + outline-color: currentcolor; + outline-offset: calc(var(--#{$eccgui}-a11y-outline-width) * -2); + } + + 100% { + outline-width: var(--#{$eccgui}-a11y-outline-width); + outline-color: var(--#{$eccgui}-a11y-outline-color); + outline-offset: calc(var(--#{$eccgui}-a11y-outline-width) * -0.5); + } +} + +.focus-by-keyboard { + outline: var(--#{$eccgui}-a11y-outline-color) var(--#{$eccgui}-a11y-outline-style) + var(--#{$eccgui}-a11y-outline-width); + // strong visual focus indication for keyboard devices + outline-offset: calc(var(--#{$eccgui}-a11y-outline-width) * -0.5); + + @media (prefers-reduced-motion: no-preference) { + animation: outline-bounce 0.5s; + } +} + +.focus-by-pointer { + outline: transparent none 0; + // limited visual focus indication for pointer devices + outline-offset: 0; +} + +*[tabindex]:not([tabindex^="-"]):focus-visible, +:focus-visible { + @extend .focus-by-keyboard; +} + +input:focus:not(:focus-visible), +textarea:focus:not(:focus-visible), +:focus:not(:focus-visible) { + @extend .focus-by-pointer; +} diff --git a/src/index.scss b/src/index.scss index ad01bc165..d13a53cbf 100644 --- a/src/index.scss +++ b/src/index.scss @@ -61,6 +61,7 @@ $prefix-carbon: $prefix; // == Load basic components styles ============================================= +@import "./common/scss/accessibility-defaults"; @import "./components"; // set more readable variable for prefix From be46a58218915fc9286278e47f373d7b00fab181 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 18 Mar 2026 15:58:26 +0100 Subject: [PATCH 02/17] fix focus indicator on heade buttons --- src/components/Application/_header.scss | 34 +++++++++++++++++------- src/components/Application/_sidebar.scss | 7 +++++ src/components/Application/_toolbar.scss | 6 ++--- 3 files changed, 35 insertions(+), 12 deletions(-) diff --git a/src/components/Application/_header.scss b/src/components/Application/_header.scss index 27d7fd492..ce58fb9f1 100644 --- a/src/components/Application/_header.scss +++ b/src/components/Application/_header.scss @@ -190,15 +190,31 @@ a.#{$prefix}--header__menu-item:active { } // $shell-header-focus -.#{$prefix}--header__action:focus, -.#{$prefix}--header__action.#{$prefix}--btn--icon-only:focus, -.#{$prefix}--header__action.#{$prefix}--btn--primary:focus, -a.#{$prefix}--header__name:focus, -a.#{$prefix}--header__menu-item:focus { - outline: 1px dotted $shell-header-focus; - outline-offset: -1px; - border: none; - box-shadow: none; +.#{$prefix}--header__action, +.#{$prefix}--header__action.#{$prefix}--btn--icon-only, +.#{$prefix}--header__action.#{$prefix}--btn--primary, +a.#{$prefix}--header__name, +a.#{$prefix}--header__menu-item { + &:focus { + @extend .focus-by-pointer; + + border: none; + box-shadow: none; + } + + &:focus-visible { + @extend .focus-by-keyboard; + } + + &, + .#{$prefix}--popover--open & { + &:focus-visible { + @extend .focus-by-keyboard; + + border: none; + box-shadow: none; + } + } } .#{$prefix}--header__menu-title[aria-expanded="true"] { color: $shell-header-focus; diff --git a/src/components/Application/_sidebar.scss b/src/components/Application/_sidebar.scss index b72b28caf..0a4e465fb 100644 --- a/src/components/Application/_sidebar.scss +++ b/src/components/Application/_sidebar.scss @@ -28,3 +28,10 @@ $ui-02: $eccgui-color-workspace-background !default; padding: $eccgui-size-block-whitespace calc(0.5 * (#{mini-units(8)} - 30px)); transition: none; } + +.#{$eccgui}-application__menu__toggler.cds--header__action { + // cds--header__action cds--header__menu-trigger cds--header__menu-toggle + &:focus-visible { + @extend .focus-by-keyboard; + } +} diff --git a/src/components/Application/_toolbar.scss b/src/components/Application/_toolbar.scss index e3c01b50d..e4bd7f82a 100644 --- a/src/components/Application/_toolbar.scss +++ b/src/components/Application/_toolbar.scss @@ -51,18 +51,18 @@ $shell-panel-focus: $shell-header-focus !default; .#{$eccgui}-application__toolbar__panel-backdrop--onleave, .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick { position: fixed; - inset: mini-units(8) 0 0 0; + inset: mini-units(8) 0 0; } .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick { top: 0; } -// add rules for own class identiiers +// add rules for own class identifiers .#{$eccgui}-application__toolbar { - flex-basis: auto; flex-grow: 0; + flex-basis: auto; .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content { // for some reason the original calculation still moves out the tooltip From 7d523a4db0d45258256ba613bd86086aa7ccb3b9 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 18 Mar 2026 15:59:39 +0100 Subject: [PATCH 03/17] remove debug comment --- src/components/Application/_sidebar.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Application/_sidebar.scss b/src/components/Application/_sidebar.scss index 0a4e465fb..cfd24cab8 100644 --- a/src/components/Application/_sidebar.scss +++ b/src/components/Application/_sidebar.scss @@ -30,7 +30,6 @@ $ui-02: $eccgui-color-workspace-background !default; } .#{$eccgui}-application__menu__toggler.cds--header__action { - // cds--header__action cds--header__menu-trigger cds--header__menu-toggle &:focus-visible { @extend .focus-by-keyboard; } From c281fabfb23d55b6b5e641a2f38cde93594b05c4 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 18 Mar 2026 16:15:25 +0100 Subject: [PATCH 04/17] force at east 2px visible focus outline --- src/common/scss/_accessibility-defaults.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/common/scss/_accessibility-defaults.scss b/src/common/scss/_accessibility-defaults.scss index 62ab9d1c4..8c6475cec 100644 --- a/src/common/scss/_accessibility-defaults.scss +++ b/src/common/scss/_accessibility-defaults.scss @@ -24,13 +24,16 @@ --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary}; --#{$eccgui}-a11y-outline-style: solid; --#{$eccgui}-a11y-outline-width: #{0.25 * $eccgui-size-block-whitespace}; + + // shift outline min 2px inside element to have a minimum 2px outline even with hidden overflow + --#{$eccgui}-a11y-outline-offset: min(calc(var(--#{$eccgui}-a11y-outline-width) * -0.5), -2px); } @keyframes outline-bounce { 0% { outline-width: calc(var(--#{$eccgui}-a11y-outline-width) * 0.5); outline-color: var(--#{$eccgui}-a11y-outline-color); - outline-offset: calc(var(--#{$eccgui}-a11y-outline-width) * -0.5); + outline-offset: var(--#{$eccgui}-a11y-outline-offset); } 33.3% { @@ -46,15 +49,16 @@ 100% { outline-width: var(--#{$eccgui}-a11y-outline-width); outline-color: var(--#{$eccgui}-a11y-outline-color); - outline-offset: calc(var(--#{$eccgui}-a11y-outline-width) * -0.5); + outline-offset: var(--#{$eccgui}-a11y-outline-offset); } } .focus-by-keyboard { outline: var(--#{$eccgui}-a11y-outline-color) var(--#{$eccgui}-a11y-outline-style) var(--#{$eccgui}-a11y-outline-width); + // strong visual focus indication for keyboard devices - outline-offset: calc(var(--#{$eccgui}-a11y-outline-width) * -0.5); + outline-offset: var(--#{$eccgui}-a11y-outline-offset); @media (prefers-reduced-motion: no-preference) { animation: outline-bounce 0.5s; @@ -63,6 +67,7 @@ .focus-by-pointer { outline: transparent none 0; + // limited visual focus indication for pointer devices outline-offset: 0; } From 603a952e964e254ea7a8c685545f60c0e291dba7 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 19 Mar 2026 11:06:21 +0100 Subject: [PATCH 05/17] fix tooltipl re-focus after swapping the placeholder, it now works in Gecko and Webkit --- src/components/Tooltip/Tooltip.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 7a3108f7e..cc1d72205 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -100,7 +100,8 @@ export const Tooltip = ({ }, swapDelayTime); if (placeholderRef.current !== null) { const eventType = ev.type === "focusin" ? "focusout" : "mouseleave"; - (placeholderRef.current as HTMLElement).addEventListener(eventType, () => { + const innerFocusTarget = (placeholderRef.current as HTMLElement).querySelector("[tabindex='0']")?.children[0]; + (innerFocusTarget as HTMLElement).addEventListener(eventType, () => { if ( (eventType === "focusout" && eventMemory.current === "afterfocus") || (eventType === "mouseleave" && eventMemory.current === "afterhover") From 94ed6843bdf61cf4b4a72ef585bf4f290896d1dc Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 19 Mar 2026 14:40:38 +0100 Subject: [PATCH 06/17] add accessibility outline properties to the custom properties overview --- src/configuration/stories/customproperties.stories.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/configuration/stories/customproperties.stories.tsx b/src/configuration/stories/customproperties.stories.tsx index 93722ed86..5749bd996 100644 --- a/src/configuration/stories/customproperties.stories.tsx +++ b/src/configuration/stories/customproperties.stories.tsx @@ -34,6 +34,10 @@ const groups: { title: string; filterName: (name: string) => boolean }[] = [ title: "Color aliases", filterName: (name) => name.startsWith(`--${eccgui}-color`) && !name.startsWith(`--${eccgui}-color-palette`), }, + { + title: "Accessibility", + filterName: (name) => name.startsWith(`--${eccgui}-a11y`), + }, { title: "Opacity", filterName: (name) => name.startsWith(`--${eccgui}-opacity`), From c677ce59053f7f337d20244ba0e11a49bc83d773 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 19 Mar 2026 14:41:11 +0100 Subject: [PATCH 07/17] use outlines for input elements to improve accessibility --- .../AutoSuggestion/AutoSuggestion.scss | 6 ++- src/components/Checkbox/checkbox.scss | 14 +++++- .../MultiSuggestField/_multisuggestfield.scss | 20 ++++++++ src/components/RadioButton/radiobutton.scss | 8 +++- src/components/TextField/textfield.scss | 22 +++++++++ src/extensions/codemirror/_codemirror.scss | 48 ++++++++----------- 6 files changed, 87 insertions(+), 31 deletions(-) diff --git a/src/components/AutoSuggestion/AutoSuggestion.scss b/src/components/AutoSuggestion/AutoSuggestion.scss index 8bd5083b8..a2d92d73b 100644 --- a/src/components/AutoSuggestion/AutoSuggestion.scss +++ b/src/components/AutoSuggestion/AutoSuggestion.scss @@ -39,7 +39,11 @@ } &:has(.cm-editor.cm-focused) { - box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus; + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent}; + + @extend .focus-by-keyboard; + + animation: none; } .cm-editor { diff --git a/src/components/Checkbox/checkbox.scss b/src/components/Checkbox/checkbox.scss index e575dc988..684b55134 100644 --- a/src/components/Checkbox/checkbox.scss +++ b/src/components/Checkbox/checkbox.scss @@ -47,7 +47,9 @@ $switch-checked-background-color-disabled: eccgui-color-rgba( } input:focus ~ .#{$ns}-control-indicator { - outline-offset: 0; + @extend .focus-by-keyboard; + + animation: none; } input:disabled ~ .#{$ns}-control-indicator, @@ -72,6 +74,16 @@ $switch-checked-background-color-disabled: eccgui-color-rgba( background-image: url("~@carbon/icons/svg/32/checkbox--indeterminate.svg"); } } + + &.#{$ns}-switch { + --#{$eccgui}-a11y-outline-offset: 1px; + + input:focus ~ .#{$ns}-control-indicator { + @extend .focus-by-keyboard; + + animation: none; + } + } } .#{$ns}-control-indicator + *, diff --git a/src/components/MultiSuggestField/_multisuggestfield.scss b/src/components/MultiSuggestField/_multisuggestfield.scss index 265621b73..bdf7fc3d8 100644 --- a/src/components/MultiSuggestField/_multisuggestfield.scss +++ b/src/components/MultiSuggestField/_multisuggestfield.scss @@ -6,3 +6,23 @@ max-height: var(--eccgui-multisuggestfield-max-height, 45vh); } } + +.#{$eccgui}-multisuggestfield { + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent}; + + &.#{$ns}-intent-success { + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-success-text}; + } + &.#{$ns}-intent-warning { + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-warning-text}; + } + &.#{$ns}-intent-danger { + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-danger-text}; + } + + &:focus-within { + @extend .focus-by-keyboard; + + animation: none; + } +} diff --git a/src/components/RadioButton/radiobutton.scss b/src/components/RadioButton/radiobutton.scss index ba6648323..9ea948013 100644 --- a/src/components/RadioButton/radiobutton.scss +++ b/src/components/RadioButton/radiobutton.scss @@ -1,6 +1,10 @@ // Checkbox need to be imported before, we won't double it here currently .#{$ns}-control { + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent}; + --#{$eccgui}-a11y-outline-width: 2px; + --#{$eccgui}-a11y-outline-offset: 0; + &.#{$ns}-radio { input ~ .#{$ns}-control-indicator, input:checked ~ .#{$ns}-control-indicator { @@ -8,7 +12,9 @@ } input:focus ~ .#{$ns}-control-indicator { - outline-offset: 1px; + @extend .focus-by-keyboard; + + animation: none; } input:disabled ~ .#{$ns}-control-indicator, diff --git a/src/components/TextField/textfield.scss b/src/components/TextField/textfield.scss index e7c673647..8bad3ce5c 100644 --- a/src/components/TextField/textfield.scss +++ b/src/components/TextField/textfield.scss @@ -103,6 +103,8 @@ $eccgui-map-intent-bgcolors: ( } .#{$ns}-input { + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent}; + .#{$ns}-input-group[class*="#{$eccgui}-intent--"] & { animation-duration: 1s; animation-delay: 0.5s; @@ -111,16 +113,23 @@ $eccgui-map-intent-bgcolors: ( @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors { .#{$ns}-input-group.#{$ns}-intent-#{$each-intent} & { background-color: eccgui-color-var("semantic", $each-intent, "100"); + + --#{$eccgui}-a11y-outline-color: eccgui-color-var("semantic", $each-intent, "900"); + animation-name: intent-state-flash-#{$each-intent}; } } .#{$ns}-input-group.#{$eccgui}-intent--info & { @include pt-input-intent($eccgui-color-info-text); + + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text}; } .#{$ns}-input-group.#{$eccgui}-intent--accent & { @include pt-input-intent($eccgui-color-primary); + + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary}; } .#{$ns}-input-group.#{$eccgui}-intent--neutral & { @@ -138,6 +147,12 @@ $eccgui-map-intent-bgcolors: ( text-decoration: line-through $eccgui-color-danger-text 2px; } + + &:focus-visible { + @extend .focus-by-keyboard; + + animation: none; + } } .#{$eccgui}-textarea { @@ -151,16 +166,23 @@ $eccgui-map-intent-bgcolors: ( @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors { &.#{$eccgui}-intent--#{$each-intent} { background-color: eccgui-color-var("semantic", $each-intent, "100"); + + --#{$eccgui}-a11y-outline-color: eccgui-color-var("semantic", $each-intent, "900"); + animation-name: intent-state-flash-#{$each-intent}; } } &.#{$eccgui}-intent--info { @include pt-input-intent($eccgui-color-info-text); + + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text}; } &.#{$eccgui}-intent--accent { @include pt-input-intent($eccgui-color-primary); + + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary}; } &.#{$eccgui}-intent--neutral { diff --git a/src/extensions/codemirror/_codemirror.scss b/src/extensions/codemirror/_codemirror.scss index dc010e56b..09368c691 100644 --- a/src/extensions/codemirror/_codemirror.scss +++ b/src/extensions/codemirror/_codemirror.scss @@ -19,13 +19,13 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default; &__toolbar { position: absolute; - z-index: 3; - left: 1px; - right: 1px; top: 1px; - border-radius: $pt-border-radius $pt-border-radius 0 0; - border-bottom: solid 1px $eccgui-color-codeeditor-separation; + right: 1px; + left: 1px; + z-index: 3; background-color: $eccgui-color-codeeditor-background; + border-bottom: solid 1px $eccgui-color-codeeditor-separation; + border-radius: $pt-border-radius $pt-border-radius 0 0; } &--has-toolbar { @@ -37,9 +37,9 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default; &__preview { position: absolute; top: calc(#{$eccgui-size-codeeditor-toolbar-height} + 1px) !important; - left: 1px; right: 1px; bottom: 1px; + left: 1px; z-index: 2; padding: $button-padding; overflow-y: auto; @@ -50,12 +50,12 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default; .cm-editor { width: 100%; height: $eccgui-size-codeeditor-height; - clip-path: unset !important; // we may check later why they set inset(0) now background-color: $eccgui-color-codeeditor-background; border-radius: $pt-border-radius; // get them a "border" like input boxes from blueprintjs box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow; + clip-path: unset !important; // we may check later why they set inset(0) now &.#{eccgui}-disabled { @extend .#{$ns}-input, .#{$ns}-disabled; @@ -89,7 +89,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default; } &.#{eccgui}-intent--primary { - @include pt-input-intent($eccgui-color-info-text); + @include pt-input-intent($eccgui-color-primary); } &.#{eccgui}-intent--info { @@ -97,7 +97,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default; } &.#{eccgui}-intent--accent { - @include pt-input-intent($eccgui-color-primary); + @include pt-input-intent($eccgui-color-accent); } &.#{eccgui}-intent--neutral { @@ -124,39 +124,31 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default; } &.cm-focused { - outline: none; - box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus; + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent}; + --#{$eccgui}-a11y-outline-offset: 0; + + @extend .focus-by-keyboard; + + animation: none; &.#{eccgui}-intent--warning { - box-shadow: input-transition-shadow($eccgui-color-warning-text, true), $input-box-shadow-focus; + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-warning-text}; } &.#{eccgui}-intent--success { - box-shadow: input-transition-shadow($eccgui-color-success-text, true), $input-box-shadow-focus; + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-success-text}; } &.#{eccgui}-intent--danger { - box-shadow: input-transition-shadow($eccgui-color-danger-text, true), $input-box-shadow-focus; + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-danger-text}; } &.#{eccgui}-intent--primary { - box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus; + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary}; } &.#{eccgui}-intent--info { - box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus; - } - - &.#{eccgui}-intent--accent { - box-shadow: input-transition-shadow($eccgui-color-warning-text, true), $input-box-shadow-focus; - } - - &.#{eccgui}-intent--neutral { - box-shadow: input-transition-shadow($eccgui-color-workspace-text, true), $input-box-shadow-focus; - } - - &.#{eccgui}-intent--edited { - box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus; + --#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text}; } &.#{eccgui}-intent--removed { From 3063efe6b36115d76189cdedced49d1081cc99a6 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 19 Mar 2026 14:47:48 +0100 Subject: [PATCH 08/17] update changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 78466ca43..dfa4d8763 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -52,6 +52,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - use the latest provided `onChange` function - ``, `