From 3fe95f55a9e26691eebea129c7714b25fd55dc40 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 17 Dec 2021 08:59:27 -0500
Subject: [PATCH] CSR-241 WIP checkbox updates.

---
 src/ux-components/checkbox/checkbox.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 9639f93e8..1b6254d29 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,8 +1,10 @@
 <template>
+  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
   <div class="ui-checkbox d-flex">
-    <input type="checkbox" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" />
+    <input type="checkbox" aria-checked="false" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" :aria-required="isRequired" />
     <label class="d-flex align-items-center" :for="buttonID">
       <p v-if="checkboxLabel" class="m-0">{{checkboxLabel}}</p>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
     </label>
   </div>
 </template>
@@ -14,7 +16,9 @@ export default {
     checkboxName: String,
     buttonID: String,
     tabIndex: Number,
-    checkboxLabel: String
+    checkboxLabel: String,
+    screenReaderOnlyText: String,
+    isRequired: Boolean
   }
 };
 </script>