Expose answer content to VoiceOver in Tutorials' Quiz (swiftlang#731)

* [rdar://115116964] fix: expose answer content to voiceover

* [rdar://115116964] test: fix tests

* [rdar://115116964] fix: keep aria-live element always rendered

Author: marinaaisa

src/components/Tutorial/Assessments/Quiz.vue

@@ -29,7 +29,19 @@
       </label>
     </fieldset>
     <div aria-live="assertive" class="visuallyhidden">
-      {{ ariaLiveText }}
+      <i18n
+        v-if="checkedIndex != null"
+        path="tutorials.assessment.answer-result"
+        tag="span"
+      >
+        <template #answer>
+          <ContentNode class="question" :content="choices[checkedIndex].content" />
+        </template>
+        <template #result>{{ choices[checkedIndex].isCorrect
+          ? $t('tutorials.assessment.correct')
+          : $t('tutorials.assessment.incorrect')
+        }}</template>
+      </i18n>
     </div>
     <div class="controls">
       <ButtonLink
@@ -115,18 +127,6 @@ export default {
         this.userChoices[correctChoice].checked
       ));
     },
-    ariaLiveText() {
-      if (this.checkedIndex === null) return '';
-      const { isCorrect } = this.choices[this.checkedIndex];
-      return `${
-          this.$t('tutorials.assessment.answer-number-is', { index: this.checkedIndex + 1 })
-        } ${
-          isCorrect
-            ? this.$t('tutorials.assessment.correct')
-            : this.$t('tutorials.assessment.incorrect')
-        }
-      `;
-    },
   },
   methods: {
     getIconComponent(index) {

src/lang/locales/en-US.json

@@ -24,7 +24,7 @@
     "assessment": {
       "check-your-understanding": "Check Your Understanding",
       "success-message": "Great job, you've answered all the questions for this tutorial.",
-      "answer-number-is": "Answer number {index} is",
+      "answer-result": "Answer {answer} is {result}",
       "correct": "correct",
       "incorrect": "incorrect",
       "next-question": "Next question",

tests/unit/components/Tutorial/Assessments/Quiz.spec.js

@@ -12,6 +12,11 @@ import { shallowMount } from '@vue/test-utils';
 import ContentNode from 'docc-render/components/ContentNode.vue';
 import Quiz from 'docc-render/components/Tutorial/Assessments/Quiz.vue';
 
+const i18nStub = {
+  name: 'i18n',
+  template: '<span>Answer is <slot name="result"/></span>',
+};
+
 const textContent = str => ([{
   type: 'text',
   text: str,
@@ -105,7 +110,10 @@ describe('Quiz', () => {
 
   describe('default', () => {
     beforeEach(() => {
-      wrapper = shallowMount(Quiz, { propsData });
+      wrapper = shallowMount(Quiz, {
+        propsData,
+        stubs: { i18n: i18nStub },
+      });
     });
 
     it('renders a div.quiz root', () => {
@@ -164,7 +172,11 @@ describe('Quiz', () => {
     let submit;
 
     beforeEach(() => {
-      wrapper = shallowMount(Quiz, { propsData, attachToDocument: true });
+      wrapper = shallowMount(Quiz, {
+        propsData,
+        stubs: { i18n: i18nStub },
+        attachToDocument: true,
+      });
       choices = wrapper.findAll('.choice');
       submit = wrapper.find('.check');
     });
@@ -199,21 +211,23 @@ describe('Quiz', () => {
     });
 
     it('updates the aria live text telling the user if the answer chosen is correct or incorrect', () => {
-      const ariaLive = wrapper.find('[aria-live="assertive"].visuallyhidden');
+      let ariaLive = wrapper.find('[aria-live="assertive"].visuallyhidden');
       expect(ariaLive.exists()).toBe(true);
       expect(ariaLive.text()).toBe('');
 
       let choice = choices.at(1);
       choice.trigger('click');
       submit.trigger('click');
 
-      expect(ariaLive.text()).toBe('tutorials.assessment.answer-number-is 2 tutorials.assessment.incorrect');
+      ariaLive = wrapper.find('[aria-live="assertive"].visuallyhidden > span');
+      expect(ariaLive.text()).toBe('Answer is tutorials.assessment.incorrect');
 
       choice = choices.at(0);
       choice.trigger('click');
       submit.trigger('click');
 
-      expect(ariaLive.text()).toBe('tutorials.assessment.answer-number-is 1 tutorials.assessment.correct');
+      ariaLive = wrapper.find('[aria-live="assertive"].visuallyhidden > span');
+      expect(ariaLive.text()).toBe('Answer is tutorials.assessment.correct');
     });
   });
 });