Merge pull request #14935 from craftcms/a11y/core-fixes

A11y/core fixes

CHANGELOG-WIP.md

@@ -10,10 +10,6 @@
 - Table views within element index pages are no longer scrolled directly. ([#14927](https://github.com/craftcms/cms/pull/14927))
 - Improved the look of user gradicons when selected.
 
-### Accessibility
-- Added the “Status” column option to category, entry, and user indexes. ([#14968](https://github.com/craftcms/cms/pull/14968))
-- Element cards now display a textual status label rather than just the indicator. ([#14968](https://github.com/craftcms/cms/pull/14968))
-
 ### Administration
 - Added the `--format` option to the `db/backup` and `db/restore` commands for PostgreSQL installs. ([#14931](https://github.com/craftcms/cms/pull/14931))
 - The `db/restore` command now autodetects the backup format for PostgreSQL installs, if `--format` isn’t passed. ([#14931](https://github.com/craftcms/cms/pull/14931))
@@ -26,6 +22,15 @@
 - Added the `withCustomFields` element query param. ([#15003](https://github.com/craftcms/cms/pull/15003))
 - Entry queries now support passing `*` to the `section` param, to filter the results to all section entries. ([#14978](https://github.com/craftcms/cms/discussions/14978))
 
+### Accessibility
+- Added the “Status” column option to category, entry, and user indexes. ([#14968](https://github.com/craftcms/cms/pull/14968))
+- Element cards now display a textual status label rather than just the indicator. ([#14968](https://github.com/craftcms/cms/pull/14968))
+- Darkened the color of page sidebar toggle icons to meet the minimum contrast for UI components.
+- Darkened the color of context labels to meet the minimum contrast for text.
+- Darkened the color of footer links to meet the minimum contrast for text.
+- Set the language of the Craft edition in the footer, to improve screen reader pronunciation for non-English languages.
+- The accessible name of “Select site” buttons is now translated to the current language.
+
 ### Extensibility
 - Added `craft\db\getBackupFormat()`.
 - Added `craft\db\getRestoreFormat()`.

src/templates/_layouts/components/global-sidebar.twig

@@ -137,10 +137,11 @@
             {% if currentUser.admin and devMode %}
                 {% set devModeText = 'Craft CMS is running in Dev Mode.'|t('app') %}
                 <div id="devmode">
-                    {{ tag('span', {
+                    {% tag 'span' with {
                         class: 'visually-hidden',
-                        text: devModeText
-                    }) }}
+                    } %}
+                        {{ devModeText|raw }}
+                    {% endtag %}
                 </div>
             {% endif %}
         </div>

src/templates/_layouts/cp.twig

@@ -346,10 +346,12 @@ history.replaceState(undefined, undefined, window.location.href.match(/^[^#]*/)[
                 <div id="app-info">
                     {% set fullEditionName = '{edition} edition'|t('app', {edition: editionName}) %}
                     <span>
-                        Craft CMS
-                        <span id="edition-logo" title="{{ fullEditionName }}">
-                            <span aria-hidden="true">{{ editionName }}</span>
-                            <span class="visually-hidden">{{ fullEditionName }}</span>
+                        <span lang="en">
+                            Craft CMS
+                            <span id="edition-logo" title="{{ fullEditionName }}">
+                                <span aria-hidden="true">{{ editionName }}</span>
+                                <span class="visually-hidden">{{ fullEditionName }}</span>
+                            </span>
                         </span>
                         {{ craft.app.version }}
                     </span>

src/templates/_layouts/elementindex.twig

@@ -40,7 +40,7 @@
         label: selectedSite.name|t('site'),
         menu: {
             items: siteMenuItems(selectableSites, selectedSite),
-            label: 'Select site'|t('site')
+            label: 'Select site'|t('app')
         }
     }) %}
 {% endif %}

src/templates/globals/_edit.twig

@@ -10,7 +10,7 @@
         label: requestedSite.name|t('site'),
         menu: {
             items: siteMenuItems(null, requestedSite),
-            label: 'Select site'|t('site')
+            label: 'Select site'|t('app')
         },
     }] %}
 {% endif %}

src/translations/en/app.php

@@ -413,7 +413,7 @@
     'County' => 'County',
     'Craft CMS does not support backtracking to this version. Please update to Craft CMS {version} or later.' => 'Craft CMS does not support backtracking to this version. Please update to Craft CMS {version} or later.',
     'Craft CMS edition changed.' => 'Craft CMS edition changed.',
-    'Craft CMS is running in Dev Mode.' => 'Craft CMS is running in Dev Mode.',
+    'Craft CMS is running in Dev Mode.' => '<span lang="en">Craft CMS</span> is running in Dev Mode.',
     'Craft Support' => 'Craft Support',
     'Craft isn’t installed yet.' => 'Craft isn’t installed yet.',
     'Craft {version} Upgrade' => 'Craft {version} Upgrade',
@@ -1372,6 +1372,7 @@
     'Select context' => 'Select context',
     'Select element' => 'Select element',
     'Select section' => 'Select section',
+    'Select site' => 'Select site',
     'Select transform' => 'Select transform',
     'Select volume' => 'Select volume',
     'Select {element}' => 'Select {element}',

src/web/CpScreenResponseFormatter.php

@@ -141,7 +141,7 @@ private function _formatTemplate(YiiResponse $response, CpScreenResponseBehavior
                 'icon' => Cp::earthIcon(),
                 'label' => Craft::t('site', $behavior->site->name),
                 'menu' => [
-                    'label' => Craft::t('site', 'Select site'),
+                    'label' => Craft::t('app', 'Select site'),
                     'items' => !empty($behavior->selectableSites)
                         ? Cp::siteMenuItems($behavior->selectableSites, $behavior->site, [
                             'includeOmittedSites' => true,

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

@@ -200,6 +200,7 @@ $systemInfoHoverBgColor: darken($grey800, 10%);
 }
 
 #global-footer {
+  --link-color: #1453db;
   display: flex;
   flex-direction: column;
   align-items: center;

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

@@ -1724,6 +1724,10 @@ ul.icons {
       color: var(--gray-300);
     }
   }
+
+  .cp-icon svg {
+    @include svg-mask(currentColor); // Matches color of font icons
+  }
 }
 
 .disabled:not(.status):not(.status-label) {
@@ -3415,7 +3419,7 @@ table {
   font-size: 11px;
   font-weight: normal;
   text-decoration: none !important;
-  color: var(--light-text-color);
+  color: var(--medium-dark-text-color);
   border-radius: calc(var(--touch-target-size) / 2);
   border: 1px solid var(--medium-hairline-color);
 }