General: Use legacy content properties for CSS icons.

In modern browsers the CSS content property provides alt text support for assistive technology in the form display / alt text. This introduces support for legacy browsers that do not support the new syntax.

CSS content properties take advantage of the CSS cascade and browsers ignoring values they don't understand by adding duplicate content properties in the form:

{{{#!css
content: display;
content: display / alt text;
Modern browsers will use the second property, legacy browsers will use the first.
}}}

Follow-up to [60885] for #63603.

Reviewed by wildworks, jorbin.
Merges [61480] to the 6.9 branch.

Props acmoifr, joedolson, jorbin, mydesign78, ov3rfly, peterwilsoncc, presskopp, sabernhardt, siliconforks, swissspidy, threadi, wildworks, wolf45.
Fixes #64350.



git-svn-id: https://develop.svn.wordpress.org/branches/6.9@61531 602fd350-edb4-49c9-b593-d223f7449a82

Author: aaronjorbin

src/js/_enqueues/vendor/thickbox/thickbox.css

@@ -134,6 +134,7 @@
 }
 
 .tb-close-icon:before {
+	content: "\f158";
 	content: "\f158" / '';
 	font: normal 20px/29px dashicons;
 	-webkit-font-smoothing: antialiased;

src/wp-admin/css/admin-menu.css

@@ -503,6 +503,7 @@ ul#adminmenu > li.current > a.current:after {
 }
 
 #collapse-button .collapse-button-icon:after {
+	content: "\f148";
 	content: "\f148" / '';
 	display: block;
 	position: relative;

src/wp-admin/css/colors/_admin.scss

@@ -68,6 +68,7 @@ span.wp-media-buttons-icon:before {
 /* Forms */
 
 input[type=checkbox]:checked::before {
+	content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour(variables.$form-checked)}%27%2F%3E%3C%2Fsvg%3E");
 	content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour(variables.$form-checked)}%27%2F%3E%3C%2Fsvg%3E") / '';
 }
 

src/wp-admin/css/common.css

@@ -559,6 +559,7 @@ code {
 }
 
 .js-update-details-toggle[aria-expanded="true"] .dashicons::before {
+	content: "\f142";
 	content: "\f142" / '';
 }
 
