From b89c28dccb09080379f4a3e5d535fb7ead434f0d Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Thu, 2 May 2024 20:18:21 +0600
Subject: [PATCH 1/3] chore: accessbility updates to form elements

---
 src/components/smart/AutoComplete.vue | 14 +++++++-
 src/components/smart/Checkbox.vue     | 33 +++++++++++--------
 src/components/smart/Input.vue        |  7 ++--
 src/components/smart/Link.vue         | 47 +++++++++++++++++++--------
 4 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/src/components/smart/AutoComplete.vue b/src/components/smart/AutoComplete.vue
index de02f38..18396a0 100644
--- a/src/components/smart/AutoComplete.vue
+++ b/src/components/smart/AutoComplete.vue
@@ -14,13 +14,25 @@
       @click="updateSuggestions"
       @keydown="handleKeystroke"
       @change="emit('change', $event)"
+      role="combobox"
+      aria-autocomplete="list"
+      aria-haspopup="true"
+      aria-expanded="false"
+      aria-controls="autocomplete-suggestions"
     />
-    <ul v-if="suggestions.length > 0 && suggestionsVisible" class="suggestions">
+    <ul
+      v-if="suggestions.length > 0 && suggestionsVisible"
+      class="suggestions"
+      role="listbox"
+      id="autocomplete-suggestions"
+    >
       <li
         v-for="(suggestion, index) in suggestions"
         :key="`suggestion-${index}`"
         :class="{ active: currentSuggestionIndex === index }"
         @click.prevent="forceSuggestion(suggestion)"
+        role="option"
+        :aria-selected="currentSuggestionIndex === index"
       >
         {{ suggestion }}
       </li>
diff --git a/src/components/smart/Checkbox.vue b/src/components/smart/Checkbox.vue
index 50b65e5..2e5cc09 100644
--- a/src/components/smart/Checkbox.vue
+++ b/src/components/smart/Checkbox.vue
@@ -1,9 +1,11 @@
 <template>
   <div
-    class="inline-flex items-center justify-center cursor-pointer group flex-nowrap transition hover:text-secondaryDark"
+    class="group inline-flex cursor-pointer flex-nowrap items-center justify-center transition hover:text-secondaryDark"
     role="checkbox"
     :aria-checked="on"
-    @click="emit('change')"
+    @click="toggleCheckbox"
+    @keydown.space.prevent="toggleCheckbox"
+    tabindex="0"
   >
     <input
       :id="checkboxID"
@@ -11,11 +13,11 @@
       :name="name"
       class="checkbox"
       :checked="on"
-      @change="emit('change')"
+      @change="toggleCheckbox"
     />
     <label
       :for="checkboxID"
-      class="pl-0 font-semibold truncate align-middle cursor-pointer"
+      class="cursor-pointer truncate pl-0 align-middle font-semibold"
     >
       <slot></slot>
     </label>
@@ -36,20 +38,25 @@ let checkboxIDCounter = 564275
 <script setup lang="ts">
 // Unique ID for checkbox
 const checkboxID = `checkbox-${checkboxIDCounter++}`
-defineProps({
-  on: {
-    type: Boolean,
-    default: false,
-  },
-  name: {
-    type: String,
-    default: "checkbox",
+
+withDefaults(
+  defineProps<{
+    on: boolean
+    name: string
+  }>(),
+  {
+    on: false,
+    name: "checkbox",
   },
-})
+)
 
 const emit = defineEmits<{
   (e: "change"): void
 }>()
+
+const toggleCheckbox = () => {
+  emit("change")
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/smart/Input.vue b/src/components/smart/Input.vue
index a8cc336..6449c8f 100644
--- a/src/components/smart/Input.vue
+++ b/src/components/smart/Input.vue
@@ -11,6 +11,8 @@
       autocomplete="off"
       required
       :disabled="disabled"
+      :aria-label="label"
+      :aria-required="required"
     />
 
     <label v-if="label.length > 0" :for="inputID"> {{ label }} </label>
@@ -56,6 +58,7 @@ const props = withDefaults(
     label: string
     disabled: boolean
     autofocus: boolean
+    required?: boolean
   }>(),
   {
     id: "",
@@ -67,7 +70,7 @@ const props = withDefaults(
     label: "",
     disabled: false,
     autofocus: true,
-  }
+  },
 )
 
 const emit = defineEmits<{
@@ -84,6 +87,6 @@ onKeyStroke(
       return emit("submit")
     }
   },
-  { target: inputRef, eventName: "keydown" }
+  { target: inputRef, eventName: "keydown" },
 )
 </script>
