fix: CMD-171 svgs & icons not accessible (#470)

* fix: CMD-171 SVGs not accessible (via `<use>`) * fix: CMD-171 icons not accessible (via <i>) --------- Co-authored-by: Jake Rosenberg <jrosenberg@tacc.utexas.edu>
TACC · Jul 10, 2024 · ff93a75 · ff93a75
1 parent 5eb1059
commit ff93a75
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/apps/tup-cms/src/apps/portal_nav/templates/portal_nav/nav_portal.raw.html b/apps/tup-cms/src/apps/portal_nav/templates/portal_nav/nav_portal.raw.html
@@ -28,24 +28,24 @@
     aria-haspopup="true"
     aria-expanded="false"
   >
-    <i class="icon icon-user"></i>
+    <i class="icon icon-user" role="presentation"></i>
     <span>{{ user.get_username }}</span>
     <span class="sr-only">Toggle Dropdown</span>
   </a>
   <nav class="dropdown-menu dropdown-menu-right">
     <a class="dropdown-item" href="/portal">
-      <i class="icon icon-dashboard"></i> My Dashboard
+      <i class="icon icon-dashboard" role="presentation"></i> My Dashboard
     </a>
     <a class="dropdown-item" href="/portal/account">
-      <i class="icon icon-user"></i> Manage Account
+      <i class="icon icon-user" role="presentation"></i> Manage Account
     </a>
     {% if show_impersonation %}
     <a class="dropdown-item" href="/portal/impersonation">
-      <i class="icon icon-user"></i> Impersonate User
+      <i class="icon icon-user" role="presentation"></i> Impersonate User
     </a>
     {% endif %}
     <a class="dropdown-item" href="/portal/logout">
-      <i class="icon icon-exit"></i> Log Out
+      <i class="icon icon-exit" role="presentation"></i> Log Out
     </a>
   </nav>
 </li>

diff --git a/apps/tup-cms/src/taccsite_cms/templates/snippets/logos-social-media.html b/apps/tup-cms/src/taccsite_cms/templates/snippets/logos-social-media.html
@@ -2,27 +2,32 @@
 <!-- SEE: https://github.com/TACC/Core-CMS/blob/v4.8.0/taccsite_cms/templates/share_on_social.html -->
 <p class="logos--social">
   <a href="https://www.facebook.com/tacc.utexas" target="_blank" class="logos__facebook">
-    <svg viewbox="0 0 25 25">
+    <svg viewbox="0 0 25 25" role="img">
+      <title>Facebook</title>
       <use href="/static/site_cms/img/org_logos/facebook.svg#facebook-icon"></use>
     </svg>
   </a>
   <a href="https://www.youtube.com/user/TACCutexas" target="_blank" class="logos__youtube">
-    <svg viewbox="0 0 25 25">
+    <svg viewbox="0 0 25 25" role="img">
+      <title>YouTube</title>
       <use href="/static/site_cms/img/org_logos/youtube.svg#youtube-icon"></use>
     </svg>
   </a>
   <a href="https://www.linkedin.com/company/texas-advanced-computing-center-tacc" target="_blank" class="logos__linkedin">
-    <svg viewbox="0 0 25 25">
+    <svg viewbox="0 0 25 25" role="img">
+      <title>LinkedIn</title>
       <use href="/static/site_cms/img/org_logos/linkedin.svg#linkedin-icon"></use>
     </svg>
   </a>
   <a href="https://www.instagram.com/taccutexas/" target="_blank" class="logos__instagram">
-    <svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-        <path d="M160,128a32,32,0,1,1-32-32A32.03667,32.03667,0,0,1,160,128Zm68-44v88a56.06353,56.06353,0,0,1-56,56H84a56.06353,56.06353,0,0,1-56-56V84A56.06353,56.06353,0,0,1,84,28h88A56.06353,56.06353,0,0,1,228,84Zm-52,44a48,48,0,1,0-48,48A48.05436,48.05436,0,0,0,176,128Zm16-52a12,12,0,1,0-12,12A12,12,0,0,0,192,76Z" />
+    <svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" role="img">
+      <title>Instagram</title>
+      <path d="M160,128a32,32,0,1,1-32-32A32.03667,32.03667,0,0,1,160,128Zm68-44v88a56.06353,56.06353,0,0,1-56,56H84a56.06353,56.06353,0,0,1-56-56V84A56.06353,56.06353,0,0,1,84,28h88A56.06353,56.06353,0,0,1,228,84Zm-52,44a48,48,0,1,0-48,48A48.05436,48.05436,0,0,0,176,128Zm16-52a12,12,0,1,0-12,12A12,12,0,0,0,192,76Z" />
     </svg>
   </a>
   <a href="https://staging.bsky.app/profile/taccutexas.bsky.social" target="_blank" class="logos__bluesky">
-    <svg viewBox="0 0 64 57" xmlns="http://www.w3.org/2000/svg">
+    <svg viewBox="0 0 64 57" xmlns="http://www.w3.org/2000/svg" role="img">
+      <title>Bluesky</title>
       <path d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"></path>
     </svg>
   </a>