@usssa/component-library 1.0.0-alpha.89 → 1.0.0-alpha.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.89",
+  "version": "1.0.0-alpha.90",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UInputTextStd.vue

@@ -77,15 +77,16 @@ defineOptions({
   inheritAttrs: false,
 })
 
+const modelValue = defineModel()
+
+const emit = defineEmits(['onRightIconClick'])
+
 const leftBorderRadius = computed(() => {
   if (props.leftBorderRadius === true) {
     return 'leftBorderRadius'
   }
   return ''
 })
-const modelValue = defineModel()
-
-const emit = defineEmits(['onRightIconClick'])
 
 const handleRightIconClick = () => {
   emit('onRightIconClick')
@@ -96,64 +97,66 @@ const handleRightIconClick = () => {
   <div class="q-gutter-xs" :class="parentClass">
     <label
       v-if="label"
-      role="label"
-      for="input"
       class="row items-center q-mb-xxs"
+      for="input"
+      role="label"
     >
       <div class="u-input-label text-body-sm">
         {{ label }}
-        <span class="text-red-5 text-body-sm q-mx-xxs" v-if="isRequired">
+        <span v-if="isRequired" class="text-red-5 text-body-sm q-mx-xxs">
           *
         </span>
       </div>
       <q-icon
-        class="q-ml-xxs fa-kit-duotone fa-circle-info cursor-pointer"
         v-if="toolTipText"
-        size="1rem"
+        class="q-ml-xxs fa-kit-duotone fa-circle-info cursor-pointer"
         color="neutral-9"
         :aria-label="toolTipText"
+        size="1rem"
       >
         <UTooltip
-          :description="toolTipText"
           anchor="top middle"
-          self="bottom middle"
+          :description="toolTipText"
           :offset="[0, 0]"
+          self="bottom middle"
         />
       </q-icon>
     </label>
     <q-input
-      id="input"
-      class="u-input"
-      :class="`field-${size} ${leftBorderRadius}`"
+      v-bind="$attrs"
       v-model="modelValue"
+      :class="`field-${size} ${leftBorderRadius}`"
+      class="u-input"
+      :borderless="borderless"
+      :bottom-slots="!!hintText"
+      :disable="disable"
+      :error="error"
+      hide-bottom-space
+      id="input"
       name="input"
       :outlined="outlined"
       :placeholder="placeholder"
+      :readonly="readonly"
       :rules="validationRules"
       :standout="!outlined"
       type="text"
-      :bottom-slots="!!hintText"
-      hide-bottom-space
-      :readonly="readonly"
-      :disable="disable"
-      :borderless="borderless"
-      :error="error"
-      v-bind="$attrs"
     >
-      <template #prepend v-if="leftIcon">
+      <!--Added below line to resolve "Missing form label" accessibility issue -->
+      <template class="hidden">{{ label }}</template>
+      <template v-if="leftIcon" #prepend>
         <slot name="prepend"></slot>
         <q-icon
           v-if="!$slots.prepend"
           :class="`slot-icon-size-${size} ${leftIcon}`"
         />
       </template>
-      <template #hint v-if="hintText">
+      <template v-if="hintText" #hint>
         <div class="row items-center text-neutral-9 no-wrap">
           <q-icon
-            :class="hintIcon"
             v-if="hintIcon"
-            size="1rem"
+            :class="hintIcon"
             :aria-label="hintText"
+            size="1rem"
           />
           <div class="q-ml-xxs text-body-xs">{{ hintText }}</div>
         </div>
@@ -163,23 +166,23 @@ const handleRightIconClick = () => {
           <q-spinner v-if="loading" size="1rem"/>
           <q-icon
             v-if="rightIcon"
-            @click="handleRightIconClick"
             :class="`slot-icon-size-${size} ${rightIcon}`"
-            :tabindex="0"
             :aria-label="
               rightIcon && rightIconAriaLabel
                 ? rightIconAriaLabel
                 : 'right input icon '
             "
+            :tabindex="0"
+            @click="handleRightIconClick"
           />
         </slot>
       </template>
       <template v-slot:error>
-        <div class="row items-center no-wrap" v-if="errorMessage">
+        <div v-if="errorMessage" class="row items-center no-wrap">
           <q-icon
             class="fa-kit-duotone fa-warning-octagon"
-            size="1rem"
             :aria-label="errorMessage"
+            size="1rem"
           />
           <div class="q-ml-xxs text-body-xs" role="validation error">
             {{ errorMessage }}
@@ -189,7 +192,6 @@ const handleRightIconClick = () => {
     </q-input>
   </div>
 </template>
-
 <style lang="sass">
 .u-input
   .q-field--with-bottom