diff --git a/src/components/smart/Link.vue b/src/components/smart/Link.vue
index 6afc00f..6e4033b 100644
--- a/src/components/smart/Link.vue
+++ b/src/components/smart/Link.vue
@@ -1,12 +1,31 @@
 <template>
-  <button v-if="renderedTag === 'BUTTON'" aria-label="button" role="button" v-bind="$attrs">
+  <button
+    v-if="renderedTag === 'BUTTON'"
+    aria-label="button"
+    role="button"
+    v-bind="$attrs"
+    :tabindex="$attrs.disabled ? -1 : 0"
+  >
     <slot></slot>
   </button>
-  <a v-else-if="renderedTag === 'ANCHOR' && !blank" aria-label="Link" :href="to" role="link" v-bind="updatedAttrs">
+  <a
+    v-else-if="renderedTag === 'ANCHOR' && !blank"
+    aria-label="Internal Link: {{ to }}"
+    :href="to"
+    role="link"
+    v-bind="updatedAttrs"
+  >
     <slot></slot>
   </a>
-  <a v-else-if="renderedTag === 'ANCHOR' && blank" aria-label="Link" :href="to" role="link" target="_blank" rel="noopener"
-    v-bind="updatedAttrs">
+  <a
+    v-else-if="renderedTag === 'ANCHOR' && blank"
+    aria-label="External Link: {{ to }}"
+    :href="to"
+    role="link"
+    target="_blank"
+    rel="noopener"
+    v-bind="updatedAttrs"
+  >
     <slot></slot>
   </a>
   <RouterLink v-else :to="to" v-bind="updatedAttrs">