@@ -805,6 +806,7 @@ img.emoji {
 .notice-dismiss:before {
 	background: none;
 	color: #787c82;
+	content: "\f153";
 	content: "\f153" / '';
 	display: block;
 	font: normal 16px/20px dashicons;
@@ -1132,6 +1134,7 @@ th.action-links {
 }
 
 .wp-filter .drawer-toggle:before {
+	content: "\f111";
 	content: "\f111" / '';
 	margin: 0 5px 0 0;
 	color: #646970;
@@ -1524,6 +1527,7 @@ div.error {
 
 #plugin-information-footer .update-now:not(.button-disabled):before {
 	color: #d63638;
+	content: "\f463";
 	content: "\f463" / '';
 	display: inline-block;
 	font: normal 20px/1 dashicons;
@@ -1586,6 +1590,7 @@ div.error {
 .button.installing:before,
 .button.activating-message:before {
 	color: #d63638;
+	content: "\f463";
 	content: "\f463" / '';
 }
 
@@ -1622,12 +1627,14 @@ div.error {
 .button.updated-message:before,
 .button.activated-message:before {
 	color: #68de7c;
+	content: "\f147";
 	content: "\f147" / '';
 }
 
 /* Error icon. */
 .update-message.notice-error p:before {
 	color: #d63638;
+	content: "\f534";
 	content: "\f534" / '';
 }
 
@@ -1837,6 +1844,7 @@ p.auto-update-status {
 
 #screen-meta-links .show-settings:after {
 	right: 0;
+	content: "\f140";
 	content: "\f140" / '';
 	font: normal 20px/1 dashicons;
 	display: inline-block;
@@ -1850,6 +1858,7 @@ p.auto-update-status {
 }
 
 #screen-meta-links .screen-meta-active:after {
+	content: "\f142";
 	content: "\f142" / '';
 }
 
@@ -2671,10 +2680,12 @@ div.star-holder .star-rating {
 }
 
 .star-rating .star-full:before {
+	content: "\f155";
 	content: "\f155" / '';
 }
 
 .star-rating .star-half:before {
+	content: "\f459";
 	content: "\f459" / '';
 }
 
@@ -2683,6 +2694,7 @@ div.star-holder .star-rating {
 }
 
 .star-rating .star-empty:before {
+	content: "\f154";
 	content: "\f154" / '';
 }
 
@@ -3174,6 +3186,7 @@ div.action-links {
 }
 
 .plugin-details-modal #TB_closeWindowButton:after {
+	content: "\f335";
 	content: "\f335" / '';
 	font: normal 32px/29px 'dashicons';
 	-webkit-font-smoothing: antialiased;
@@ -3200,6 +3213,7 @@ img {
 .meta-box-sortables .postbox .order-lower-indicator::before,
 .bulk-action-notice .toggle-indicator::before,
 .privacy-text-box .toggle-indicator::before {
+	content: "\f142";
 	content: "\f142" / '';
 	display: inline-block;
 	font: normal 20px/1 dashicons;
@@ -3212,15 +3226,18 @@ img {
 .meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before,
 .bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before,
 .privacy-text-box.closed .toggle-indicator::before {
+	content: "\f140";
 	content: "\f140" / '';
 }
 
 .postbox .handle-order-higher .order-higher-indicator::before {
+	content: "\f343";
 	content: "\f343" / '';
 	color: inherit;
 }
 
 .postbox .handle-order-lower .order-lower-indicator::before {
+	content: "\f347";
 	content: "\f347" / '';
 	color: inherit;
 }
@@ -3344,9 +3361,11 @@ img {
 	pointer-events: none;
 }
 [role="treeitem"][aria-expanded="false"] > .folder-label .icon:after {
+	content: "\f139";
 	content: "\f139" / '';
 }
 [role="treeitem"][aria-expanded="true"] > .folder-label .icon:after {
+	content: "\f140";
 	content: "\f140" / '';
 }
 [role="treeitem"] .folder-label {
@@ -3562,6 +3581,7 @@ img {
 .wp-customizer .control-section .accordion-section-title:after,
 .wp-customizer .accordion-section-title:after,
 .widget-top .widget-action .toggle-indicator:before {
+	content: "\f140";
 	content: "\f140" / '';
 	font: normal 20px/1 dashicons;
 	display: block;
@@ -3610,6 +3630,7 @@ img {
 .nav-menus-php .menu-item-edit-active .item-edit:before,
 .widget.open .widget-top .widget-action .toggle-indicator:before,
 .widget.widget-in-question .widget-top .widget-action .toggle-indicator:before {
+	content: "\f142";
 	content: "\f142" / '';
 }
 

src/wp-admin/css/customize-controls.css

@@ -233,6 +233,7 @@ body.trashing #publish-settings {
 	display: inline-block;
 }
 #customize-control-trash_changeset .button-link:before {
+	content: "\f182";
 	content: "\f182" / '';
 	font: normal 22px dashicons;
 	text-decoration: none;
@@ -594,6 +595,7 @@ body.trashing #publish-settings {
 
 #customize-theme-controls .accordion-section-title:after,
 #customize-outer-theme-controls .accordion-section-title:after {
+	content: "\f345";
 	content: "\f345" / '';
 	color: #a7aaad;
 	pointer-events: none;
@@ -931,6 +933,7 @@ h3.customize-section-title {
 
 .customize-controls-close:before {
 	font: normal 22px/45px dashicons;
+	content: "\f335";
 	content: "\f335" / '';
 	position: relative;
 	top: -3px;
@@ -940,6 +943,7 @@ h3.customize-section-title {
 .customize-panel-back:before,
 .customize-section-back:before {
 	font: normal 20px/72px dashicons;
+	content: "\f341";
 	content: "\f341" / '';
 	position: relative;
 	left: 9px;
@@ -1026,6 +1030,7 @@ p.customize-section-description {
 
 .customize-section-description a.external-link:after {
 	font: 16px/11px dashicons;
+	content: "\f504";
 	content: "\f504" / '';
 	top: 3px;
 	position: relative;
@@ -1357,6 +1362,7 @@ p.customize-section-description {
 }
 
 .customize-control .dropdown-arrow:after {
+	content: "\f140";
 	content: "\f140" / '';
 	font: normal 20px/1 dashicons;
 	display: block;
@@ -1881,6 +1887,7 @@ p.customize-section-description {
 }
 
 .themes-filter-bar .feature-filter-toggle:before {
+	content: "\f111";
 	content: "\f111" / '';
 	margin: 0 5px 0 0;
 	font: normal 16px/1 dashicons;
@@ -2019,6 +2026,7 @@ p.customize-section-description {
 }
 
 .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
+	content: "\f147";
 	content: "\f147" / '';
 	font: 16px/1 dashicons;
 	box-sizing: border-box;
@@ -2522,6 +2530,7 @@ body.cheatin p {
 .add-new-widget:before,
 .add-new-menu-item:before,
 #available-menu-items .new-content-item .add-content:before {
+	content: "\f132";
 	content: "\f132" / '';
 	display: inline-block;
 	position: relative;
@@ -2601,11 +2610,13 @@ body.cheatin p {
 
 .move-widget-down:before,
 .menus-move-down:before {
+	content: "\f347";
 	content: "\f347" / '';
 }
 
 .move-widget-up:before,
 .menus-move-up:before {
+	content: "\f343";
 	content: "\f343" / '';
 }
 
@@ -2766,6 +2777,7 @@ body.adding-widget .add-new-widget:before,
 
 #available-widgets-filter .clear-results:before,
 #available-menu-items-search .clear-results:before {
+	content: "\f335";
 	content: "\f335" / '';
 	font: normal 20px/1 dashicons;
 	vertical-align: middle;
@@ -2977,13 +2989,15 @@ body.adding-widget .add-new-widget:before,
 	.customize-controls-preview-toggle .preview:before,
 	.customize-controls-preview-toggle .controls:before {
 		font: normal 20px/1 dashicons;
+		content: "\f177";
 		content: "\f177" / '';
 		position: relative;
 		top: 4px;
 		margin-right: 6px;
 	}
 
 	.customize-controls-preview-toggle .controls:before {
+		content: "\f540";
 		content: "\f540" / '';
 	}
 

src/wp-admin/css/customize-nav-menus.css

@@ -141,10 +141,12 @@
 }
 
 .menus-move-left:before {
+	content: "\f341";
 	content: "\f341" / '';
 }
 
 .menus-move-right:before {
+	content: "\f345";
 	content: "\f345" / '';
 }
 
@@ -177,6 +179,7 @@
 }
 
 .wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:before {
+	content: "\f142";
 	content: "\f142" / '';
 }
 
@@ -277,6 +280,7 @@
 .customize-screen-options-toggle:before {
 	-moz-osx-font-smoothing: grayscale;
 	border: none;
+	content: "\f111";
 	content: "\f111" / '';
 	display: block;
 	font: 18px/1 dashicons;
@@ -320,6 +324,7 @@
 
 .wp-customizer .menu-item .item-edit .toggle-indicator:before,
 #available-menu-items .accordion-section-title .toggle-indicator:before {
+	content: "\f140";
 	content: "\f140" / '';
 	display: block;
 	padding: 1px 2px 1px 0;
@@ -466,6 +471,7 @@
 }
 
 .menu-item-bar .item-delete:before {
+	content: "\f335";
 	content: "\f335" / '';
 	position: absolute;
 	top: 9px;
@@ -651,6 +657,7 @@
 }
 
 #available-menu-items .item-add:before {
+	content: "\f543";
 	content: "\f543" / '';
 	position: relative;
 	left: 2px;
@@ -669,6 +676,7 @@
 }
 
 #available-menu-items .menu-item-handle.item-added .item-add:before {
+	content: "\f147";
 	content: "\f147" / '';
 }