Merge pull request #1002 from OutSystems/ROU-11343

ROU-11343: Fixed patterns and widgets issues when high contrast mode enabled.
OutSystems · Nov 27, 2024 · 2033a4f · 2033a4f
2 parents 8a66ac4 + 5947380
commit 2033a4f
Show file tree

Hide file tree

Showing 31 changed files with 885 additions and 99 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -30,7 +30,7 @@
 		"editor.defaultFormatter": "vscode.json-language-features"
 	},
 	"sonarlint.connectedMode.project": {
-		"connectionId": "outsystems",
+		"connectionId": "outsystemsrd",
 		"projectKey": "OutSystems_outsystems-ui"
 	}
 }
diff --git a/src/scripts/OSFramework/OSUI/GlobalEnum.ts b/src/scripts/OSFramework/OSUI/GlobalEnum.ts
@@ -16,13 +16,15 @@ namespace OSFramework.OSUI.GlobalEnum {
 		AsideExpandable = 'aside-expandable',
 		Container = 'screen-container',
 		Content = 'content',
+		DarkMode = 'os-dark-mode',
 		DeprecatedSubmenu = 'submenu',
 		Footer = 'footer',
 		Header = 'header',
 		HeaderHideOnScroll = 'hide-header-on-scroll',
 		HeaderIsFixed = 'fixed-header',
 		HeaderIsVisible = 'header-is--visible',
 		HeaderTopContent = 'header-top-content',
+		HighContrast = 'os-high-contrast',
 		InputNotValid = 'not-valid',
 		IsTouch = 'is--touch',
 		Layout = 'layout',
@@ -208,6 +210,7 @@ namespace OSFramework.OSUI.GlobalEnum {
 		AnimationEnd = 'animationend',
 		AnimationStart = 'animationstart',
 		Blur = 'blur',
+		Change = 'change',
 		Click = 'click',
 		Focus = 'focus',
 		keyDown = 'keydown',

diff --git a/src/scripts/OSFramework/OSUI/Pattern/AnimatedLabel/scss/_animated-label.scss b/src/scripts/OSFramework/OSUI/Pattern/AnimatedLabel/scss/_animated-label.scss
@@ -160,8 +160,6 @@
 
 // Accessibility --------------------------------------------------------------------
 ///
-
-/* Accessibility Styles */
 .has-accessible-features {
 	.animated-label-input {
 		.form-control[data-input] {
@@ -177,3 +175,28 @@
 		}
 	}
 }
+
+// OS HighContrast Enabled -------------------------------------------------------
+///
+.os-high-contrast {
+	.animated-label-text {
+		font-weight: var(--font-semi-bold);
+		padding: var(--space-none) var(--space-s);
+	}
+
+	.animated-label {
+		&.active {
+			.animated-label-text {
+				background-color: var(--color-neutral-8);
+				font-size: var(--font-size-s);
+				top: -16px;
+			}
+		}
+	}
+
+	.animated-label-input {
+		.form-control[data-input] {
+			padding: var(--space-none) var(--space-s);
+		}
+	}
+}
diff --git a/src/scripts/OSFramework/OSUI/Pattern/BottomSheet/scss/_bottomsheet.scss b/src/scripts/OSFramework/OSUI/Pattern/BottomSheet/scss/_bottomsheet.scss
@@ -197,3 +197,11 @@
 		}
 	}
 }
+
+// OS HighContrast Enabled -------------------------------------------------------
+///
+.os-high-contrast {
+	.osui-bottom-sheet {
+		border: var(--border-size-s) solid var(--color-neutral-0);
+	}
+}
diff --git a/src/scripts/OSFramework/OSUI/Pattern/ButtonLoading/scss/_button-loading.scss b/src/scripts/OSFramework/OSUI/Pattern/ButtonLoading/scss/_button-loading.scss
@@ -61,7 +61,7 @@
 			animation: loadingSpinner 850ms cubic-bezier(0.7, 1.05, 0.78, 0.78) infinite;
 			border: var(--border-size-m) solid currentColor;
 			border-radius: var(--border-radius-circle);