@@ -30,16 +49,16 @@ export default {
 import { computed, useAttrs } from "vue"
 import { omit } from "lodash-es"
 
-const props = defineProps({
-  to: {
-    type: String,
-    default: "",
+const props = withDefaults(
+  defineProps<{
+    to: string
+    blank: boolean
+  }>(),
+  {
+    to: "",
+    blank: false,
   },
-  blank: {
-    type: Boolean,
-    default: false,
-  },
-})
+)
 
 const renderedTag = computed(() => {
   if (!props.to) {
@@ -67,6 +86,6 @@ const $attrs = useAttrs()
 const updatedAttrs = computed(() =>
   renderedTag.value === "ANCHOR" && !$attrs.disabled
     ? omit($attrs, "disabled")
-    : $attrs
+    : $attrs,
 )
 </script>

From fd1bb4077af3ca18472877e12e35130c6679573d Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Thu, 2 May 2024 21:28:31 +0600
Subject: [PATCH 2/3] chore: radio components

---
 src/components/smart/Item.vue       | 137 ++++++++++------------------
 src/components/smart/Radio.vue      |  34 ++++---
 src/components/smart/RadioGroup.vue |  35 +++++--
 3 files changed, 93 insertions(+), 113 deletions(-)

diff --git a/src/components/smart/Item.vue b/src/components/smart/Item.vue
index 6ac1c64..68bcd4a 100644
--- a/src/components/smart/Item.vue
+++ b/src/components/smart/Item.vue
@@ -3,9 +3,9 @@
     :to="to"
     :exact="exact"
     :blank="blank"
-    class="inline-flex items-center flex-shrink-0 px-4 py-2 rounded transition hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark"
+    class="inline-flex flex-shrink-0 items-center rounded px-4 py-2 transition hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark"
     :class="[
-      { 'opacity-75 cursor-not-allowed': disabled },
+      { 'cursor-not-allowed opacity-75': disabled },
       { 'pointer-events-none': loading },
       { 'flex-1': label },
       { 'flex-row-reverse justify-end': reverse },
@@ -26,20 +26,22 @@
       <component
         :is="icon"
         v-if="icon"
-        class="opacity-75 svg-icons"
+        class="svg-icons opacity-75"
         :class="[
           label ? (reverse ? 'ml-4' : 'mr-4') : '',
           { 'text-accent': active },
         ]"
+        aria-hidden="true"
       />
     </span>
     <HoppSmartSpinner v-else class="mr-4 text-secondaryDark" />
     <div
-      class="inline-flex items-start flex-1 truncate"
+      class="inline-flex flex-1 items-start truncate"
       :class="{ 'flex-col': description }"
     >
-      <div class="font-semibold truncate max-w-[16rem]">
-        {{ label }}
+      <div class="max-w-[16rem] truncate font-semibold">
+        <span v-if="label">{{ label }}</span>
+        <!-- Added span to ensure label text is announced separately -->
       </div>
       <p v-if="description" class="my-2 text-left text-secondaryLight">
         {{ description }}
@@ -48,14 +50,15 @@
     <component
       :is="infoIcon"
       v-if="infoIcon"
-      class="items-center self-center ml-6 -mr-2 svg-icons"
+      class="svg-icons -mr-2 ml-6 items-center self-center"
       :class="{ 'text-accent': activeInfoIcon }"
+      aria-hidden="true"
     />
-    <div v-if="shortcut.length" class="ml-4 inline-flex <sm:hidden font-medium">
+    <div v-if="shortcut.length" class="ml-4 inline-flex font-medium <sm:hidden">
       <kbd
         v-for="(key, index) in shortcut"
         :key="`key-${index}`"
-        class="-mr-2 shortcut-key"
+        class="shortcut-key -mr-2"
       >
         {{ key }}
       </kbd>
@@ -63,88 +66,44 @@
   </HoppSmartLink>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import HoppSmartLink from "./Link.vue"
 import HoppSmartSpinner from "./Spinner.vue"
-import { defineComponent } from "vue"
 
-export default defineComponent({
-  components: {
-    HoppSmartLink,
-    HoppSmartSpinner,
+withDefaults(
+  defineProps<{
+    to: string
+    exact: boolean
+    blank: boolean
+    label: string
+    description: string
+    icon: object | null
+    svg: object | null
+    disabled: boolean
+    loading: boolean
+    reverse: boolean
+    outline: boolean
+    shortcut: string[]
+    active: boolean
+    activeInfoIcon: boolean
+    infoIcon: object | null
+  }>(),
+  {
+    to: "",
+    exact: true,
+    blank: false,
+    label: "",
+    description: "",
+    icon: null,
+    svg: null,
+    disabled: false,
+    loading: false,
+    reverse: false,
+    outline: false,
+    shortcut: [],
+    active: false,
+    activeInfoIcon: false,
+    infoIcon: null,
   },
-  props: {
-    to: {
-      type: String,
-      default: "",
-    },
-    exact: {
-      type: Boolean,
-      default: true,
-    },
-    blank: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      default: "",
-    },
-    description: {
-      type: String,
-      default: "",
-    },
-    /**
-     * This will be a component!
-     */
-    icon: {
-      type: Object,
-      default: null,
-    },
-    /**
-     * This will be a component!
-     */
-    svg: {
-      type: Object,
-      default: null,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    reverse: {
-      type: Boolean,
-      default: false,
-    },
-    outline: {
-      type: Boolean,
-      default: false,
-    },
-    shortcut: {
-      type: Array,
-      default: () => [],
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-
-    activeInfoIcon: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * This will be a component!
-     */
-    infoIcon: {
-      type: Object,
-      default: null,
-    },
-  },
-})
+)
 </script>
diff --git a/src/components/smart/Radio.vue b/src/components/smart/Radio.vue
index 67437be..d4bdd28 100644
--- a/src/components/smart/Radio.vue
+++ b/src/components/smart/Radio.vue
@@ -1,6 +1,12 @@
 <template>
-  <HoppSmartItem :label="label" :icon="selected ? IconCircleDot : IconCircle" :active="selected" role="radio"
-    :aria-checked="selected" @click="emit('change', value)" />
+  <HoppSmartItem
+    :label="label"
+    :icon="selected ? IconCircleDot : IconCircle"
+    :active="selected"
+    role="radio"
+    :aria-checked="selected"
+    @click="emit('change', value)"
+  />
 </template>
 
 <script setup lang="ts">
@@ -8,20 +14,18 @@ import { HoppSmartItem } from "."
 import IconCircleDot from "~icons/lucide/circle-dot"
 import IconCircle from "~icons/lucide/circle"
 
-defineProps({
-  value: {
-    type: String,
-    default: "",
+withDefaults(
+  defineProps<{
+    value: string
+    label: string
+    selected: boolean
+  }>(),
+  {
+    value: "",
+    label: "",
+    selected: false,
   },
-  label: {
-    type: String,
-    default: "",
-  },
-  selected: {
-    type: Boolean,
-    default: false,
-  },
-})
+)
 
 const emit = defineEmits<{
   (e: "change", value: string): void
diff --git a/src/components/smart/RadioGroup.vue b/src/components/smart/RadioGroup.vue
index 0af8627..36de74c 100644
--- a/src/components/smart/RadioGroup.vue
+++ b/src/components/smart/RadioGroup.vue
@@ -1,12 +1,17 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col" role="radiogroup">
+    <!-- Added role="radiogroup" -->
     <HoppSmartRadio
       v-for="(radio, index) in radios"
       :key="`radio-${index}`"
       :value="radio.value"
       :label="radio.label"
       :selected="modelValue === radio.value"
-      @change="emit('update:modelValue', radio.value)"
+      @change="updateModelValue(radio.value)"
+      :aria-checked="modelValue === radio.value ? 'true' : 'false'"
+      :aria-posinset="index + 1"
+      :aria-setsize="radios.length"
+      :tabindex="modelValue === radio.value ? 0 : -1"
     />
   </div>
 </template>
@@ -18,11 +23,23 @@ const emit = defineEmits<{
   (e: "update:modelValue", value: string): void
 }>()
 
-defineProps<{
-  radios: Array<{
-    value: string // The key of the radio option
-    label: string
-  }>
-  modelValue: string // Should be a radio key given in the radios array
-}>()
+type Radio = {
+  value: string
+  label: string
+}
+
+withDefaults(
+  defineProps<{
+    radios: Radio[]
+    modelValue: string
+  }>(),
+  {
+    radios: [],
+    modelValue: "",
+  },
+)
+
+const updateModelValue = (value: string) => {
+  emit("update:modelValue", value)
+}
 </script>

From f81dd64bb970be0a6a95e6177a883cbc55b0eb5e Mon Sep 17 00:00:00 2001
From: nivedin <nivedinp@gmail.com>
Date: Fri, 21 Jun 2024 15:18:51 +0530
Subject: [PATCH 3/3] fix: aria label with link

---
 src/components/smart/Link.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/smart/Link.vue b/src/components/smart/Link.vue
index 6e4033b..d791189 100644
--- a/src/components/smart/Link.vue
+++ b/src/components/smart/Link.vue
@@ -10,7 +10,7 @@
   </button>
   <a
     v-else-if="renderedTag === 'ANCHOR' && !blank"
-    aria-label="Internal Link: {{ to }}"
+    :aria-label="`Internal Link: ${to}`"
     :href="to"
     role="link"
     v-bind="updatedAttrs"
@@ -19,7 +19,7 @@
   </a>
   <a
     v-else-if="renderedTag === 'ANCHOR' && blank"
-    aria-label="External Link: {{ to }}"
+    :aria-label="`External Link: ${to}`"
     :href="to"
     role="link"
     target="_blank"