A11y: Remove redundant styles (#65409)

* Remove redundant CSS styles and spaces

* Improve container `ariaLive` parameter type

* Use empty string to set boolean attribute

This is a minimal way of setting the `hidden` attribute.

From MDN:

> The hidden attribute is used to indicate that the content of an element should not be presented to the user. This attribute can take any one of the following values:
>
> - an empty string
> - the keyword hidden
> - the keyword until-found
>
> An empty string, or the keyword hidden, set the element to the hidden state. Additionally, invalid values set the element to the hidden state.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

---------

Co-authored-by: sirreal <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: kevin940726 <[email protected]>
Co-authored-by: colorful-tones <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: joedolson <[email protected]>
Co-authored-by: getdave <[email protected]>

Author: 7 people

packages/a11y/src/script/add-container.js

@@ -1,7 +1,7 @@
 /**
  * Build the live regions markup.
  *
- * @param {string} [ariaLive] Value for the 'aria-live' attribute; default: 'polite'.
+ * @param {'polite'|'assertive'} [ariaLive] Value for the 'aria-live' attribute; default: 'polite'.
  *
  * @return {HTMLDivElement} The ARIA live region HTML element.
  */
@@ -12,17 +12,15 @@ export default function addContainer( ariaLive = 'polite' ) {
 
 	container.setAttribute(
 		'style',
-		'position: absolute;' +
-			'margin: -1px;' +
-			'padding: 0;' +
-			'height: 1px;' +
-			'width: 1px;' +
-			'overflow: hidden;' +
-			'clip: rect(1px, 1px, 1px, 1px);' +
-			'-webkit-clip-path: inset(50%);' +
-			'clip-path: inset(50%);' +
-			'border: 0;' +
-			'word-wrap: normal !important;'
+		'position:absolute;' +
+			'margin:-1px;' +
+			'padding:0;' +
+			'height:1px;' +
+			'width:1px;' +
+			'overflow:hidden;' +
+			'clip-path:inset(50%);' +
+			'border:0;' +
+			'word-wrap:normal !important;'
 	);
 	container.setAttribute( 'aria-live', ariaLive );
 	container.setAttribute( 'aria-relevant', 'additions text' );

packages/a11y/src/script/add-intro-text.ts

@@ -20,19 +20,17 @@ export default function addIntroText() {
 
 	introText.setAttribute(
 		'style',
-		'position: absolute;' +
-			'margin: -1px;' +
-			'padding: 0;' +
-			'height: 1px;' +
-			'width: 1px;' +
-			'overflow: hidden;' +
-			'clip: rect(1px, 1px, 1px, 1px);' +
-			'-webkit-clip-path: inset(50%);' +
-			'clip-path: inset(50%);' +
-			'border: 0;' +
-			'word-wrap: normal !important;'
+		'position:absolute;' +
+			'margin:-1px;' +
+			'padding:0;' +
+			'height:1px;' +
+			'width:1px;' +
+			'overflow:hidden;' +
+			'clip-path:inset(50%);' +
+			'border:0;' +
+			'word-wrap:normal !important;'
 	);
-	introText.setAttribute( 'hidden', 'hidden' );
+	introText.setAttribute( 'hidden', '' );
 
 	const { body } = document;
 	if ( body ) {