-			border-top: var(--border-size-m) solid transparent;
+			border-top-color: transparent;
 			height: 16px;
 			margin-right: var(--space-s);
 			width: 16px;
@@ -111,3 +111,17 @@
 		width: 100%;
 	}
 }
+
+// OS HighContrast Enabled -------------------------------------------------------
+///
+.os-high-contrast {
+	.osui-btn-loading {
+		.btn {
+			.osui-btn-loading__spinner-animation {
+				border-width: var(--border-size-l);
+				border-bottom: none;
+				border-top: none;
+			}
+		}
+	}
+}
diff --git a/src/scripts/OSFramework/OSUI/Pattern/Carousel/scss/_carousel.scss b/src/scripts/OSFramework/OSUI/Pattern/Carousel/scss/_carousel.scss
@@ -119,7 +119,6 @@
 		& {
 			-servicestudio-position: relative;
 		}
-
 	}
 
 	.list:not([data-virtualization-disabled]),
@@ -143,15 +142,30 @@
 	}
 }
 
+// Accessibility -----------------------------------------------------------------
 ///
 .has-accessible-features {
 	.splide__slide {
 		box-shadow: none;
 	}
 }
 
+// OS HighContrast Enabled -------------------------------------------------------
 ///
+.os-high-contrast {
+	.splide__pagination {
+		&__page {
+			@include a11y-high-contrast-outline;
+		}
+
+		li {
+			margin: var(--space-none) var(--space-xs);
+		}
+	}
+}
+
 // RTL for dynamic changes of direction
+///
 .is-rtl {
 	.splide.splide {
 		&--ltr {
@@ -174,4 +188,3 @@
 		}
 	}
 }
-
diff --git a/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/scss/_dropdown-serverside.scss b/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/scss/_dropdown-serverside.scss
@@ -352,6 +352,16 @@ $balloonMobileTopMargin: 5vh;
 	}
 }
 
+// OS HighContrast Enabled -------------------------------------------------------
+///
+.os-high-contrast {
+	.has-accessible-features .osui-dropdown-serverside__balloon-content:focus {
+		--osui-outline-size: 0;
+
+		@include a11y-high-contrast-outline(true);
+	}
+}
+
 // IsRTL -------------------------------------------------------------------------
 ///
 .is-rtl {

diff --git a/...scripts/OSFramework/OSUI/Pattern/DropdownServerSideItem/scss/_dropdownserversideitem.scss b/...scripts/OSFramework/OSUI/Pattern/DropdownServerSideItem/scss/_dropdownserversideitem.scss
@@ -61,6 +61,28 @@
 	}
 }
 
+// OS HighContrast Enabled -------------------------------------------------------
+///
+.os-high-contrast {
+	.osui-dropdown-serverside-item {
+		&:hover,
+		&:focus {
+			outline: none;
+
+			&:before {
+				@include a11y-high-contrast-outline(true);
+				bottom: 0;
+				content: '';
+				display: block;
+				left: 0;
+				position: absolute;
+				right: 0;
+				top: 0;
+			}
+		}
+	}
+}
+
 // Responsive --------------------------------------------------------------------
 ///
 .tablet,

