Improve accessibility (#1)

* Accessibility: Live update the question for easier screen reader usage

* Accessibility: Always focus first AnswerButton on Question Cards for quicker keyboard and AT use

* Accessibility: Hide redundant, visual only progress indicator, from AT

* Accessibility: Hack to make AnswerIndicators accessible

Due to the inherent inaccessibility of Popper, this is a very dirty workaround to make the contents of the results table known to Screen Reader users. It shouldn't be done this way, but doing it properly would require a major architectural change. Also, aria-label can only be used on interactive elements, which this is not.

* Accessibility: Also adhere to reduce motion for ResultMatches

src/components/AnswerButton.vue

@@ -2,6 +2,7 @@
 import Popper from 'vue3-popper'
 import type { Answer } from '../content.config'
 import { answerLabels } from '../store'
+import { onMounted } from 'vue';
 
 defineProps<{
   answer: Answer
@@ -12,6 +13,12 @@ defineProps<{
 const emit = defineEmits<{
   save: [Answer]
 }>()
+
+onMounted(() => {
+  // For accessibility reason, we always want to focus the first button
+  const button = document.querySelector('.answer-button button')
+  button?.focus()
+})
 </script>
 
 <template>
@@ -32,6 +39,7 @@ const emit = defineEmits<{
         :class="{ 'ring-3 ring-primary-yellow': selected }"
         @click="emit('save', answer)"
         :disabled="disabled"
+        tabindex="0"
       >
         <slot class="me-1" />
         {{ answerLabels[answer] }}

src/components/AnswerIndicator.vue

@@ -32,9 +32,9 @@ const styles: Record<Answer, any> = {
       class="flex h-10 w-10 items-center justify-center rounded-full text-white"
       :class="[styles[answer].class]"
       v-bind="$attrs"
-      :aria-label="answerLabels[answer]"
     >
-      <component :is="styles[answer].icon" class="h-7 w-7" aria-hidden="true" />
+    <span class="sr-only">{{ answerLabels[answer] }}</span>
+    <component :is="styles[answer].icon" class="h-7 w-7" aria-hidden="true" />
     </div>
   </Popper>
 </template>

src/components/QuestionCard.vue

@@ -70,7 +70,7 @@ const hasAnswer = computed(
         </div>
       </Transition>
       <Transition mode="out-in" :name="transitionName">
-        <div class="" :key="currentQuestionIndex">
+        <div aria-live="assertive" class="" :key="currentQuestionIndex">
           <h2 class="my-4 text-xl font-medium max-md:hyphens-auto @md:text-4xl">
             {{ currentQuestion.thesis }}
           </h2>

src/components/ResultMatches.vue

@@ -40,10 +40,15 @@ dl {
 }
 
 .progress-result {
-  animation: result-bar 1s cubic-bezier(0, 0, 0.2, 1);
   transform-origin: left;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .progress-result {
+    animation: result-bar 1s cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
 @keyframes result-bar {
   from {
     transform: scaleX(0);

src/views/Questionnaire.vue

@@ -73,6 +73,7 @@ const previousQuestion = () => {
         aria-valuemin="1"
         :aria-valuemax="questionsCount"
         :aria-valuenow="currentQuestionProgress"
+        aria-hidden="true"
       >
         <div
           class="h-2 bg-purple-900 duration-300 ease-out motion-safe:transition-all"