CSR-241 WIP checkbox updates.

This commit is contained in:
bmauger 2021-12-17 08:59:27 -05:00
parent f26ab03cdb
commit 3fe95f55a9

View file

@ -1,8 +1,10 @@
<template> <template>
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
<div class="ui-checkbox d-flex"> <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"> <label class="d-flex align-items-center" :for="buttonID">
<p v-if="checkboxLabel" class="m-0">{{checkboxLabel}}</p> <p v-if="checkboxLabel" class="m-0">{{checkboxLabel}}</p>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
</label> </label>
</div> </div>
</template> </template>
@ -14,7 +16,9 @@ export default {
checkboxName: String, checkboxName: String,
buttonID: String, buttonID: String,
tabIndex: Number, tabIndex: Number,
checkboxLabel: String checkboxLabel: String,
screenReaderOnlyText: String,
isRequired: Boolean
} }
}; };
</script> </script>