diff --git a/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/scss/_overflowmenu.scss b/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/scss/_overflowmenu.scss
@@ -4,67 +4,81 @@
 /// Patterns - Navigation - OverflowMenu
 
 .osui-overflow-menu {
-    display: inline-block;
-    --osui-overflow-menu-min-width: 170px;
-    --border-radius-rounded: 16px;
+	display: inline-block;
+	--osui-overflow-menu-min-width: 170px;
+	--border-radius-rounded: 16px;
 
-    &__trigger {
-        --osui-floating-offset: var(--space-s);
+	&__trigger {
+		--osui-floating-offset: var(--space-s);
 
-        border: var(--border-size-s) solid transparent;
-        border-radius: var(--osui-overflow-menu-shape);
-        color: var(--color-neutral-9);
-        width: 32px;
+		border: var(--border-size-s) solid transparent;
+		border-radius: var(--osui-overflow-menu-shape);
+		color: var(--color-neutral-9);
+		width: 32px;
 
-        * {
-            pointer-events: none;
-        }
-    }
+		* {
+			pointer-events: none;
+		}
+	}
 
-    &--is-open {
-        .osui-overflow-menu__trigger {
-            background-color: var(--color-neutral-4);
-        }
-    }
-
-    &__balloon {
-        min-width: var(--osui-overflow-menu-min-width);
-        overflow: hidden;
+	&--is-open {
+		.osui-overflow-menu__trigger {
+			background-color: var(--color-neutral-4);
+		}
+	}
 
-        a {
-            color: var(--color-neutral-9);
-
-            &:hover {
-                background: var(--color-neutral-4);
-                text-decoration: none;
-            }
+	&__balloon {
+		min-width: var(--osui-overflow-menu-min-width);
+		overflow: hidden;
 
-            // Service Studio Preview
-            & {
-                -servicestudio-align-items: center;
-                -servicestudio-display: inline-flex!important;
-                -servicestudio-color:var(--color-neutral-9);
-                -servicestudio-padding: var(--space-s) var(--space-base);
-            }
-        }
-
-        // To make extensibility with ExtendedClass easier
-        a:not([class^='padding-']){
-            padding:var(--space-s) var(--space-base);
-        }
-    }
+		a {
+			color: var(--color-neutral-9);
+
+			&:hover {
+				background: var(--color-neutral-4);
+				text-decoration: none;
+			}
+
+			// Service Studio Preview
+			& {
+				-servicestudio-align-items: center;
+				-servicestudio-display: inline-flex !important;
+				-servicestudio-color: var(--color-neutral-9);
+				-servicestudio-padding: var(--space-s) var(--space-base);
+			}
+		}
+
+		// To make extensibility with ExtendedClass easier
+		a:not([class^='padding-']) {
+			padding: var(--space-s) var(--space-base);
+		}
+	}
 }
 
 .tablet,
 .phone {
-    .osui-overflow-menu {
-        --border-radius-rounded: 100%;
+	.osui-overflow-menu {
+		--border-radius-rounded: 100%;
 
-        .osui-overflow-menu__trigger {
-            &.btn {
-                // Longer specificity to be able to always override default responsive styles for buttons
-                width: 40px;
-            }
-        }
-    }
-}
+		.osui-overflow-menu__trigger {
+			&.btn {
+				// Longer specificity to be able to always override default responsive styles for buttons
+				width: 40px;
+			}
+		}
+	}
+}
+
+// OS HighContrast Enabled -------------------------------------------------------
+///
+.os-high-contrast {
+	.osui-overflow-menu__balloon {
+		border: var(--border-size-s) solid var(--color-neutral-7);
+
+		a {
+			&:hover {
+				@include a11y-high-contrast-outline;
+			}
+		}
+	}
+}
diff --git a/src/scripts/OSFramework/OSUI/Pattern/Progress/Bar/scss/_progressbar.scss b/src/scripts/OSFramework/OSUI/Pattern/Progress/Bar/scss/_progressbar.scss
@@ -107,3 +107,27 @@
 		right: 0;
 	}
 }
+
+// OS HighContrast Enabled -------------------------------------------------------
+///
+.os-high-contrast {
+	.osui-progress {
+		&-bar {
+			&__container {
+				min-height: calc(2 * var(--thickness));
+			}
+
+			&__value {
+				border: var(--border-size-m) solid var(--color-neutral-7);
+				height: calc(2 * var(--thickness));
+
+				&:before,
+				&:after {
+					border: var(--border-size-m) solid var(--color-neutral-7);
+					top: calc(-1 * var(--border-size-m));
+					left: calc(-1 * var(--border-size-m));
+				}
+			}
+		}
+	}
+}