Merge pull request #11217 from craftcms/a11y/dashboard-updates

Dashboard a11y updates

CHANGELOG-WIP.md

@@ -20,6 +20,7 @@
 ### Changed
 - Improved pagination UI accessibility. ([#11126](https://github.com/craftcms/cms/pull/11126))
 - Improved element index accessibility. ([#11169](https://github.com/craftcms/cms/pull/11169), [#11200](https://github.com/craftcms/cms/pull/11200))
+- Improved Dashboard accessibility. ([#11217](https://github.com/craftcms/cms/pull/11217))
 - It’s now possible to remove all selected elements from relational fields by pressing <kbd>Backspace</kbd> or <kbd>Delete</kbd> while one of them is focussed.
 - Live Preview now always shows a “Refresh” button, regardless of whether the preview target has auto-refresh enabled. ([#11160](https://github.com/craftcms/cms/discussions/11160)) 
 - Entry Type condition rules now allow multiple selections. ([#11124](https://github.com/craftcms/cms/pull/11124))

src/templates/_components/widgets/Updates/body.twig

@@ -10,6 +10,6 @@
 {% else %}
     <p class="centeralign">{{ "Congrats! You’re up to date."|t('app') }}</p>
     <p class="centeralign">
-        <button type="button" class="btn" data-icon="refresh">{{ 'Check again'|t('app') }}</button>
+        <button type="button" class="btn" data-icon="refresh" aria-label="{{ 'Check again'|t('app') }}">{{ 'Check again'|t('app') }}</button>
     </p>
 {% endif %}

src/templates/dashboard/_index.twig

@@ -28,13 +28,14 @@
 {% block main %}
     <div id="dashboard-grid" class="grid">
         {% for widget in widgets %}
+            {% set widgetHeadingId = "widget-heading-#{widget.id}" %}
             <div class="item" data-colspan="{{ widget.colspan }}">
                 <div id="widget{{ widget.id }}" class="widget {{ widget.type|lower }}" data-id="{{ widget.id }}" data-type="{{ widget.type }}" data-title="{{ widget.title }}">
                     <div class="front">
                         <div class="pane">
                             <div class="spinner body-loading"></div>
                             {% if widget.title or widget.subtitle %}
-                                <div class="widget-heading">
+                                <div id="{{ widgetHeadingId }}" class="widget-heading">
                                     {% if widget.title %}
                                         <h2>{{ widget.title }}</h2>
                                     {% endif %}
@@ -43,10 +44,10 @@
                                     {% endif %}
                                 </div>
                             {% endif %}
+                            <button role="button" class="settings icon hidden" aria-label="{{ 'Widget settings'|t('app') }}" aria-describedby="{{ widgetHeadingId }}" data-settings-toggle></button>
                             <div class="body">
                                 {{ widget.bodyHtml|raw }}
                             </div>
-                            <div class="settings icon hidden"></div>
                         </div>
                     </div>
                     <div class="back hidden">

src/translations/en/app.php

@@ -1728,6 +1728,7 @@
     'Which template should be loaded when an entry’s URL is requested.' => 'Which template should be loaded when an entry’s URL is requested.',
     'Which type of entries do you want to create?' => 'Which type of entries do you want to create?',
     'Widget saved.' => 'Widget saved.',
+    'Widget settings' => 'Widget settings',
     'Width' => 'Width',
     'Years' => 'Years',
     'Yes' => 'Yes',

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

@@ -2549,7 +2549,7 @@ $elementInnerSpacing: 5px;
       padding: 1px 5px;
       font-weight: normal;
       text-decoration: none !important;
-      color: var(--light-text-color);
+      color: var(--medium-text-color);
       background: var(--gray-100);
       border-radius: var(--large-border-radius);
     }

src/web/assets/dashboard/src/Dashboard.js

@@ -271,6 +271,7 @@ import './dashboard.scss';
     $back: null,
     $settingsForm: null,
     $settingsContainer: null,
+    $settingsToggle: null,
     $saveBtn: null,
     $settingsErrorList: null,
 
@@ -288,6 +289,7 @@ import './dashboard.scss';
 
     init: function (container, settingsHtml, initSettingsFn) {
       this.$container = $(container);
+      this.$settingsToggle = this.$container.find('[data-settings-toggle]');
       this.$gridItem = this.$container.parent();
 
       // Store a reference to this object on the container element
@@ -400,6 +402,7 @@ import './dashboard.scss';
             complete: this.onShowFront.bind(this),
           }
         );
+        this.$settingsToggle.focus();
       }, 100);
     },
 

src/web/assets/dashboard/src/dashboard.scss

@@ -32,7 +32,11 @@
     }
 
     &:hover > .front > .pane > .icon.settings {
-      opacity: 0.3;
+      opacity: 0.8;
+    }
+
+    & .front > .pane > .icon.settings:focus {
+      opacity: 0.8;
     }
   }
 
@@ -53,13 +57,17 @@
   & > .front {
     & > .pane {
       & > .icon.settings {
-        display: block;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         opacity: 0;
         cursor: pointer;
-        @include right(24px);
-        top: 24px;
+        @include right(12px);
+        top: 12px;
         transition: opacity linear 200ms;
         position: absolute;
+        height: var(--touch-target-size);
+        width: var(--touch-target-size);
       }
 
       & > .spinner.body-loading {