Add word-break property to screen reader only classes.

peterwilsoncc · peterwilsoncc · commit 18fbf1a5d794 · 2025-12-08T10:02:22.000+11:00
diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
@@ -129,7 +129,9 @@
 	padding: 0;
 	position: absolute;
 	width: 1px;
-	word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
+	 /* many screen reader and browser combinations announce broken words as they would appear visually */
+	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 .button .screen-reader-text {
diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css
@@ -356,7 +356,9 @@ body.language-chooser {
 	padding: 0;
 	position: absolute;
 	width: 1px;
+	/* many screen reader and browser combinations announce broken words as they would appear visually */
 	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 .spinner {
diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css
@@ -413,7 +413,9 @@ body.interim-login {
 	padding: 0;
 	position: absolute;
 	width: 1px;
-	word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
+	/* many screen reader and browser combinations announce broken words as they would appear visually */
+	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 /* Hide the Edge "reveal password" native button */
diff --git a/src/wp-content/themes/twentynineteen/sass/modules/_accessibility.scss b/src/wp-content/themes/twentynineteen/sass/modules/_accessibility.scss
@@ -8,7 +8,9 @@
 	padding: 0;
 	position: absolute !important;
 	width: 1px;
-	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+	/* many screen reader and browser combinations announce broken words as they would appear visually */
+	word-wrap: normal !important;
+	word-break: normal !important;
 
 	&:focus {
 		background-color: $color__background-screen;
diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css
@@ -311,7 +311,9 @@ template {
 	overflow: hidden;
 	position: absolute !important;
 	width: 1px;
-	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+	/* many screen reader and browser combinations announce broken words as they would appear visually */
+	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 .screen-reader-text:focus {
diff --git a/src/wp-content/themes/twentysixteen/style.css b/src/wp-content/themes/twentysixteen/style.css
@@ -1291,6 +1291,7 @@ a:active {
 	width: 1px;
 	/* many screen reader and browser combinations announce broken words as they would appear visually */
 	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 /* must have higher specificity than alternative color schemes inline styles */
diff --git a/src/wp-content/themes/twentytwenty/style.css b/src/wp-content/themes/twentytwenty/style.css
@@ -185,8 +185,9 @@ path {
 	padding: 0;
 	position: absolute !important;
 	width: 1px;
+	/* many screen reader and browser combinations announce broken words as they would appear visually */
 	word-wrap: normal !important;
-	word-break: normal;
+	word-break: normal !important;
 }
 
 .screen-reader-text:focus {
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss b/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss
@@ -7,8 +7,9 @@
 	padding: 0;
 	position: absolute !important;
 	width: 1px;
+	/* many screen reader and browser combinations announce broken words as they would appear visually */
 	word-wrap: normal !important;
-	word-break: normal;
+	word-break: normal !important;
 }
 
 .skip-link:focus {
diff --git a/src/wp-content/themes/twentytwentyone/style.css b/src/wp-content/themes/twentytwentyone/style.css
@@ -5528,8 +5528,9 @@ h1.page-title {
 	padding: 0;
 	position: absolute !important;
 	width: 1px;
+	/* many screen reader and browser combinations announce broken words as they would appear visually */
 	word-wrap: normal !important;
-	word-break: normal;
+	word-break: normal !important;
 }
 
 .skip-link:focus {
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
@@ -708,7 +708,9 @@ html:lang(he-il) .rtl #wpadminbar * {
 	padding: 0;
 	position: absolute;
 	width: 1px;
+	/* many screen reader and browser combinations announce broken words as they would appear visually */
 	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 #wpadminbar .screen-reader-shortcut {
@@ -800,7 +802,9 @@ html:lang(he-il) .rtl #wpadminbar * {
 		padding: 0;
 		position: absolute;
 		width: 1px;
+		/* many screen reader and browser combinations announce broken words as they would appear visually */
 		word-wrap: normal !important;
+		word-break: normal !important;
 	}
 
 	#wpadminbar .menupop li:hover > .ab-sub-wrapper,
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
@@ -2494,7 +2494,9 @@
 		width: 1px;
 		border: 0;
 		margin: -1px;
+		/* many screen reader and browser combinations announce broken words as they would appear visually */
 		word-wrap: normal !important;
+		word-break: normal !important;
 	}
 
 	/* Reveal the menu toggle button. */
diff --git a/src/wp-includes/css/wp-embed-template.css b/src/wp-includes/css/wp-embed-template.css
@@ -17,7 +17,9 @@ body {
 	padding: 0;
 	position: absolute;
 	width: 1px;
+	/* many screen reader and browser combinations announce broken words as they would appear visually */
 	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 /* Dashicons */
diff --git a/src/wp-includes/deprecated.php b/src/wp-includes/deprecated.php
@@ -6176,7 +6176,9 @@ function the_block_template_skip_link() {
 			padding: 0;
 			position: absolute !important;
 			width: 1px;
+			/* many screen reader and browser combinations announce broken words as they would appear visually */
 			word-wrap: normal !important;
+			word-break: normal !important;
 		}
 
 		.skip-link.screen-reader-text:focus {
diff --git a/src/wp-includes/theme-templates.php b/src/wp-includes/theme-templates.php
@@ -135,7 +135,9 @@ function wp_enqueue_block_template_skip_link() {
 			padding: 0;
 			position: absolute !important;
 			width: 1px;
+			/* many screen reader and browser combinations announce broken words as they would appear visually */
 			word-wrap: normal !important;
+			word-break: normal !important;
 		}
 
 		.skip-link.screen-reader-text:focus {

Original file line number	Diff line number	Diff line change
`@@ -356,7 +356,9 @@ body.language-chooser {`
`356`	`356`	`padding: 0;`
`357`	`357`	`position: absolute;`
`358`	`358`	`width: 1px;`
	`359`	`+ /* many screen reader and browser combinations announce broken words as they would appear visually */`
`359`	`360`	`word-wrap: normal !important;`
	`361`	`+ word-break: normal !important;`
`360`	`362`	`}`
`361`	`363`
`362`	`364`	`.spinner {`
Original file line number	Diff line number	Diff line change
`@@ -1291,6 +1291,7 @@ a:active {`
`1291`	`1291`	`width: 1px;`
`1292`	`1292`	`/* many screen reader and browser combinations announce broken words as they would appear visually */`
`1293`	`1293`	`word-wrap: normal !important;`
	`1294`	`+ word-break: normal !important;`
`1294`	`1295`	`}`
`1295`	`1296`
`1296`	`1297`	`/* must have higher specificity than alternative color schemes inline styles */`