Merge pull request #1005 from OutSystems/ROU-11403-v2

ROU-11403: Enabling accessibility styling for Virtual Select
OutSystems · Dec 18, 2024 · db2d443 · db2d443
2 parents ee060ac + 7b89815
commit db2d443
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 5 deletions.
diff --git 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<C extends Dropdown.VirtualSelect.AbstractVirtualSelectConfig>
+  export abstract class AbstractVirtualSelect<C extends Dropdown.VirtualSelect.AbstractVirtualSelectConfig>
 		extends OSFramework.OSUI.Patterns.Dropdown.AbstractDropdown<VirtualSelect, C>
 		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
@@ -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
@@ -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
@@ -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
@@ -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: