Improve element stacking in modals on tablet and mobile (#35733)

* Add updated versions of sr-only and not-sr-only mixins

* Improve element stacking in modals on tablet and mobile

* Add comment suggestion

* Change sr-only for screen-reader-only which is more descriptive

packages/js/internal-style-build/abstracts/_mixins.scss

@@ -1,7 +1,7 @@
 // Rem output with px fallback
 @mixin font-size( $sizeValue: 16, $lineHeight: false ) {
 	font-size: $sizeValue + px;
-	font-size: math.div($sizeValue, 16) + rem;
+	font-size: math.div( $sizeValue, 16 ) + rem;
 	@if ( $lineHeight ) {
 		line-height: $lineHeight;
 	}
@@ -106,7 +106,7 @@
 	background-color: $studio-white;
 	color: $gray-900;
 	box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px $studio-white,
-		0 1px 1px rgba($gray-900, 0.2);
+		0 1px 1px rgba( $gray-900, 0.2 );
 }
 
 @mixin button-style__active() {
@@ -145,7 +145,6 @@
 }
 /* stylelint-enable */
 
-
 // Gutenberg Switch.
 @mixin switch-style__focus-active() {
 	box-shadow: 0 0 0 2px $studio-white, 0 0 0 3px $gray-700;
@@ -158,19 +157,20 @@
 // Sets positions for children of grid elements
 @mixin set-grid-item-position( $wrap-after, $number-of-items ) {
 	@for $i from 1 through $number-of-items {
-		&:nth-child(#{$i}) {
+		&:nth-child( #{$i} ) {
-			grid-column-start: #{($i - 1) % $wrap-after + 1};
+			grid-column-start: #{( $i - 1 ) % $wrap-after + 1};
-			grid-column-end: #{($i - 1) % $wrap-after + 2};
+			grid-column-end: #{( $i - 1 ) % $wrap-after + 2};
-			grid-row-start: #{floor(math.div($i - 1, $wrap-after)) + 1};
+			grid-row-start: #{floor( math.div( $i - 1, $wrap-after ) ) + 1};
-			grid-row-end: #{floor(math.div($i - 1, $wrap-after)) + 2};
+			grid-row-end: #{floor( math.div( $i - 1, $wrap-after ) ) + 2};
 		}
 	}
 }
 
 // Hide an element from sighted users, but availble to screen reader users.
+// @deprecated in favor of screen-reader-only
 @mixin visually-hidden() {
-	clip: rect(1px, 1px, 1px, 1px);
+	clip: rect( 1px, 1px, 1px, 1px );
-	clip-path: inset(50%);
+	clip-path: inset( 50% );
 	height: 1px;
 	width: 1px;
 	margin: -1px;
@@ -180,7 +180,20 @@
 	word-wrap: normal !important;
 }
 
+@mixin screen-reader-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect( 0, 0, 0, 0 );
+	white-space: nowrap;
+	border-width: 0;
+}
+
 // Unhide a visually hidden element
+// @deprecated in favor of not-screen-reader-only
 @mixin visually-shown() {
 	clip: auto;
 	clip-path: none;
@@ -190,6 +203,17 @@
 	overflow: hidden;
 }
 
+@mixin not-screen-reader-only {
+	position: static;
+	width: auto;
+	height: auto;
+	padding: 0;
+	margin: 0;
+	overflow: visible;
+	clip: auto;
+	white-space: normal;
+}
+
 // Create a string-repeat function
 @function str-repeat( $character, $n ) {
 	@if $n == 0 {

packages/js/internal-style-build/changelog/enhancement-35565

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Add updated versions of screen-reader-only and not-screen-reader-only mixins 

plugins/woocommerce-admin/client/products/fields/attribute-field/add-attribute-modal.scss

@@ -32,6 +32,12 @@
 		width: 100%;
 		margin-top: $gap-large;
 
+		@include breakpoint( '<782px' ) {
+			thead {
+				@include screen-reader-only();
+			}
+		}
+
 		th {
 			text-align: left;
 			color: $gray-700;
@@ -54,10 +60,39 @@
 		td:not(:last-child) {
 			margin-right: $gap;
 		}
+
+		@include breakpoint( '<782px' ) {
+			position: relative;
+			grid-template-columns: 1fr;
+			// Added the width of the trash icon as padding
+			// so that it can be displayed correctly
+			padding-right: 42px;
+		}
+
+		@include breakpoint( '>782px' ) {
+			.woocommerce-experimental-select-control__label {
+				@include screen-reader-only();
+			}
+			.woocommerce-experimental-select-control__combo-box-wrapper {
+				margin-bottom: 0;
+			}
+		}
 	}
 
 	&__table-attribute-trash-column {
 		display: flex;
 		justify-content: center;
+
+		@include breakpoint( '<782px' ) {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			align-items: center;
+		}
+
+		.components-button.has-icon {
+			padding: 8px;
+		}
 	}
 }

plugins/woocommerce-admin/client/products/fields/attribute-field/add-attribute-modal.tsx

@@ -124,6 +124,9 @@ export const AddAttributeModal: React.FC< AddAttributeModalProps > = ( {
 		}
 	};
 
+	const attributeLabel = __( 'Attribute', 'woocommerce' );
+	const valueLabel = __( 'Values', 'woocommerce' );
+
 	return (
 		<>
 			<Form< AttributeForm >
@@ -167,8 +170,8 @@ export const AddAttributeModal: React.FC< AddAttributeModalProps > = ( {
 								<table className="woocommerce-add-attribute-modal__table">
 									<thead>
 										<tr className="woocommerce-add-attribute-modal__table-header">
-											<th>Attribute</th>
+											<th>{ attributeLabel }</th>
-											<th>Values</th>
+											<th>{ valueLabel }</th>
 										</tr>
 									</thead>
 									<tbody>
@@ -185,6 +188,9 @@ export const AddAttributeModal: React.FC< AddAttributeModalProps > = ( {
 																'woocommerce'
 															) }
 															value={ attribute }
+															label={
+																attributeLabel
+															}
 															onChange={ (
 																val
 															) => {
@@ -246,6 +252,9 @@ export const AddAttributeModal: React.FC< AddAttributeModalProps > = ( {
 																		? []
 																		: attribute.terms
 																}
+																label={
+																	valueLabel
+																}
 																onChange={ (
 																	val
 																) =>
@@ -269,6 +278,9 @@ export const AddAttributeModal: React.FC< AddAttributeModalProps > = ( {
 																value={
 																	attribute.options
 																}
+																label={
+																	valueLabel
+																}
 																onChange={ (
 																	val
 																) =>

plugins/woocommerce/changelog/enhancement-35565

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Improve element stacking in modals on tablet and mobile