Merge pull request #11452 from craftcms/a11y/quick-fixes

A11y/quick fixes
craftcms · Jun 22, 2022 · 8c8e56e · 8c8e56e
2 parents e069dab + 56776da
commit 8c8e56e
Show file tree

Hide file tree

Showing 41 changed files with 94 additions and 54 deletions.
diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
@@ -23,7 +23,7 @@
 - Added `craft\helpers\DateTimeHelper::resume()`. ([#11130](https://github.com/craftcms/cms/pull/11130))
 
 ### Changed
-- Improved overall control panel accessibility. ([#11297](https://github.com/craftcms/cms/pull/11297), [#11296](https://github.com/craftcms/cms/pull/11296), [#11414](https://github.com/craftcms/cms/pull/11414))
+- Improved overall control panel accessibility. ([#11297](https://github.com/craftcms/cms/pull/11297), [#11296](https://github.com/craftcms/cms/pull/11296), [#11414](https://github.com/craftcms/cms/pull/11414), [#11452](https://github.com/craftcms/cms/pull/11452))
 - 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), [#11251](https://github.com/craftcms/cms/pull/11251))
 - Improved Dashboard accessibility. ([#11217](https://github.com/craftcms/cms/pull/11217), [#11297](https://github.com/craftcms/cms/pull/11297))

diff --git a/packages/craftcms-sass/_mixins.scss b/packages/craftcms-sass/_mixins.scss
@@ -259,6 +259,11 @@ $radioSize: 16px;
   font-weight: 500;
 }
 
+@mixin light-focus-ring() {
+  --focus-ring: 0 0 0 1px hsl(var(--light-focus-hsl)),
+    0 0 0 3px hsla(var(--light-focus-hsl), 0.7);
+}
+
 // RTL stuff
 
 @mixin left($left) {

diff --git a/src/helpers/Cp.php b/src/helpers/Cp.php
@@ -646,16 +646,22 @@ public static function fieldHtml(string $input, array $config = []): string
                         ], $config['labelAttributes'] ?? []))
                         : '') .
                     ($translatable
-                        ? Html::tag('div', '', [
+                        ? Html::beginTag('div', [
                             'class' => ['t9n-indicator'],
                             'title' => $config['translationDescription'] ?? Craft::t('app', 'This field is translatable.'),
-                            'aria' => [
-                                'label' => $config['translationDescription'] ?? Craft::t('app', 'This field is translatable.'),
-                            ],
+                        ]) .
+                        Html::tag('span', '', [
                             'data' => [
                                 'icon' => 'language',
                             ],
-                        ])
+                            'aria' => [
+                                'hidden' => 'true',
+                            ],
+                        ]) .
+                        Html::tag('span', $config['translationDescription'] ?? Craft::t('app', 'This field is translatable.'), [
+                            'class' => 'visually-hidden',
+                        ]) .
+                        Html::endTag('div')
                         : '') .
                     ($showAttribute
                         ? Html::tag('div', '', [

diff --git a/src/templates/_includes/forms/lightswitch.twig b/src/templates/_includes/forms/lightswitch.twig
@@ -32,7 +32,7 @@
         'reverse-target': reverseToggle ?: false,
     },
     type: 'button',
-    role: 'checkbox',
+    role: 'switch',
     aria: {
         checked: on ? 'true' : (indeterminate ? 'mixed' : 'false'),
         labelledby: labelledBy ?? labelId ?? false,

diff --git a/src/templates/_includes/tabs.twig b/src/templates/_includes/tabs.twig
@@ -34,14 +34,16 @@
             } %}
                 {{ tab.label }}
                 {% if 'error' in tab.class %}
-                    {{ tag('span', {
-                        aria: {
-                            label: 'This tab contains errors'|t('app'),
-                        },
+                    {% tag 'span' with {
                         data: {
                             icon: 'alert',
-                        }
-                    }) }}
+                        },
+                    } %}
+                        {{ tag('span', {
+                            text: 'This tab contains errors'|t('app'),
+                            class: 'visually-hidden',
+                        }) }}
+                    {% endtag %}
                 {% endif %}
             {% endtag %}
         {% endfor %}
@@ -67,14 +69,16 @@
                     } %}
                         {{ tab.label }}
                         {% if 'error' in tab.class %}
-                            {{ tag('span', {
-                                aria: {
-                                    label: 'This tab contains errors'|t('app'),
-                                },
+                            {% tag 'span' with {
                                 data: {
                                     icon: 'alert',
-                                }
-                            }) }}
+                                },
+                            } %}
+                                {{ tag('span', {
+                                    text: 'This tab contains errors'|t('app'),
+                                    class: 'visually-hidden',
+                                }) }}
+                            {% endtag %}
                         {% endif %}
                     {% endtag %}
                 </li>

diff --git a/src/templates/_layouts/cp.twig b/src/templates/_layouts/cp.twig
@@ -249,6 +249,7 @@
                                             {{ contentNotice ? tag('div', {
                                                 id: 'content-notice',
                                                 html: contentNotice,
+                                                role: 'status',
                                             }) }}
                                             {% if tabs %}
                                                 {% include "_includes/tabs" with {

diff --git a/src/templates/_special/image_editor.twig b/src/templates/_special/image_editor.twig
@@ -36,8 +36,8 @@
         </div>
 
         <div class="orientation">
-            <input type="radio" name="orientation" value="landscape" checked/>
-            <input type="radio" name="orientation" value="portrait"/>
+            <input type="radio" aria-label="{{ 'Landscape'|t }}" name="orientation" value="landscape" checked/>
+            <input type="radio" aria-label="{{ 'Portrait'|t }}"  name="orientation" value="portrait"/>
         </div>
     </div>
 </div>

diff --git a/src/web/assets/cp/dist/cp.js b/src/web/assets/cp/dist/cp.js
diff --git a/src/web/assets/cp/dist/cp.js.map b/src/web/assets/cp/dist/cp.js.map
diff --git a/src/web/assets/cp/dist/css/cp.css b/src/web/assets/cp/dist/css/cp.css
diff --git a/src/web/assets/cp/dist/css/cp.css.map b/src/web/assets/cp/dist/css/cp.css.map
diff --git a/src/web/assets/cp/src/css/_cp.scss b/src/web/assets/cp/src/css/_cp.scss
@@ -102,9 +102,8 @@ $sidebarLinkSecondaryColor: var(--gray-200);
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
   @include light-on-dark-text;
+  @include light-focus-ring;
   background-color: var(--gray-800);
-  --focus-ring: 0 0 0 1px hsl(var(--light-focus-hsl)),
-    0 0 0 3px hsla(var(--light-focus-hsl), 0.7);
 
   a {
     color: $sidebarLinkStaticColor;

diff --git a/src/web/assets/cp/src/css/_image_editor.scss b/src/web/assets/cp/src/css/_image_editor.scss
@@ -14,6 +14,7 @@ html.noscroll body {
   background-color: var(--gray-900);
   color: var(--white);
   @include light-on-dark-text;
+  @include light-focus-ring;
   opacity: 0;
   user-select: none;
 }

diff --git a/src/web/assets/cp/src/css/_main.scss b/src/web/assets/cp/src/css/_main.scss
@@ -2008,7 +2008,7 @@ div.btn.submit input {
   overflow: hidden;
   cursor: pointer;
   user-select: none;
-  background-image: linear-gradient(to right, var(--gray-300), var(--gray-300));
+  background-image: linear-gradient(to right, var(--gray-400), var(--gray-400));
   transition: background-image linear 100ms;
 
   &.on {
@@ -2082,7 +2082,7 @@ div.btn.submit input {
   &:focus {
     .lightswitch-container {
       .handle {
-        background-color: var(--light-sel-color);
+        background-color: var(--gray-100);
       }
     }
   }

diff --git a/src/web/assets/cp/src/css/_variables.scss b/src/web/assets/cp/src/css/_variables.scss
@@ -48,7 +48,7 @@
   // alert/notice colors
   --error-color: var(--red-600);
   --warning-color: var(--yellow-800);
-  --success-color: var(--teal-600);
+  --success-color: var(--teal-700);
   --notice-color: var(--blue-800);
 
   // UI element styles

diff --git a/src/web/assets/cp/src/js/AuthManager.js b/src/web/assets/cp/src/js/AuthManager.js
@@ -293,6 +293,7 @@ Craft.AuthManager = Garnish.Base.extend(
             label: Craft.t('app', 'Sign in'),
             spinner: true,
           })
+          .attr('aria-disabled', 'true')
           .appendTo($buttonContainer);
         this.$loginErrorPara = $('<p class="error"/>').appendTo($body);
 
@@ -369,9 +370,11 @@ Craft.AuthManager = Garnish.Base.extend(
     validatePassword: function () {
       if (this.$passwordInput.val().length >= 6) {
         this.$loginBtn.removeClass('disabled');
+        this.$loginBtn.removeAttr('aria-disabled');
         return true;
       } else {
         this.$loginBtn.addClass('disabled');
+        this.$loginBtn.attr('aria-disabled', 'true');
         return false;
       }
     },

diff --git a/src/web/assets/cp/src/js/CP.js b/src/web/assets/cp/src/js/CP.js
@@ -330,7 +330,9 @@ Craft.CP = Garnish.Base.extend(
       if ($noticeContainer.length) {
         return $noticeContainer;
       }
-      return $('<div id="content-notice"/>').prependTo(this.$contentHeader);
+      return $('<div id="content-notice"/>')
+        .attr('role', 'status')
+        .prependTo(this.$contentHeader);
     },
 
     initSpecialForms: function () {

diff --git a/src/web/assets/cp/src/js/ElementEditor.js b/src/web/assets/cp/src/js/ElementEditor.js
@@ -765,6 +765,8 @@ Craft.ElementEditor = Garnish.Base.extend(
       this.$editMetaBtn = $('<button/>', {
         type: 'button',
         class: 'btn edit icon',
+        'aria-expanded': 'false',
+        'aria-label': Craft.t('app', 'Edit draft settings'),
         title: Craft.t('app', 'Edit draft settings'),
       }).appendTo($btnGroup);
       $btnGroup.find('.btngroup-btn-last').removeClass('btngroup-btn-last');
@@ -1695,6 +1697,7 @@ Craft.ElementEditor = Garnish.Base.extend(
       this.$saveMetaBtn = $('<button/>', {
         type: 'submit',
         class: 'btn submit disabled',
+        'aria-disabled': 'true',
         text: Craft.t('app', 'Save'),
       }).appendTo($footer);
 
@@ -1711,10 +1714,16 @@ Craft.ElementEditor = Garnish.Base.extend(
 
     onMetaHudShow: function () {
       this.$editMetaBtn.addClass('active');
+      this.$editMetaBtn.attr('aria-expanded', 'true');
     },
 
     onMetaHudHide: function () {
       this.$editMetaBtn.removeClass('active');
+      this.$editMetaBtn.attr('aria-expanded', 'false');
+
+      if (Garnish.focusIsInside(this.metaHud.$body)) {
+        this.$editMetaBtn.trigger('focus');
+      }
     },
 
     onMetaHudEscape: function () {
@@ -1727,10 +1736,12 @@ Craft.ElementEditor = Garnish.Base.extend(
         this.$nameTextInput.val() !== this.settings.draftName
       ) {
         this.$saveMetaBtn.removeClass('disabled');
+        this.$saveMetaBtn.removeAttr('aria-disabled');
         return true;
       }
 
       this.$saveMetaBtn.addClass('disabled');
+      this.$saveMetaBtn.attr('aria-disabled', 'true');
       return false;
     },
 

diff --git a/src/web/assets/craftsupport/dist/css/CraftSupportWidget.css.map b/src/web/assets/craftsupport/dist/css/CraftSupportWidget.css.map
diff --git a/src/web/assets/dashboard/dist/css/Dashboard.css.map b/src/web/assets/dashboard/dist/css/Dashboard.css.map
diff --git a/src/web/assets/edittransform/dist/css/transforms.css.map b/src/web/assets/edittransform/dist/css/transforms.css.map