Changeset 57520

Timestamp:

02/02/2024 09:53:07 AM (14 months ago)

Author:

afercia

Message:

Administration: Accessibility: Use the default cursor style for labels and disabled form controls.

The native cursor style for labels and form controls is default, which is the platform-dependent default cursor. Typically an arrow. Historically, WordPress always used the pointer style for all form controls and labels. While this isn't standard, there is some value in using the pointer style for form controls. However, labels should use the default style especially when the associated controls are disabled.
Additionally, makes sure the disabled styling works for form controls with an aria-disabled="true" attribute.

Props joedolson, afercia.
Fixes #59733.

Location:

trunk/src

Files:

• wp-admin/css/forms.css (modified) (5 diffs)
• wp-admin/css/install.css (modified) (1 diff)
• wp-includes/css/buttons.css (modified) (2 diffs)

trunk/src/wp-admin/css/forms.css

@@ -21 +21 @@
     line-height: 1.42857143; /* 20px */
     resize: vertical;
-}
-
-label {
-    cursor: pointer;
 }
 
@@ -288 +284 @@
 input[type="file"]:disabled,
 input[type="file"].disabled,
+input[type="file"][aria-disabled="true"],
 input[type="range"]:disabled,
-input[type="range"].disabled {
+input[type="range"].disabled,
+input[type="range"][aria-disabled="true"] {
     background: none;
     box-shadow: none;
@@ -297 +295 @@
 input[type="checkbox"]:disabled,
 input[type="checkbox"].disabled,
+input[type="checkbox"][aria-disabled="true"],
 input[type="radio"]:disabled,
 input[type="radio"].disabled,
+input[type="radio"][aria-disabled="true"],
 input[type="checkbox"]:disabled:checked:before,
 input[type="checkbox"].disabled:checked:before,
@@ -304 +304 @@
 input[type="radio"].disabled:checked:before {
     opacity: 0.7;
+    cursor: default;
 }
 
@@ -357 +358 @@
 }
 
+.wp-core-ui select[aria-disabled="true"] {
+    cursor: default;
+}
+
 /* Reset Firefox inner outline that appears on :focus. */
 /* This ruleset overrides the color change on :focus thus needs to be after select:focus. */

trunk/src/wp-admin/css/install.css

@@ -71 +71 @@
     padding: 0;
     margin: 0;
-}
-
-label {
-    cursor: pointer;
 }
 

trunk/src/wp-includes/css/buttons.css

@@ -186 +186 @@
 }
 
+.wp-core-ui .button[aria-disabled="true"],
+.wp-core-ui .button-secondary[aria-disabled="true"] {
+    cursor: default;
+}
+
 /* Buttons that look like links, for a cross of good semantics with the visual */
 .wp-core-ui .button-link {
@@ -284 +289 @@
 }
 
+.wp-core-ui .button-primary[aria-disabled="true"] {
+    cursor: default;
+}
+
 /* ----------------------------------------------------------------------------
   4.0 - Button Groups