More quick a11y updates

CHANGELOG-WIP.md

@@ -12,6 +12,7 @@
 ### Changed
 - Redesigned user notifications. ([#11612](https://github.com/craftcms/cms/pull/11612))
 - Most element notifications now include a link to the element. ([#11612](https://github.com/craftcms/cms/pull/11612))
+- Improved overall control panel accessibility. ([#11563](https://github.com/craftcms/cms/pull/11563))
 - Improved condition builder accessibility. ([#11588](https://github.com/craftcms/cms/pull/11588))
 - The “Keep me signed in” checkbox label on the control panel’s login page now includes the remembered session duration, e.g. “Keep me signed in for 2 weeks”. ([#11594](https://github.com/craftcms/cms/discussions/11594))
 - Dashboard widgets no longer show a confirmation dialog when deleted. Their delete notifications include an “Undo” button instead. ([#11573](https://github.com/craftcms/cms/discussions/11573))

src/base/Element.php

@@ -4527,7 +4527,10 @@ public function getMetadata(): array
                     return false;
                 }
                 if ($this->getIsUnpublishedDraft()) {
-                    $icon = Html::tag('span', '', ['data' => ['icon' => 'draft']]);
+                    $icon = Html::tag('span', '', [
+                        'data' => ['icon' => 'draft'],
+                        'aria' => ['hidden' => 'true'],
+                    ]);
                     $label = Craft::t('app', 'Draft');
                 } else {
                     $status = $this->getStatus();

src/elements/Asset.php

@@ -1090,6 +1090,9 @@ public function getAdditionalButtons(): string
             'data' => [
                 'icon' => 'download',
             ],
+            'aria' => [
+                'label' => Craft::t('app', 'Download'),
+            ],
         ]);
 
         $js = <<<JS

src/templates/_includes/revisionmenu.twig

@@ -63,6 +63,12 @@
 {% set showMenu = editableSiteIds|length > 1 or showRevisions %}
 
 <div class="context-btngroup btngroup">
+    {% tag 'label' with {
+        class: 'visually-hidden',
+        id: 'context-label',
+    } %}
+        {{ 'Context'|t('app') }}
+    {% endtag %}
     {% tag 'button' with {
         type: 'button',
         class: [
@@ -74,6 +80,9 @@
         data: {
             icon: showSiteLabel ? 'world' : null,
         },
+        aria: {
+            'labelledby': 'context-label',
+        }
     } %}
         {%- if showSiteLabel %}
             {{- originalElement.getSite().name|t('site') }}

src/templates/settings/categories/index.twig

@@ -11,7 +11,8 @@
 ]) %}
 
 {% block actionButton %}
-    <a href="{{ url('settings/categories/new') }}" class="btn submit add icon">{{ "New category group"|t('app') }}</a>
+    {% set buttonLabel = "New category group"|t('app') %}
+    <a href="{{ url('settings/categories/new') }}" class="btn submit add icon" aria-label="{{ buttonLabel }}">{{ buttonLabel }}</a>
 {% endblock %}
 
 {% set crumbs = [

src/translations/en/app.php

@@ -304,6 +304,7 @@
     'Connecting to CraftCMS.com…' => 'Connecting to CraftCMS.com…',
     'Content' => 'Content',
     'Contents of {path}' => 'Contents of {path}',
+    'Context' => 'Context',
     'Continue anyway' => 'Continue anyway',
     'Continue shopping' => 'Continue shopping',
     'Continue' => 'Continue',

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

@@ -838,7 +838,6 @@ li.breadcrumb-toggle-wrapper {
 #global-header,
 #header {
   .flex {
-    flex-wrap: nowrap;
     max-width: 100%;
 
     &.flex-nowrap {
@@ -959,10 +958,6 @@ li.breadcrumb-toggle-wrapper {
   }
 }
 
-#action-buttons {
-  height: 34px;
-}
-
 #main-content {
   display: flex;
   flex-direction: row;

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

@@ -1562,6 +1562,7 @@ ul.icons {
     .text {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
+      min-width: 0;
     }
     .btn {
       border-top-left-radius: 0;
@@ -6157,7 +6158,7 @@ body .selectize-dropdown {
   height: 34px;
 
   &:not(.fullwidth) {
-    width: 25em;
+    max-width: 25em;
   }
 }
 

src/web/assets/cp/src/js/AssetIndex.js

@@ -870,7 +870,7 @@ Craft.AssetIndex = Craft.BaseElementIndex.extend({
           }
         );
       } else {
-        this.$includeSubfoldersContainer.velocity('stop');
+        this.$includeSubfoldersContainer.velocity('stop').removeClass('hidden');
       }
 
       var checked = this.getSelectedSourceState('includeSubfolders', false);
@@ -899,7 +899,12 @@ Craft.AssetIndex = Craft.BaseElementIndex.extend({
           marginBottom: -25,
           opacity: 0,
         },
-        'fast'
+        {
+          duration: 'fast',
+          complete: () => {
+            this.$includeSubfoldersContainer.addClass('hidden');
+          },
+        }
       );
 
       this.showingIncludeSubfoldersCheckbox = false;

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

@@ -76,6 +76,7 @@ Craft.BaseElementSelectorModal = Garnish.Modal.extend(
           label: Craft.t('app', 'Select'),
           spinner: true,
         })
+        .attr('aria-disabled', 'true')
         .appendTo(this.$primaryButtons);
 
       this.$body = $body;
@@ -253,11 +254,11 @@ Craft.BaseElementSelectorModal = Garnish.Modal.extend(
     },
 
     enableSelectBtn: function () {
-      this.$selectBtn.removeClass('disabled');
+      this.$selectBtn.removeClass('disabled').attr('aria-disabled', 'false');
     },
 
     disableSelectBtn: function () {
-      this.$selectBtn.addClass('disabled');
+      this.$selectBtn.addClass('disabled').attr('aria-disabled', 'true');
     },
 
     enableCancelBtn: function () {