feat(@clayui/css): Adds global classes to configure accessibility

- .c-prefers-link-underline forces all anchor tags to be underlined unless it has role="button" - .c-prefers-reduced-motion removes all transitions and animations - .c-prefers-letter-spacing-1 adds more spacing between characters - .c-prefers-expanded-text disables text-truncate
liferay · Jun 12, 2023 · 232e15a · 232e15a
1 parent d0d7fdd
commit 232e15a
Show file tree

Hide file tree

Showing 23 changed files with 445 additions and 194 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_tables.scss b/packages/clay-css/src/scss/atlas/variables/_tables.scss
@@ -68,7 +68,7 @@ $table-title-link: () !default;
 $table-title-link: map-deep-merge(
 	(
 		border-radius: 1px,
-		display: inline-block,
+		display: inline-flex,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
 		focus: (
@@ -120,7 +120,7 @@ $table-link: map-deep-merge(
 	(
 		border-radius: 1px,
 		color: $gray-900,
-		display: inline-block,
+		display: inline-flex,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
 		hover: (
@@ -167,7 +167,7 @@ $table-list-title-link: map-deep-merge(
 	(
 		border-radius: 1px,
 		color: $gray-900,
-		display: inline-block,
+		display: inline-flex,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
 		hover: (
@@ -188,7 +188,7 @@ $table-list-link: map-deep-merge(
 	(
 		border-radius: 1px,
 		color: $gray-900,
-		display: inline-block,
+		display: inline-flex,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
 		hover: (

diff --git a/packages/clay-css/src/scss/cadmin/components/_forms.scss b/packages/clay-css/src/scss/cadmin/components/_forms.scss
@@ -142,31 +142,7 @@ fieldset[disabled] .form-control {
 // text (without any border, background color, focus indicator)
 
 .form-control-plaintext {
-	background-clip: border-box;
-	background-color: transparent;
-	border-color: transparent;
-	border-style: solid;
-
-	border-bottom-width: $cadmin-input-border-bottom-width;
-	border-left-width: $cadmin-input-border-left-width;
-	border-right-width: $cadmin-input-border-right-width;
-	border-top-width: $cadmin-input-border-top-width;
-	color: $cadmin-input-plaintext-color;
-	display: block;
-	font-size: $cadmin-input-font-size;
-	height: $cadmin-input-height;
-	line-height: $cadmin-input-line-height;
-
-	// match inputs if this class comes on inputs with default margins
-
-	margin-bottom: 0;
-	min-width: 0;
-	padding-bottom: $cadmin-input-padding-y;
-	padding-left: 0;
-	padding-right: 0;
-	padding-top: $cadmin-input-padding-y;
-	text-overflow: ellipsis;
-	width: 100%;
+	@include clay-form-control-variant($cadmin-input-plaintext);
 
 	@include clay-scale-component {
 		font-size: $cadmin-input-font-size-mobile;

diff --git a/packages/clay-css/src/scss/cadmin/components/_multi-step-nav.scss b/packages/clay-css/src/scss/cadmin/components/_multi-step-nav.scss
@@ -31,17 +31,7 @@
 }
 
 .multi-step-title-center {
-	.multi-step-title {
-		margin-left: $cadmin-multi-step-icon-size * 0.5;
-		max-width: $cadmin-multi-step-title-max-width;
-		overflow: hidden;
-		position: relative;
-		text-align: center;
-		text-overflow: ellipsis;
-		transform: translateX(-50%);
-		white-space: nowrap;
-		width: auto;
-	}
+	@include clay-map-to-css($cadmin-multi-step-title-center);
 }
 
 .multi-step-item {

diff --git a/packages/clay-css/src/scss/cadmin/components/_navbar.scss b/packages/clay-css/src/scss/cadmin/components/_navbar.scss
@@ -135,12 +135,7 @@
 }
 
 .navbar-text-truncate {
-	display: inline-block;
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	vertical-align: bottom;
-	white-space: nowrap;
+	@include clay-map-to-css($cadmin-navbar-text-truncate);
 }
 
 // Navbar Toggler

diff --git a/packages/clay-css/src/scss/cadmin/components/_type.scss b/packages/clay-css/src/scss/cadmin/components/_type.scss
@@ -301,24 +301,3 @@ strong {
 .c-kbd-dark {
 	@include clay-css($cadmin-c-kbd-dark);
 }
-
-// Text Truncate
-
-.text-truncate {
-	display: block;
-}
-
-.text-truncate-inline {
-	display: inline-flex;
-	max-width: 100%;
-
-	.text-truncate {
-		display: inline-block;
-		max-width: 100%;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		vertical-align: bottom;
-		white-space: nowrap;
-		word-wrap: normal;
-	}
-}
diff --git a/packages/clay-css/src/scss/cadmin/components/_utilities-functional-important.scss b/packages/clay-css/src/scss/cadmin/components/_utilities-functional-important.scss
@@ -678,10 +678,14 @@
 	white-space: nowrap !important;
 }
 
+// Text Truncate
+
 .text-truncate {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	@include clay-css($cadmin-text-truncate);
+}
+
+.text-truncate-inline {
+	@include clay-map-to-css($cadmin-text-truncate-inline);
 }
 
 // Responsive Text Alignment
@@ -857,7 +861,19 @@
 	visibility: hidden !important;
 }
 
-// Transitions
+// C Prefers Link Underline
+
+@include clay-map-to-css($cadmin-c-prefers-link-underline);
+
+// C Prefers Letter Spacing
+
+@include clay-map-to-css($cadmin-c-prefers-letter-spacing);
+
+// Display C Reduced Motion
+
+@include clay-map-to-css($cadmin-displays-c-prefers-reduced-motion);
+
+// C Prefers Reduced Motion
 
 .c-prefers-reduced-motion {
 	@include clay-css($cadmin-c-prefers-reduced-motion);

diff --git a/packages/clay-css/src/scss/cadmin/variables/_buttons.scss b/packages/clay-css/src/scss/cadmin/variables/_buttons.scss
@@ -45,6 +45,7 @@ $cadmin-btn: map-deep-merge(
 		font-family: $cadmin-btn-font-family,
 		font-size: $cadmin-btn-font-size,
 		font-weight: $cadmin-btn-font-weight,
+		letter-spacing: inherit,
 		line-height: $cadmin-btn-line-height,
 		padding-bottom: $cadmin-btn-padding-y,
 		padding-left: $cadmin-btn-padding-x,

diff --git a/packages/clay-css/src/scss/cadmin/variables/_forms.scss b/packages/clay-css/src/scss/cadmin/variables/_forms.scss
@@ -72,6 +72,7 @@ $cadmin-input: map-deep-merge(
 		font-size: $cadmin-input-font-size,
 		font-weight: $cadmin-input-font-weight,
 		height: $cadmin-input-height,
+		letter-spacing: inherit,
 		line-height: $cadmin-input-line-height,
 		min-width: 0,
 		padding-bottom: $cadmin-input-padding-y,
@@ -120,6 +121,36 @@ $cadmin-input-palette: () !default;
 
 $cadmin-input-plaintext-color: $cadmin-body-color !default;
 
+$cadmin-input-plaintext: () !default;
+$cadmin-input-plaintext: map-deep-merge(
+	(
+		background-clip: border-box,
+		background-color: transparent,
+		border-bottom-width: $cadmin-input-border-bottom-width,
+		border-color: transparent,
+		border-left-width: $cadmin-input-border-left-width,
+		border-right-width: $cadmin-input-border-right-width,
+		border-style: solid,
+		border-top-width: $cadmin-input-border-top-width,
+		color: $cadmin-input-plaintext-color,
+		display: block,
+		font-size: $cadmin-input-font-size,
+		height: $cadmin-input-height,
+		letter-spacing: inherit,
+		line-height: $cadmin-input-line-height,
+		// match inputs if this class comes on inputs with default margins
+		margin-bottom: 0,
+		min-width: 0,
+		padding-bottom: $cadmin-input-padding-y,
+		padding-left: 0,
+		padding-right: 0,
+		padding-top: $cadmin-input-padding-y,
+		text-overflow: ellipsis,
+		width: 100%,
+	),
+	$cadmin-input-plaintext
+);
+
 // Deprecated
 
 $cadmin-input-height-border: calc(

diff --git a/packages/clay-css/src/scss/cadmin/variables/_multi-step-nav.scss b/packages/clay-css/src/scss/cadmin/variables/_multi-step-nav.scss
@@ -48,6 +48,24 @@ $cadmin-multi-step-title-font-weight: $cadmin-font-weight-semi-bold !default;
 $cadmin-multi-step-title-margin-bottom: 10px !default; // 10px
 $cadmin-multi-step-title-max-width: 100px !default;
 
+$cadmin-multi-step-title-center: () !default;
+$cadmin-multi-step-title-center: map-deep-merge(
+	(
+		multi-step-title: (
+			margin-left: calc(#{$cadmin-multi-step-icon-size} * 0.5),
+			max-width: $cadmin-multi-step-title-max-width,
+			overflow: hidden,
+			position: relative,
+			text-align: center,
+			text-overflow: ellipsis,
+			transform: translateX(-50%),
+			white-space: nowrap,
+			width: auto,
+		),
+	),
+	$cadmin-multi-step-title-center
+);
+
 $cadmin-multi-step-item-margin-bottom: 10px !default;
 $cadmin-multi-step-item-width: 75px !default;
 $cadmin-multi-step-item-fixed-width: 150px !default;

diff --git a/packages/clay-css/src/scss/cadmin/variables/_navbar.scss b/packages/clay-css/src/scss/cadmin/variables/_navbar.scss
@@ -15,6 +15,19 @@ $cadmin-navbar-title-text-transform: null !default;
 $cadmin-navbar-text-truncate-spacer-right: 25px !default; // 25px
 $cadmin-navbar-text-truncate-max-width: 200px !default; // 200px
 
+$cadmin-navbar-text-truncate: () !default;
+$cadmin-navbar-text-truncate: map-deep-merge(
+	(
+		display: inline-block,
+		max-width: 100%,
+		overflow: hidden,
+		text-overflow: ellipsis,
+		vertical-align: bottom,
+		white-space: nowrap,
+	),
+	$cadmin-navbar-text-truncate
+);
+
 // Navbar Brand
 
 $cadmin-navbar-brand-font-size: $cadmin-font-size-lg !default;

diff --git a/packages/clay-css/src/scss/cadmin/variables/_tables.scss b/packages/clay-css/src/scss/cadmin/variables/_tables.scss
@@ -202,7 +202,7 @@ $cadmin-table-title-link: map-deep-merge(
 	(
 		border-radius: 1px,
 		color: $cadmin-gray-900,
-		display: inline-block,
+		display: inline-flex,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
 		hover: (
@@ -223,7 +223,7 @@ $cadmin-table-link: map-deep-merge(
 	(
 		border-radius: 1px,
 		color: $cadmin-gray-900,
-		display: inline-block,
+		display: inline-flex,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
 		hover: (
@@ -641,7 +641,7 @@ $cadmin-table-list-title-link: map-deep-merge(
 	(
 		border-radius: 1px,
 		color: $cadmin-gray-900,
-		display: inline-block,
+		display: inline-flex,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
 		hover: (
@@ -662,7 +662,7 @@ $cadmin-table-list-link: map-deep-merge(
 	(
 		border-radius: 1px,
 		color: $cadmin-gray-900,
-		display: inline-block,
+		display: inline-flex,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
 		hover: (