Merge pull request #15665 from craftcms/a11y/core-updates

A11y/core updates

CHANGELOG-WIP.md

@@ -5,10 +5,18 @@
 - Elements within element selection inputs now have “Replace” actions.
 - Address index tables can now include “Country” columns.
 
+### Accessibility
+- Improved the control panel for screen readers. ([#15665](https://github.com/craftcms/cms/pull/15665))
+- Improved keyboard control. ([#15665](https://github.com/craftcms/cms/pull/15665))
+- Improved the color contrast of required field indicators. ([#15665](https://github.com/craftcms/cms/pull/15665))
+
 ### Administration
 - All relation fields can now be selected as field layouts’ thumbnail providers. ([#15651](https://github.com/craftcms/cms/discussions/15651))
 - Added the “Markdown” field layout UI element type. ([#15674](https://github.com/craftcms/cms/pull/15674), [#15664](https://github.com/craftcms/cms/discussions/15664))
 
 ### Extensibility
 - Added `craft\base\RequestTrait::getIsWebRequest()`. ([#15690](https://github.com/craftcms/cms/pull/15690))
 - Added `craft\helpers\StringHelper::firstLine()`.
+
+### System
+- Fixed a bug where the Recovery Codes slideout content overflowed its container on small screens. ([#15665](https://github.com/craftcms/cms/pull/15665))

src/templates/_special/image_editor.twig

@@ -29,8 +29,8 @@
         </div>
 
         <fieldset class="orientation" aria-label="{{ 'Orientation'|t('app') }}">
-            <input type="radio" aria-label="{{ 'Landscape'|t }}" name="orientation" value="landscape" checked/>
-            <input type="radio" aria-label="{{ 'Portrait'|t }}"  name="orientation" value="portrait"/>
+            <input type="radio" aria-label="{{ 'Landscape'|t('app') }}" name="orientation" value="landscape" checked/>
+            <input type="radio" aria-label="{{ 'Portrait'|t('app') }}"  name="orientation" value="portrait"/>
         </fieldset>
 
         {% set constraintOptions = [] %}

src/templates/assets/_previews/image.twig

@@ -25,6 +25,7 @@
 {% do view.registerTranslations('app', [
     'Enable focal point',
     'Disable focal point',
+    'Saved',
     'Saving…',
 ]) %}
 

src/translations/en/app.php

@@ -1114,6 +1114,7 @@
     'Organization' => 'Organization',
     'Orientation' => 'Orientation',
     'Origin' => 'Origin',
+    'Original' => 'Original',
     'Our site is temporarily unavailable. Please try again later.' => 'Our site is temporarily unavailable. Please try again later.',
     'Overview' => 'Overview',
     'PHP Info' => 'PHP Info',
@@ -1361,6 +1362,7 @@
     'Save the “{section}” entry' => 'Save the “{section}” entry',
     'Save {type}' => 'Save {type}',
     'Save' => 'Save',
+    'Saved' => 'Saved',
     'Saved {timestamp} by {creator}' => 'Saved {timestamp} by {creator}',
     'Saved {timestamp}' => 'Saved {timestamp}',
     'Saving' => 'Saving',
@@ -1493,6 +1495,7 @@
     'Source settings' => 'Source settings',
     'Source' => 'Source',
     'Sources' => 'Sources',
+    'Square' => 'Square',
     'Square SVG file recommended. The logo will be displayed at {size} by {size}.' => 'Square SVG file recommended. The logo will be displayed at {size} by {size}.',
     'Stack Trace' => 'Stack Trace',
     'State' => 'State',
@@ -1760,6 +1763,7 @@
     'Unable to initiate an auth request.' => 'Unable to initiate an auth request.',
     'Unauthorized' => 'Unauthorized',
     'Uncheck for {offLabel}.' => 'Uncheck for {offLabel}.',
+    'Unconstrained' => 'Unconstrained',
     'Underline links' => 'Underline links',
     'Undo' => 'Undo',
     'Unformatted' => 'Unformatted',

src/web/assets/authmethodsetup/src/css/auth.scss

@@ -61,6 +61,7 @@
   justify-content: center;
   align-items: center;
   gap: var(--s);
+  text-align: center;
 
   .auth-method-setup-success-graphic {
     width: 50px;
@@ -84,20 +85,12 @@
 }
 
 ul.auth-method-recovery-codes-list {
-  --width: 12em;
-  --gap: var(--s);
-  display: grid;
-  width: calc(var(--width) * 2 + var(--gap));
-  margin-block: 0;
-  margin-inline: auto;
-  gap: var(--gap) !important;
-  grid-template-columns: var(--width) var(--width);
-  grid-template-rows: auto auto auto auto auto;
-  grid-auto-flow: column;
   @include fixed-width-font;
+  max-width: 20em;
+  margin-inline: auto;
 
-  li {
-    text-align: center;
+  @container (min-width: 20em) {
+    columns: 2;
   }
 }
 

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

@@ -1208,7 +1208,7 @@ input.checkbox + label.smalltext {
   margin-inline: 5px 0;
   margin-block: -2px 0;
   font-size: 12px;
-  color: var(--rose-500);
+  color: var(--rose-600);
 }
 
 .scrollpane {

src/web/assets/cp/src/js/BaseElementIndex.js

@@ -81,6 +81,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
     $actionsContainer: null,
     $actionMenuBtn: null,
     page: 1,
+    prevPage: null,
     resultSet: null,
     totalResults: null,
     totalUnfilteredResults: null,
@@ -1636,6 +1637,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
         }
 
         if (preservePagination !== true) {
+          this.prevPage = null;
           this.setPage(1);
         }
 
@@ -3198,6 +3200,18 @@ Craft.BaseElementIndex = Garnish.Base.extend(
                 title: Craft.t('app', 'Next Page'),
               }).appendTo($paginationNav);
 
+              // Choose pagination button to focus based on user behavior
+              if (this.prevPage) {
+                let $btnToFocus =
+                  this.prevPage > this.page ? $prevBtn : $nextBtn;
+
+                if ($btnToFocus.attr('disabled') === 'disabled') {
+                  $btnToFocus = Garnish.firstFocusableElement($paginationNav);
+                }
+
+                $btnToFocus.focus();
+              }
+
               $('<div/>', {
                 class: 'page-info',
                 text: countLabel,
@@ -3207,6 +3221,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
                 this.addListener($prevBtn, 'click', function () {
                   this.removeListener($prevBtn, 'click');
                   this.removeListener($nextBtn, 'click');
+                  this.prevPage = this.page;
                   this.setPage(this.page - 1);
                   this.updateElements(true);
                 });
@@ -3216,6 +3231,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
                 this.addListener($nextBtn, 'click', function () {
                   this.removeListener($prevBtn, 'click');
                   this.removeListener($nextBtn, 'click');
+                  this.prevPage = this.page;
                   this.setPage(this.page + 1);
                   this.updateElements(true);
                 });

src/web/assets/cp/src/js/BaseElementSelectorModal.js

@@ -193,23 +193,25 @@ Craft.BaseElementSelectorModal = Garnish.Modal.extend(
       Garnish.uiLayerManager.addLayer(this.$sidebar);
       Garnish.uiLayerManager.registerShortcut(Garnish.ESC_KEY, () => {
         this.closeSidebar();
-
-        // If the focus is currently inside the sidebar, refocus the toggle
-        const $focusedEl = Garnish.getFocusedElement();
-        if ($.contains(this.$sidebar.get(0), $focusedEl.get(0)))
-          this.$sidebarToggleBtn.focus();
       });
     },
 
     closeSidebar: function () {
       if (!this.$sidebarToggleBtn) return;
 
+      // Remove the sidebar layer when applicable
       if (this.sidebarIsOpen()) {
         Garnish.uiLayerManager.removeLayer();
-        this.$sidebar.addClass('hidden');
-        this.$sidebarToggleBtn.attr('aria-expanded', 'false');
       }
 
+      this.$sidebar.addClass('hidden');
+      this.$sidebarToggleBtn.attr('aria-expanded', 'false');
+
+      // If the focus is currently inside the sidebar, refocus the toggle
+      const $focusedEl = Garnish.getFocusedElement();
+      if ($.contains(this.$sidebar.get(0), $focusedEl.get(0)))
+        this.$sidebarToggleBtn.focus();
+
       this.$body.removeClass('has-sidebar');
       this.$content.removeClass('has-sidebar');
     },

src/web/assets/cp/src/js/CP.js

@@ -982,7 +982,11 @@ Craft.CP = Garnish.Base.extend(
      * @param {string} message
      */
     announce: function (message) {
-      if (!message || !this.$activeLiveRegion) {
+      if (
+        !message ||
+        !this.$activeLiveRegion ||
+        !document.contains(this.$activeLiveRegion[0])
+      ) {
         console.warn('There was an error announcing this message.');
         return;
       }

src/web/assets/cp/src/js/ElementEditor.js

@@ -137,10 +137,6 @@ Craft.ElementEditor = Garnish.Base.extend(
       this.$statusIcon = $('<div/>', {
         class: `revision-status ${this.isFullPage ? 'invisible' : 'hidden'}`,
       }).appendTo($spinnerContainer);
-      this.$statusMessage = $('<div/>', {
-        class: 'revision-status-message visually-hidden',
-        'aria-live': 'polite',
-      }).appendTo($spinnerContainer);
 
       this.$expandSiteStatusesBtn = $('.expand-status-btn');
 
@@ -822,10 +818,6 @@ Craft.ElementEditor = Garnish.Base.extend(
       return this.$statusIcon;
     },
 
-    statusMessage: function () {
-      return this.$statusMessage;
-    },
-
     createEditMetaAction: function () {
       if (!this.isFullPage) {
         return;
@@ -1295,9 +1287,6 @@ Craft.ElementEditor = Garnish.Base.extend(
           .removeClass('hidden invisible checkmark-icon alert-icon fade-out')
           .addClass('hidden');
 
-        // Clear previous status message
-        this.statusMessage().empty();
-
         if (this.$saveMetaBtn) {
           this.$saveMetaBtn.addClass('active');
         }
@@ -1888,14 +1877,7 @@ Craft.ElementEditor = Garnish.Base.extend(
 
     setStatusMessage: function (message) {
       this.statusIcons().attr('title', message);
-      this.statusMessage()
-        .empty()
-        .append(
-          $('<span/>', {
-            class: 'visually-hidden',
-            text: message,
-          })
-        );
+      Craft.cp.announce(message);
     },
 
     showMetaModal: function () {

src/web/assets/cp/src/js/PreviewFileModal.js

@@ -10,6 +10,7 @@ Craft.PreviewFileModal = Garnish.Modal.extend(
     $triggerElement: null,
     $bumperButtonStart: null,
     $bumperButtonEnd: null,
+    $liveRegion: $('<span class="visually-hidden" role="status"></span>'),
     elementSelect: null,
     type: null,
     loaded: null,
@@ -167,6 +168,10 @@ Craft.PreviewFileModal = Garnish.Modal.extend(
       this.$container.attr('aria-labelledby', headingId);
     },
 
+    _addLiveRegion: function () {
+      this.$container.append(this.$liveRegion);
+    },
+
     /**
      * @deprecated
      */
@@ -274,6 +279,7 @@ Craft.PreviewFileModal = Garnish.Modal.extend(
           this.$container.attr('data-asset-id', this.assetId);
           this.$container.append(response.data.previewHtml);
           this._addBumperButtons();
+          this._addLiveRegion();
           this._addModalName();
           await Craft.appendHeadHtml(response.data.headHtml);
           await Craft.appendBodyHtml(response.data.bodyHtml);