Merge pull request #7231 from craftcms/hotfix/pa11y-audit-fixes

pa11y audit fixes
craftcms · Dec 13, 2020 · c0941c7 · c0941c7
2 parents e23350e + 989107a
commit c0941c7
Show file tree

Hide file tree

Showing 47 changed files with 115 additions and 61 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 - Added the `utils/svg` command, which can sanitize and/or namespace a batch of SVG files.
 
 ### Changed
+- Improved accessibility throughout the control panel. ([#7231](https://github.com/craftcms/cms/pull/7231))
 - The Username, First Name, Last Name, Email, and New Password fields on Edit User pages now prevent LastPass from autofilling them. ([#7177](https://github.com/craftcms/cms/issues/7177))
 - Field layout elements’ settings HUDs now automatically set the focus on the first text input when opened. ([#7175](https://github.com/craftcms/cms/issues/7175))
 - Field instructions within the details pane are now replaced with info icons. ([#7180](https://github.com/craftcms/cms/issues/7180))

diff --git a/src/templates/_components/widgets/QuickPost/body.html b/src/templates/_components/widgets/QuickPost/body.html
@@ -35,7 +35,7 @@
         <div class="btngroup">
             <button type="submit" class="btn submit">{{ 'Save'|t('app') }}</button>
 
-            <button type="button" class="btn submit menubtn"></button>
+            <button type="button" class="btn submit menubtn" aria-label="{{ 'Options'|t('app') }}"></button>
             <div class="menu">
                 <ul>
                     <li><a>{{ "Save and continue editing"|t('app') }}</a></li>

diff --git a/src/templates/_elements/toolbar.html b/src/templates/_elements/toolbar.html
@@ -55,7 +55,8 @@
 {% endif %}
 <div class="flex-grow texticon search icon clearable">
     {{ text({
-        placeholder: "Search"|t('app')
+        placeholder: "Search"|t('app'),
+        'aria-label': "Search"|t('app'),
     }) }}
     <div class="clear hidden" title="{{ 'Clear'|t('app') }}" aria-label="{{ 'Clear'|t('app') }}"></div>
 </div>

diff --git a/src/templates/_includes/forms/autosuggest.html b/src/templates/_includes/forms/autosuggest.html
@@ -6,6 +6,7 @@
 
 {%- set id = id ?? "autosuggest#{random()}" %}
 {%- set containerId = "#{id}-container" %}
+{%- set autosuggestId = "#{id}-autosuggest" %}
 
 {%- set class = (class ?? [])|explodeClass|merge([
     'text',
@@ -20,6 +21,7 @@
         :get-suggestion-value="getSuggestionValue"
         :input-props="inputProps"
         :limit="limit"
+        :component-attr-id-autosuggest="id"
         @selected="onSelected"
         @focus="updateFilteredOptions"
         @blur="onBlur"
@@ -43,6 +45,7 @@
             selected: '',
             filteredOptions: [],
             suggestions: suggestions ?? [],
+            id: autosuggestId,
             inputProps: {
                 class: class|join(' '),
                 initialValue: value ?? '',

diff --git a/src/templates/_includes/forms/text.html b/src/templates/_includes/forms/text.html
@@ -22,6 +22,7 @@
     autocapitalize: (autocapitalize ?? true) ? false : 'off',
     disabled: disabled ?? false,
     readonly: readonly ?? false,
+    'aria-label': attribute(_context, 'aria-label')|default(false),
     title: title ?? false,
     placeholder: placeholder ?? false,
     step: step ?? false,

diff --git a/src/templates/_includes/nav.html b/src/templates/_includes/nav.html
@@ -1,4 +1,4 @@
-<nav>
+<nav {% if label is defined and label %}aria-label="{{ label }}"{% endif %}>
     <ul>
         {% for itemId, item in items %}
             {% if item %}

diff --git a/src/templates/_layouts/components/crumbs.twig b/src/templates/_layouts/components/crumbs.twig
@@ -1,7 +1,7 @@
 <div id="crumbs"{% if not crumbs %} class="empty"{% endif %}>
     <a id="nav-toggle" title="{{ 'Show nav'|t('app') }}" aria-label="{{ 'Show nav'|t('app') }}"></a>
     {% if crumbs %}
-        <nav>
+        <nav aria-label="{{ 'Breadcrumbs'|t('app') }}">
             <ul>
                 {% for crumb in crumbs %}
                     <li><a href="{{ crumb.url }}">{{ crumb.label }}</a></li>

diff --git a/src/templates/_layouts/elementindex.html b/src/templates/_layouts/elementindex.html
@@ -25,7 +25,7 @@
 
 {% block sidebar %}
     {% if sources is not empty %}
-        <nav>
+        <nav aria-label="{{ 'Sources'|t('app') }}">
             {% include "_elements/sources" %}
         </nav>
 

diff --git a/src/templates/login.html b/src/templates/login.html
@@ -39,58 +39,62 @@
 {% endif %}
 
 {% set formHtml %}
-    <form {{ attr(formAttributes) }}>
-        {% if not hasLogo %}
-            <h1>{{ systemName }}</h1>
-        {% endif %}
-        <div id="login-fields">
-            {{ forms.textField({
-                id: 'loginName',
-                name: 'username',
-                placeholder: usernameLabel,
-                value: username,
-                autocomplete: 'username',
-                type: usernameType,
-                inputAttributes: {
-                    aria: {
-                        label: usernameLabel,
+    <main>
+        <form {{ attr(formAttributes) }}>
+            {% if not hasLogo %}
+                <h1>{{ systemName }}</h1>
+            {% endif %}
+            <div id="login-fields">
+                {{ forms.textField({
+                    id: 'loginName',
+                    name: 'username',
+                    placeholder: usernameLabel,
+                    value: username,
+                    autocomplete: 'username',
+                    type: usernameType,
+                    inputAttributes: {
+                        aria: {
+                            label: usernameLabel,
+                        },
                     },
-                },
-            }) }}
-            {{ forms.passwordField({
-                id: 'password',
-                name: 'password',
-                placeholder: 'Password'|t('app'),
-                autocomplete: 'current-password',
-                inputAttributes: {
-                    aria: {
-                        label: 'Password'|t('app'),
+                }) }}
+                {{ forms.passwordField({
+                    id: 'password',
+                    name: 'password',
+                    placeholder: 'Password'|t('app'),
+                    autocomplete: 'current-password',
+                    inputAttributes: {
+                        aria: {
+                            label: 'Password'|t('app'),
+                        },
                     },
-                },
-            }) }}
-        </div>
-        <div id="password-fields">
-            {% if craft.app.config.general.rememberedUserSessionDuration %}
-                {{ forms.checkboxField({ id: 'rememberMe', label: 'Keep me logged in'|t('app') }) }}
-            {% endif %}
-            <a id="forgot-password">{{ 'Forgot your password?'|t('app') }}</a>
-        </div>
-        <div class="buttons">
-            <button id="submit" class="btn submit disabled" type="submit">{{ 'Login'|t('app') }}</button>
-            <div id="spinner" class="spinner hidden"></div>
-        </div>
-        <a id="poweredby" href="http://craftcms.com/" title="{{ 'Powered by Craft CMS'|t('app') }}" aria-label="{{ 'Powered by Craft CMS'|t('app') }}">
-            {{ svg('@app/web/assets/cp/dist/images/craftcms.svg') }}
-        </a>
-    </form>
+                }) }}
+            </div>
+            <div id="password-fields">
+                {% if craft.app.config.general.rememberedUserSessionDuration %}
+                    {{ forms.checkboxField({ id: 'rememberMe', label: 'Keep me logged in'|t('app') }) }}
+                {% endif %}
+                <a id="forgot-password">{{ 'Forgot your password?'|t('app') }}</a>
+            </div>
+            <div class="buttons">
+                <button id="submit" class="btn submit disabled" type="submit">{{ 'Login'|t('app') }}</button>
+                <div id="spinner" class="spinner hidden"></div>
+            </div>
+            <a id="poweredby" href="http://craftcms.com/" title="{{ 'Powered by Craft CMS'|t('app') }}" aria-label="{{ 'Powered by Craft CMS'|t('app') }}">
+                {{ svg('@app/web/assets/cp/dist/images/craftcms.svg') }}
+            </a>
+        </form>
+    </main>
 {% endset %}
 
 {% set noCookiesHtml %}
-    <div class="message-container no-access">
-        <div class="pane notice">
-            <p>{{ 'Cookies must be enabled to access the Craft CMS control panel.'|t('app') }}</p>
+    <main>
+        <div class="message-container no-access">
+            <div class="pane notice">
+                <p>{{ 'Cookies must be enabled to access the Craft CMS control panel.'|t('app') }}</p>
+            </div>
         </div>
-    </div>
+    </main>
 {% endset %}
 
 {% block body %}

diff --git a/src/templates/settings/assets/_layout.html b/src/templates/settings/assets/_layout.html
@@ -15,5 +15,12 @@
 {% set docTitle = navItems[selectedNavItem].label~' - '~title %}
 
 {% block sidebar %}
-    {% include "_includes/nav" with { items: navItems, selectedItem: selectedNavItem } only %}
+    {% include "_includes/nav"
+        with {
+            label: title,
+            items: navItems,
+            selectedItem: selectedNavItem,
+        }
+        only
+    %}
 {% endblock %}
diff --git a/src/templates/settings/plugins/index.html b/src/templates/settings/plugins/index.html
@@ -109,7 +109,7 @@ <h2>{{ config.name }}</h2>
                                     {{ hiddenInput('pluginHandle', handle) }}
                                     {{ csrfInput() }}
                                     <div class="btngroup">
-                                        <button type="button" class="btn menubtn" data-icon="settings"></button>
+                                        <button type="button" class="btn menubtn" data-icon="settings" aria-label="{{ 'Settings'|t('app') }}"></button>
                                         <div class="menu" data-align="right">
                                             <ul>
                                                 {% if not config.isInstalled %}

diff --git a/src/templates/settings/users/_layout.html b/src/templates/settings/users/_layout.html
@@ -16,5 +16,12 @@
 {% set docTitle = navItems[selectedNavItem].label~' - '~title %}
 
 {% block sidebar %}
-    {% include "_includes/nav" with { items: navItems, selectedItem: selectedNavItem } only %}
+    {% include "_includes/nav"
+        with {
+            label: title,
+            items: navItems,
+            selectedItem: selectedNavItem,
+        }
+        only
+    %}
 {% endblock %}
diff --git a/src/templates/utilities/_index.html b/src/templates/utilities/_index.html
@@ -3,7 +3,7 @@
 {% set title = displayName %}
 
 {% block sidebar %}
-    <nav>
+    <nav aria-label="{{ 'Utilities'|t('app') }}">
         <ul>
             {% for utility in utilities %}
                 {% set selected = utility.id == id %}

diff --git a/src/translations/ar/app.php b/src/translations/ar/app.php
@@ -75,6 +75,7 @@
     'Author' => 'المؤلف',
     'Backing-up database…' => 'يتم نسخ قاعدة البيانات احتياطياً…',
     'Base URL' => 'عنوان URL أساسي',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => 'شراء {name}',
     'Cancel' => 'إلغاء',
     'categories' => 'الفئات',

diff --git a/src/translations/cs/app.php b/src/translations/cs/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Autor',
     'Backing-up database…' => 'Zálohuji databázi...',
     'Base URL' => 'Základní URL',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => 'Koupit {name}',
     'Cancel' => 'Zrušit',
     'categories' => 'kategorie',

diff --git a/src/translations/cy/app.php b/src/translations/cy/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Author',
     'Backing-up database…' => 'Backing-up database…',
     'Base URL' => 'Base URL',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => 'Buy {name}',
     'Cancel' => 'Cancel',
     'categories' => 'categories',

diff --git a/src/translations/da/app.php b/src/translations/da/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Forfatter',
     'Backing-up database…' => 'Sikkerhedskopiere database…',
     'Base URL' => 'Basis-URL',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => 'Køb {name}',
     'Cancel' => 'Anuller',
     'categories' => 'kategorier',

diff --git a/src/translations/de-CH/app.php b/src/translations/de-CH/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Autor',
     'Backing-up database…' => 'Datenbank wird gesichert…',
     'Base URL' => 'Basis-URL',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => '{name} kaufen',
     'Cancel' => 'Abbrechen',
     'categories' => 'Kategorien',

diff --git a/src/translations/de/app.php b/src/translations/de/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Autor',
     'Backing-up database…' => 'Datenbank wird gesichert…',
     'Base URL' => 'Basis-URL',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => '{name} kaufen',
     'Cancel' => 'Abbrechen',
     'categories' => 'Kategorien',

diff --git a/src/translations/en-GB/app.php b/src/translations/en-GB/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Author',
     'Backing-up database…' => 'Backing-up database…',
     'Base URL' => 'Base URL',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => 'Buy {name}',
     'Cancel' => 'Cancel',
     'categories' => 'categories',

diff --git a/src/translations/en/app.php b/src/translations/en/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Author',
     'Backing-up database…' => 'Backing-up database…',
     'Base URL' => 'Base URL',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => 'Buy {name}',
     'Cancel' => 'Cancel',
     'categories' => 'categories',

diff --git a/src/translations/es/app.php b/src/translations/es/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Autor',
     'Backing-up database…' => 'Haciendo copia de seguridad de la base de datos…',
     'Base URL' => 'URL base',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => 'Comprar {name}',
     'Cancel' => 'Cancelar',
     'categories' => 'categorias',

diff --git a/src/translations/fa/app.php b/src/translations/fa/app.php
@@ -75,6 +75,7 @@
     'Author' => 'نویسنده',
     'Backing-up database…' => 'در حال پشتیبان گیری از پایگاه داده...',
     'Base URL' => 'آدرس اینترنتی پایه',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => '{name} را بخر',
     'Cancel' => 'لغو کردن',
     'categories' => 'دسته بندی ها',

diff --git a/src/translations/fr-CA/app.php b/src/translations/fr-CA/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Auteur',
     'Backing-up database…' => 'Sauvegarde de la base de données…',
     'Base URL' => 'URL de base',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => 'Acheter {name}',
     'Cancel' => 'Annuler',
     'categories' => 'catégories',

diff --git a/src/translations/fr/app.php b/src/translations/fr/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Auteur',
     'Backing-up database…' => 'Sauvegarde de la base de données…',
     'Base URL' => 'URL de base',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => 'Acheter {name}',
     'Cancel' => 'Annuler',
     'categories' => 'catégories',

diff --git a/src/translations/he/app.php b/src/translations/he/app.php
@@ -75,6 +75,7 @@
     'Author' => 'עורך',
     'Backing-up database…' => 'מגבה בסיס נתונים...',
     'Base URL' => 'כתובת URL בסיסית',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => 'קנה את {name}',
     'Cancel' => 'ביטול',
     'categories' => 'קטגוריות',

diff --git a/src/translations/hu/app.php b/src/translations/hu/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Szerző',
     'Backing-up database…' => 'Adatbázis biztonsági mentése…',
     'Base URL' => 'Alap URL',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => '{name} vásárlása',
     'Cancel' => 'Mégse',
     'categories' => 'kategóriák',

diff --git a/src/translations/it/app.php b/src/translations/it/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Autore',
     'Backing-up database…' => 'Backup del database in corso…',
     'Base URL' => 'URL di base',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => 'Acquista {name}',
     'Cancel' => 'Annulla',
     'categories' => 'categorie',

diff --git a/src/translations/ja/app.php b/src/translations/ja/app.php
@@ -75,6 +75,7 @@
     'Author' => '投稿者',
     'Backing-up database…' => 'データーベースをバックアップ中…',
     'Base URL' => 'ベース URL',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => '{name} を購入',
     'Cancel' => 'キャンセル',
     'categories' => 'カテゴリ',

diff --git a/src/translations/ko/app.php b/src/translations/ko/app.php
@@ -75,6 +75,7 @@
     'Author' => '저자',
     'Backing-up database…' => '데이터베이스 백업 중...',
     'Base URL' => '기준 URL',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => '{name} 구입',
     'Cancel' => '취소',
     'categories' => '카테고리',

diff --git a/src/translations/ky/app.php b/src/translations/ky/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Автор',
     'Backing-up database…' => 'Backing-up database…',
     'Base URL' => 'Base URL',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => 'Buy {name}',
     'Cancel' => 'Токтотуу',
     'categories' => 'категориялар',

diff --git a/src/translations/nb/app.php b/src/translations/nb/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Forfatter',
     'Backing-up database…' => 'Sikkerhetskopierer database …',
     'Base URL' => 'Primær URL',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => 'Kjøp {name}',
     'Cancel' => 'Avbryt',
     'categories' => 'kategorier',

diff --git a/src/translations/nl/app.php b/src/translations/nl/app.php
@@ -75,6 +75,7 @@
     'Author' => 'Auteur',
     'Backing-up database…' => 'Database wordt bewaard…',
     'Base URL' => 'Basis-URL',
+    'Breadcrumbs' => 'Breadcrumbs',
     'Buy {name}' => 'Koop {name}',
     'Cancel' => 'Afbreken',
     'categories' => 'categorieën',