add aria labels for svg info

Amorpheuz · Jun 6, 2021 · f1dda77 · f1dda77
1 parent ead2114
commit f1dda77
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 22 deletions.
diff --git a/components/Cat404.vue b/components/Cat404.vue
@@ -4,7 +4,10 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 521.48 957.94"
       class="fill-current h-52"
+      role="img"
+      aria-labelledby="error-404"
     >
+      <title id="error-404">No results found</title>
       <path
         d="M24.664 903.655c-18.373-21.16-27.438-53.23-23.915-84.09 3.623-35.77 31.633-63.97 23.915-102.65-3.829-84.26-31.467-157.24-6.802-234.15 26.021-108.28 112.92-141.18 175.78-192.55 14.983-5.154 26.065-15.681 36.088-28.072 11.753-9.193 21.965-20.53 29.878-31.467 9.047-27.524 4.3-61.767 18.719-88.708 10.038-17.346 18.474-36.48 33-50.217C377.02 75.599 371.588 9.579 395.607.863c34.18-9.46 11.324 61.082 26.658 82.712 26.441 1.112 45.114 15.76 58.844 34.23 8.21 18.714 35.014 16.848 39.653 35.29 3.958 16.806-9.135 38.478-21.629 51.527-10.986 12.288-27.134 14.366-35.3 28.76-12.708 28.471 4.273 67.531 5.324 99.514-1.69 33.542 2.81 70.758-17.335 97.78-3.02 21.83-23.195 31.623-30.34 51.688-16.414 28.237-42.354 77.827-41.313 111.55.331 52.629 19.951 115.32 27.888 167.24 18.694 9.203 57.595-.39 51.941 22.344-24.918 41.426-170.65 34.301-198.64 36.821-58.195-1.488-118 2.167-174.78-6.85-33.6-10.435-39.406 16.643-31.028 45.484 8.03 15.138 19.151 27.569 34.168 36.539 25.625 9.596 52.35 21.575 82.232 20.793 32.172 5.176 59.141 1.054 93.075-2.455 20.675-11.455 108.15-7.45 61.448 17.79-94.43 42.48-258.63 33.88-301.8-27.95z"
       />

diff --git a/components/CatCard.vue b/components/CatCard.vue
@@ -12,13 +12,18 @@
     <button
       v-if="Object.keys(catBreed).length"
       class="icon-button flex-shrink-0"
+      :aria-labelledby="`open-${catBreed.name}`"
       @click="$emit('update:toggle-dialog', catBreed)"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="w-10 h-10 fill-current"
+        role="img"
         viewBox="0 0 32 32"
       >
+        <title :id="`open-${catBreed.name}`">
+          Learn more about {{ catBreed.name }}
+        </title>
         <path
           d="M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 C 29 8.832031 23.167969 3 16 3 Z M 16 5 C 22.085938 5 27 9.914063 27 16 C 27 22.085938 22.085938 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 9.914063 9.914063 5 16 5 Z M 15 10 L 15 15 L 10 15 L 10 17 L 15 17 L 15 22 L 17 22 L 17 17 L 22 17 L 22 15 L 17 15 L 17 10 Z"
         />

diff --git a/components/InfoDialog.vue b/components/InfoDialog.vue
@@ -15,15 +15,17 @@
         <div class="col-span-12">
           <button
             ref="closeDialog"
-            aria-label="close dialog"
             class="float-right icon-button"
+            aria-labelledby="close-info-dialog"
             @click="$emit('update:toggle-dialog', !toggleDialog)"
           >
             <svg
               class="h-12 fill-current"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 32 32"
+              role="img"
             >
+              <title id="close-info-dialog">Close dialog</title>
               <path
                 d="M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 C 29 8.832031 23.167969 3 16 3 Z M 16 5 C 22.085938 5 27 9.914063 27 16 C 27 22.085938 22.085938 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 9.914063 9.914063 5 16 5 Z M 12.21875 10.78125 L 10.78125 12.21875 L 14.5625 16 L 10.78125 19.78125 L 12.21875 21.21875 L 16 17.4375 L 19.78125 21.21875 L 21.21875 19.78125 L 17.4375 16 L 21.21875 12.21875 L 19.78125 10.78125 L 16 14.5625 Z"
               />

diff --git a/components/Logo.vue b/components/Logo.vue
@@ -8,7 +8,10 @@
       viewBox="0 0 389.656 58.197"
       version="1.2"
       class="overflow-visible h-6 md:h-10"
