CSR-186 WIP radio button updates.

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>

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"

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 */