From 1f7525abdc1c9da58ce3f44c83c78b2e9ac2e1fd Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 8 Dec 2021 14:42:36 -0500
Subject: [PATCH] CSR-186 WIP radio button updates.

---
 src/common-components/radio-question/radio-question.vue | 4 +++-
 src/layouts/component-test/component-test.vue           | 3 +++
 src/ux-components/radio/radio.vue                       | 7 +++++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index 8e44d965c..1abf5bb0f 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -7,7 +7,7 @@
     </div>
     <div class="w-100 d-flex justify-content-center">
       <div class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1" role="radiogroup" aria-labelledby="select-year-radio-group">
-        <h3 class="visually-hidden" id="select-year-radio-group">*</h3>
+        <h3 class="visually-hidden" id="select-year-radio-group">Vehicle Year</h3>
           <radio v-for="answer in answers" :key="answer"
             :radioID="answer"
             @click="chooseAnswer(answer)"
@@ -17,7 +17,9 @@
             data-test="radio"
             groupName="radio-list"
             textPosition="text-start"
+            isRequired=true
             :value="modelValue"
+            screenReaderOnlyText="(opens new window)"
           />
       </div>
     </div>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 61614606a..d1b96ff23 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -81,6 +81,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2021"
+        isRequired=true
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -90,6 +91,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2020"
+        isRequired=true
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -99,6 +101,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2019"
+        isRequired=true
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 2af1d9e38..2b4933ec1 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -7,10 +7,11 @@
   <!-- Example -->
   <!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
   <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
-    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @keyup.space="displayComponent">
+    <input type="radio" :id="radioID" :name="groupName" :value="radioID" :aria-required="isRequired" @keyup.space="displayComponent">
     <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent'>
       <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
-      <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
+      <span v-if="radioLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
+      <span v-if="screenReaderOnlyText" class="visually-hidden">{{screenReaderOnlyText}}</span>
     <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
   </label>
   <p class="small">{{errorMessage}}</p>
@@ -24,6 +25,8 @@ export default {
   props: {
     groupName: String, /* Required, unique for each radio button GROUP */
     radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
+    isRequired: Boolean, /* Optional, default is false */
+    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
     radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
     textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
     errorMessage: String, /* Optional, if there is an error message to be displayed */