+      role="img"
+      aria-labelledby="furmiliar"
     >
+      <title id="furmiliar">Furmiliar</title>
       <defs>
         <symbol id="c" overflow="visible">
           <path

diff --git a/components/StarRating.vue b/components/StarRating.vue
@@ -1,11 +1,12 @@
 <template>
-  <div class="flex text-lavender-dark">
+  <div class="flex text-lavender-dark" :aria-label="`Rated ${value} out of 5`">
     <div v-for="count in 5" :key="`${propertyName}-${count}`">
       <svg
         v-if="count <= value"
         viewBox="0 0 1792 1792"
         xmlns="http://www.w3.org/2000/svg"
         class="star-style"
+        role="img"
       >
         <path
           d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z"
@@ -16,6 +17,7 @@
         viewBox="0 0 1792 1792"
         xmlns="http://www.w3.org/2000/svg"
         class="star-style"
+        role="img"
       >
         <path
           d="M1201 1004l306-297-422-62-189-382-189 382-422 62 306 297-73 421 378-199 377 199zm527-357q0 22-26 48l-363 354 86 500q1 7 1 20 0 50-41 50-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z"

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -12,13 +12,16 @@
             ref="closeHelp"
             aria-label="close help"
             class="float-right icon-button"
+            aria-labelledby="close-info-help"
+            role="img"
             @click="toggleHelp = !toggleHelp"
           >
             <svg
               class="h-12 fill-current"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 32 32"
             >
+              <title id="close-info-help">Close help</title>
               <path
                 d="M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 C 29 8.832031 23.167969 3 16 3 Z M 16 5 C 22.085938 5 27 9.914063 27 16 C 27 22.085938 22.085938 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 9.914063 9.914063 5 16 5 Z M 12.21875 10.78125 L 10.78125 12.21875 L 14.5625 16 L 10.78125 19.78125 L 12.21875 21.21875 L 16 17.4375 L 19.78125 21.21875 L 21.21875 19.78125 L 17.4375 16 L 21.21875 12.21875 L 19.78125 10.78125 L 16 14.5625 Z"
               />
@@ -44,27 +47,33 @@
     <div class="container mx-auto min-h-screen px-6">
       <div class="py-3 flex justify-between">
         <Logo />
-        <button
-          type="button"
-          class="p-2 my-2 flex text-xl items-center outline-none border-2 border-lavender-dark focus:bg-white focus:text-blue-dark bg-lavender-dark text-white rounded-xl shadow-lg"
-          @click="
-            toggleHelp = !toggleHelp
-            $nextTick(() => {
-              if (toggleHelp) $refs.closeHelp.focus()
-            })
-          "
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-8 fill-current mr-2"
-            viewBox="0 0 32 32"
+        <div class="flex">
+          <button
+            type="button"
+            class="p-2 my-2 mr-2 flex text-xl items-center outline-none border-2 border-lavender-dark focus:bg-white focus:text-blue-dark bg-lavender-dark text-white rounded-xl shadow-lg"
+            aria-labelledby="toggle-help"
+            @click="
+              toggleHelp = !toggleHelp
+              $nextTick(() => {
+                if (toggleHelp) $refs.closeHelp.focus()
+              })
+            "
           >
-            <path
-              d="M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 C 29 8.832031 23.167969 3 16 3 Z M 16 5 C 22.085938 5 27 9.914063 27 16 C 27 22.085938 22.085938 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 9.914063 9.914063 5 16 5 Z M 15 10 L 15 12 L 17 12 L 17 10 Z M 15 14 L 15 22 L 17 22 L 17 14 Z"
-            />
-          </svg>
-          Help
-        </button>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-8 fill-current"
+              :class="{ 'mr-2': !$device.isMobile }"
+              viewBox="0 0 32 32"
+              role="img"
+            >
+              <title id="toggle-help">Open help dialog</title>
+              <path
+                d="M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 C 29 8.832031 23.167969 3 16 3 Z M 16 5 C 22.085938 5 27 9.914063 27 16 C 27 22.085938 22.085938 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 9.914063 9.914063 5 16 5 Z M 15 10 L 15 12 L 17 12 L 17 10 Z M 15 14 L 15 22 L 17 22 L 17 14 Z"
+              />
+            </svg>
+            {{ $device.isMobile ? '' : 'Help' }}
+          </button>
+        </div>
       </div>
       <Nuxt />
     </div>