diff --git a/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/AbstractVirtualSelect.ts b/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/AbstractVirtualSelect.ts index 2aae5844c8..103deb9621 100644 --- a/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/AbstractVirtualSelect.ts +++ b/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/AbstractVirtualSelect.ts @@ -1,6 +1,6 @@ // eslint-disable-next-line @typescript-eslint/no-unused-vars namespace Providers.OSUI.Dropdown.VirtualSelect { - export abstract class AbstractVirtualSelect + export abstract class AbstractVirtualSelect extends OSFramework.OSUI.Patterns.Dropdown.AbstractDropdown implements IVirtualSelect { @@ -145,6 +145,13 @@ namespace Providers.OSUI.Dropdown.VirtualSelect { this.uniqueId ); + if (OSFramework.OSUI.Helper.DeviceInfo.HasAccessibilityEnabled) { + OSFramework.OSUI.Helper.Dom.Styles.AddClass( + this.provider.$dropboxContainer, + OSFramework.OSUI.Constants.HasAccessibilityClass + ); + } + // Set provider Info to be used by setProviderConfigs API calls this.updateProviderEvents({ name: Enum.ProviderInfo.Name, diff --git a/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/scss/_virtualselect.scss b/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/scss/_virtualselect.scss index 76970ea08b..c34aa2dcc9 100644 --- a/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/scss/_virtualselect.scss +++ b/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/scss/_virtualselect.scss @@ -531,6 +531,18 @@ color: var(--color-neutral-9); } } + + .vscomp-toggle-all-button:focus { + box-shadow: none; + + .checkbox-icon { + @include a11y-default-outline; + } + } + + .vscomp-option.focused { + @include a11y-default-outline(true); + } } // OS HighContrast Enabled ------------------------------------------------------- diff --git a/src/scss/00-abstract/_mixins.scss b/src/scss/00-abstract/_mixins.scss index f615560aba..f1842743f9 100644 --- a/src/scss/00-abstract/_mixins.scss +++ b/src/scss/00-abstract/_mixins.scss @@ -2,8 +2,12 @@ /// @group global /// default outline style -@mixin a11y-default-outline { - box-shadow: 0 0 0 var(--border-size-l) var(--color-focus-outer); +@mixin a11y-default-outline($isInner: false) { + @if $isInner { + box-shadow: inset 0 0 0 var(--border-size-l) var(--color-focus-outer); + } @else { + box-shadow: 0 0 0 var(--border-size-l) var(--color-focus-outer); + } } /// outline style for high contrast mode diff --git a/src/scss/O11.OutSystemsUI.scss b/src/scss/O11.OutSystemsUI.scss index e319716226..067f465584 100644 --- a/src/scss/O11.OutSystemsUI.scss +++ b/src/scss/O11.OutSystemsUI.scss @@ -17,7 +17,7 @@ PS: This comment block will not be visible in the compiled version! =============================================================================== */ /*! -OutSystems UI 2.21.0 • O11 Platform +OutSystems UI 2.21.1 • O11 Platform Website: • https://www.outsystems.com/outsystems-ui GitHub: diff --git a/src/scss/ODC.OutSystemsUI.scss b/src/scss/ODC.OutSystemsUI.scss index 91db587d63..992326f6f2 100644 --- a/src/scss/ODC.OutSystemsUI.scss +++ b/src/scss/ODC.OutSystemsUI.scss @@ -17,7 +17,7 @@ PS: This comment block will not be visible in the compiled version! =============================================================================== */ /*! -OutSystems UI 2.21.0 • ODC Platform +OutSystems UI 2.21.1 • ODC Platform Website: • https://www.outsystems.com/outsystems-ui GitHub: