Merge pull request #16128 from craftcms/feature/pt-1314-globe-icon-is…

…-hidden-from-screen-readers-but-its-purpose-is Updates iconSvg to allow for alternative text and adds alt text for multi-site globe icon
craftcms · Nov 18, 2024 · 75fe0e5 · 75fe0e5
2 parents bb42fde + 2f977ce
commit 75fe0e5
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 7 deletions.
diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
@@ -5,6 +5,7 @@
 
 ### Accessibility
 - Improved the accessibility of Checkboxes and Radio Buttons fields that allow custom options. ([#16080](https://github.com/craftcms/cms/pull/16080))
+- Improved the accessibility of control panel icons. ([#16128](https://github.com/craftcms/cms/pull/16128))
 
 ### Administration
 - Added the “Show the ‘URL Suffix’ field” setting to Link fields. ([#15813](https://github.com/craftcms/cms/discussions/15813))

diff --git a/src/helpers/Cp.php b/src/helpers/Cp.php
@@ -3223,13 +3223,17 @@ public static function siteMenuItems(
      *
      * @param string $icon
      * @param string|null $fallbackLabel
+     * @param string|null $altText
      * @return string
      * @since 5.0.0
      */
-    public static function iconSvg(string $icon, ?string $fallbackLabel = null): string
+    public static function iconSvg(string $icon, ?string $fallbackLabel = null, ?string $altText = null): string
     {
         $locale = Craft::$app->getLocale();
         $orientation = $locale->getOrientation();
+        $attributes = [
+            'focusable' => 'false',
+        ];
 
         // BC support for some legacy icon names
         $icon = match ($icon) {
@@ -3318,11 +3322,22 @@ public static function iconSvg(string $icon, ?string $fallbackLabel = null): str
             return self::fallbackIconSvg($fallbackLabel);
         }
 
-        // Add aria-hidden="true"
+        if ($altText !== null) {
+            $attributes['aria'] = ['label' => $altText];
+            $attributes['role'] = 'img';
+        } else {
+            $attributes['aria'] = [
+                'hidden' => 'true',
+                'labelledby' => false,
+            ];
+        }
+
+        // Remove title tag
+        $svg = preg_replace(Html::TITLE_TAG_RE, '', $svg);
+
+        // Add attributes for accessibility
         try {
-            $svg = Html::modifyTagAttributes($svg, [
-                'aria' => ['hidden' => 'true'],
-            ]);
+            $svg = Html::modifyTagAttributes($svg, $attributes);
         } catch (InvalidArgumentException) {
         }
 

diff --git a/src/helpers/Html.php b/src/helpers/Html.php
@@ -26,6 +26,11 @@
  */
 class Html extends \yii\helpers\Html
 {
+    /**
+     * @since 5.6.0
+     */
+    public const TITLE_TAG_RE = '/<title(\s+([\s\S]*?))?>.*?<\/title>\s*/is';
+
     /**
      * @var array List of tag attributes that should be specially handled when their values are of array type.
      * In particular, if the value of the `data` attribute is `['name' => 'xyz', 'age' => 13]`, two attributes
@@ -999,7 +1004,7 @@ public static function sanitizeSvg(string $svg): string
         $svg = $sanitizer->sanitize($svg);
         // Remove comments, title & desc
         $svg = preg_replace('/<!--.*?-->\s*/s', '', $svg);
-        $svg = preg_replace('/<title>.*?<\/title>\s*/is', '', $svg);
+        $svg = preg_replace(self::TITLE_TAG_RE, '', $svg);
         return preg_replace('/<desc>.*?<\/desc>\s*/is', '', $svg);
     }
 

diff --git a/src/templates/_layouts/components/crumbs.twig b/src/templates/_layouts/components/crumbs.twig
@@ -26,7 +26,8 @@
                 href: crumb.url is defined ? url(crumb.url) : null,
               } %}
                 {% if crumb.icon is defined %}
-                  <span class="cp-icon puny" aria-hidden="true">{{ iconSvg(crumb.icon) }}</span>
+                  {% set iconAltText = crumb.iconAltText ?? null %}
+                  <span class="cp-icon puny">{{ iconSvg(crumb.icon, altText: iconAltText) }}</span>
                 {% endif %}
 
                 <span>{{ crumb.label ?? crumb.html|raw }}</span>

diff --git a/src/templates/_layouts/elementindex.twig b/src/templates/_layouts/elementindex.twig
@@ -37,6 +37,7 @@
     {% set crumbs = (crumbs ?? [])|unshift({
         id: 'site-crumb',
         icon: 'world',
+        iconAltText: 'Site'|t('app'),
         label: selectedSite.name|t('site'),
         menu: {
             items: siteMenuItems(selectableSites, selectedSite),