Merge pull request #14571 from craftcms/feature/accessibility-improve…

…ments

Accessibility improvements

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- Improved accessibility throughout the control panel. ([#14571](https://github.com/craftcms/cms/pull/14571))
 - The `relatedTo.field` element query param now must be set to the original field’s handle, rather than the overridden instance handle.
 - Added `craft\fieldlayoutelements\CustomField::getOriginalHandle()`.
 - Fixed a bug where navigating back after creating an entry or applying a draft would return a 404 error. ([#14587](https://github.com/craftcms/cms/issues/14587))

packages/craftcms-sass/_mixins.scss

@@ -635,8 +635,8 @@ $menuBorderRadius: $mediumBorderRadius;
 }
 
 @mixin menu-item-active-styles {
-  color: $menuOptionActiveColor;
-  background-color: $menuOptionActiveBackgroundColor;
+  color: var(--white);
+  background-color: var(--dark-sel-color);
 }
 
 @mixin disclosure-link-hover-styles {

src/templates/_components/auth/methods/TOTP/form.twig

@@ -6,12 +6,14 @@
   {% embed '_includes/forms/field.twig' with {
     fieldClass: 'first',
     label: 'Verification Code'|t('app'),
+    id: 'verification-code',
   } %}
     {% block input %}
       {% import '_includes/forms.twig' as forms %}
       <div class="flex flex-nowrap">
         {{ forms.text({
           class: 'code auth-totp-code',
+          id: 'verification-code',
           maxlength: 6,
         }) }}
         {{ forms.submitButton({

src/templates/_components/auth/methods/TOTP/setup.twig

@@ -15,18 +15,23 @@
 - [Bitwarden](https://bitwarden.com/) ({{ 'all platforms and browsers'|t('app') }})
 
 ## {{ 'Step {number}:'|t('app', {number: 2}) }} {{ 'Create a one-time password.'|t('app') }}
-{{ 'Within the app, create a new time-based one-time password (TOTP) for this site. Scan the QR code or enter the key below when prompted.'|t('app') }}
+{{ 'Within the app, create a new time-based one-time password (TOTP) for this site. Scan the **QR code** or enter the **setup key** below when prompted.'|t('app') }}
   {% endapply %}
 </div>
 
 <div class="pane">
   {% if (qrCode is defined and qrCode is not empty) or (secret is defined and secret is not empty) %}
     {% if qrCode is defined and qrCode is not empty %}
-      {{ qrCode|raw }}
+      <div class="field">
+        <div class="heading"><strong>{{ 'QR Code' | t('app') }}</strong></div>
+        {{ qrCode|raw }}
+      </div>
     {% endif %}
     {% if secret is defined and secret is not empty %}
       <div class="mt-m">
-        {{ forms.copytext({
+        {{ forms.copyTextField({
+          label: 'Setup Key' | t('app'),
+          name: 'setup-key',
           class: 'code',
           value: secret,
         }) }}

src/templates/_elements/toolbar.twig

@@ -36,7 +36,7 @@
                 {% endif %}
             </ul>
             {% if isAdministrative %}
-                {% if showStatusMenu %}<hr class="padded">{% endif %}
+                {% if showStatusMenu %}<hr class="padded" role="presentation">{% endif %}
                 <ul class="padded">
                     {% if canHaveDrafts ?? false %}
                         <li><a data-drafts><span class="icon" data-icon="draft" aria-hidden="true"></span>{{ 'Drafts'|t('app') }}</a></li>

src/translations/en/app.php

@@ -1078,6 +1078,7 @@
     'Offline' => 'Offline',
     'One of {name}’s migrations failed.' => 'One of {name}’s migrations failed.',
     'One update available!' => 'One update available!',
+    'One-time password QR code' => 'One-time password QR code',
     'Online' => 'Online',
     'Only allow {type} to be selected if they match the following rules:' => 'Only allow {type} to be selected if they match the following rules:',
     'Only one source is allowed when relating ancestors.' => 'Only one source is allowed when relating ancestors.',
@@ -1357,6 +1358,7 @@
     'Search plugins' => 'Search plugins',
     'Search' => 'Search',
     'Seconds' => 'Seconds',
+    'Setup Key' => 'Setup Key',
     'Section - {section}' => 'Section - {section}',
     'Section Type' => 'Section Type',
     'Section saved.' => 'Section saved.',
@@ -1906,7 +1908,7 @@
     'Widget settings' => 'Widget settings',
     'Width unit' => 'Width unit',
     'Width' => 'Width',
-    'Within the app, create a new time-based one-time password (TOTP) for this site. Scan the QR code or enter the key below when prompted.' => 'Within the app, create a new time-based one-time password (TOTP) for this site. Scan the QR code or enter the key below when prompted.',
+    'Within the app, create a new time-based one-time password (TOTP) for this site. Scan the **QR code** or enter the **setup key** below when prompted.' => 'Within the app, create a new time-based one-time password (TOTP) for this site. Scan the **QR code** or enter the **setup key** below when prompted.',
     'Years' => 'Years',
     'Yellow' => 'Yellow',
     'Yes' => 'Yes',

src/web/assets/cp/src/css/_cp.scss

@@ -800,6 +800,7 @@ li.breadcrumb-toggle-wrapper {
       display: grid;
       grid-template-columns: 20px 1fr;
       gap: var(--s);
+      width: 100%;
 
       .notification-message {
         font-weight: bold;

src/web/assets/cp/src/css/_global-sidebar.scss

@@ -124,11 +124,11 @@
 
 .nav-item__subnav {
   --prefix-ratio: 4/3;
-  @include visually-hidden;
+  display: none;
   grid-area: subnav;
 
   &[data-state='expanded'] {
-    @include not-visually-hidden;
+    display: block;
   }
 }
 

src/web/assets/cp/src/css/_main.scss

@@ -6425,7 +6425,7 @@ $min2ColWidth: 400px;
         a,
         .menu-item,
         .menu-option {
-          @include padding-left(calc(var(--m) + 18rem / 16));
+          padding-inline-start: calc(var(--m) + 18rem / 16);
 
           &.sel {
             &:not([data-icon]):before {
@@ -6434,7 +6434,7 @@ $min2ColWidth: 400px;
               font-size: 14px;
               width: 14px;
               content: 'check';
-              color: var(--ui-control-color);
+              color: currentColor;
               margin-top: 3px !important;
             }
           }
@@ -6543,7 +6543,7 @@ $min2ColWidth: 400px;
       top: -2px;
       text-align: center;
       font-size: 14px;
-      color: var(--ui-control-color);
+      color: currentColor;
     }
 
     span.icon:not([data-icon]) svg {
@@ -6568,20 +6568,31 @@ $min2ColWidth: 400px;
   }
 }
 
-.menu:not(.menu--disclosure) ul li a:not(.sel):not(.disabled):hover,
+/* prettier-ignore */
+.menu:not(.menu--disclosure) ul li a:not(.disabled):hover,
 .menu:not(.menu--disclosure) ul li .menu-item:not(.sel):not(.disabled):hover,
 .menu:not(.menu--disclosure) ul li .menu-option:not(.sel):not(.disabled):hover,
-.menu:not(.menu--disclosure):not(:hover) ul li a:not(.sel):not(.disabled).hover,
-.menu:not(.menu--disclosure):not(:hover)
-  ul
-  li
-  .menu-item:not(.sel):not(.disabled).hover,
-.menu:not(.menu--disclosure):not(:hover)
-  ul
-  li
-  .menu-option:not(.sel):not(.disabled).hover {
+.menu:not(.menu--disclosure):not(:hover) ul li a:not(.disabled).hover,
+.menu:not(.menu--disclosure):not(:hover) ul li .menu-item:not(.sel):not(.disabled).hover,
+.menu:not(.menu--disclosure):not(:hover) ul li .menu-option:not(.sel):not(.disabled).hover {
   @include menu-item-active-styles;
+
+  // Pretty gnarly, but needs to override the default hover styles with this selector
+  .status:not(.on):not(.live):not(.active):not(.enabled):not(.all) {
+    &:not(.pending):not(.warning):not(.off):not(.suspended):not(.expired) {
+      &:not(.light):not(.gray):not(.red):not(.orange):not(.amber):not(.yellow) {
+        &:not(.lime):not(.green):not(.emerald):not(.teal):not(.cyan):not(.sky) {
+          &:not(.blue):not(.indigo):not(.violet):not(.purple):not(.fuchsia) {
+            &:not(.pink):not(.rose):not(.grey):not(.black) {
+              border-color: currentColor;
+            }
+          }
+        }
+      }
+    }
+  }
 }
+
 .menu {
   hr.padded,
   .h6.padded,

src/web/assets/garnish/src/Garnish.js

@@ -310,14 +310,17 @@ Garnish = $.extend(Garnish, {
   hideModalBackgroundLayers: function () {
     const topmostLayer = Garnish.uiLayerManager.currentLayer.$container.get(0);
 
-    Garnish.$bod.children().each(function () {
-      // If element is modal or already has jsAria class, do nothing
-      if (Garnish.hasJsAriaClass(this) || this === topmostLayer) return;
-
-      if (!Garnish.isScriptOrStyleElement(this)) {
-        Garnish.ariaHide(this);
-      }
-    });
+    Garnish.$bod
+      .children()
+      .not('#notifications')
+      .each(function () {
+        // If element is modal or already has jsAria class, do nothing
+        if (Garnish.hasJsAriaClass(this) || this === topmostLayer) return;
+
+        if (!Garnish.isScriptOrStyleElement(this)) {
+          Garnish.ariaHide(this);
+        }
+      });
   },
 
   /**