From f295bd66c8b779f17036538c426490e062ae8594 Mon Sep 17 00:00:00 2001
From: Kenji Crosland <kcrosla@rei.com>
Date: Tue, 8 Mar 2022 13:56:19 -0500
Subject: [PATCH 01/10] refactor(cdrinput, cdrlabelstandalone): fix v-model and
 styling issues with CdrInput. Add uids
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactor CdrInput to use <script setup> syntax. Fixed v-model issue by referencing a new computed
‘inputModel’ with its own custom getter and setter. Ensured all fallthrough attributes except class
get applied to the input element. The class attribute is bound to the outermost element. Added a uid
module to provide a unique id for each component should an id not be provided by the user. Fixed
some implementations issue on the CdrInput example page. Fixed a typo in CdrLabelStandalone.
---
 src/components/input/CdrInput.vue             | 165 +++++++++---------
 src/components/input/examples/Inputs.vue      | 130 ++++++++++----
 .../labelStandalone/CdrLabelStandalone.vue    |   2 +-
 src/utils/uid.js                              |   8 +
 4 files changed, 188 insertions(+), 117 deletions(-)
 create mode 100644 src/utils/uid.js

diff --git a/src/components/input/CdrInput.vue b/src/components/input/CdrInput.vue
index b1e4f10f9..ebf97a1b2 100644
--- a/src/components/input/CdrInput.vue
+++ b/src/components/input/CdrInput.vue
@@ -1,11 +1,12 @@
 <template>
   <cdr-label-standalone
-    :for-id="id"
+    :for-id="uniqueId"
     :label="label"
     :hide-label="hideLabel"
     :required="required"
     :optional="optional"
     :disabled="disabled"
+    :class="attrs.class"
   >
     <template
       #helper
@@ -35,17 +36,16 @@
                            backgroundClass,
                            sizeClass,
         )"
-        :id="id"
+        :id="uniqueId"
         :disabled="disabled"
         :aria-required="required || null"
         :aria-invalid="!!error || null"
         :aria-errormessage="(!!error && `${id}-error`) || null"
         v-bind="inputAttrs"
-        :value="modelValue"
         :aria-describedby="describedby || null"
-        @input="$emit('update:modelValue', $event.target.value)"
         @focus="isFocused = true"
         @blur="isFocused = false"
+        v-model="inputModel"
       />
       <input
         v-else
@@ -59,17 +59,16 @@
                            backgroundClass,
                            sizeClass,
         )"
-        :id="id"
+        :id="uniqueId"
         :disabled="disabled"
         :aria-required="required || null"
         :aria-invalid="!!error || null"
         :aria-errormessage="(!!error && `${id}-error`) || null"
         v-bind="inputAttrs"
         :aria-describedby="describedby || null"
-        :value="modelValue"
-        @input="$emit('update:modelValue', $event.target.value)"
         @focus="isFocused = true"
         @blur="isFocused = false"
+        v-model="inputModel"
       >
       <span
         v-if="hasPreIcon"
@@ -117,29 +116,30 @@
     </template>
   </cdr-label-standalone>
 </template>
+
 <script>
-import { defineComponent, useCssModule, computed, ref } from 'vue';
+export default {
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+import { useAttrs, useSlots, useCssModule, defineEmits, computed, ref } from 'vue';
 import propValidator from '../../utils/propValidator';
 import CdrLabelStandalone from '../labelStandalone/CdrLabelStandalone';
 import CdrFormError from '../formError/CdrFormError';
 import sizeProps from '../../props/size';
 import backgroundProps from '../../props/background';
 import mapClasses from '../../utils/mapClasses';
+import uid from '../../utils/uid';
 
-export default defineComponent({
-  name: 'CdrInput',
-  components: {
-    CdrLabelStandalone,
-    CdrFormError,
-  },
-  inheritAttrs: false,
-  props: {
+const emit = defineEmits(['update:modelValue'])
+const props = defineProps({
     /**
      * `id` for the input that is mapped to the label `for` attribute.
     */
     id: {
-      type: String,
-      required: true,
+      type: String   
     },
     /**
      *  'type' attribute for the input as defined by w3c.
@@ -196,78 +196,75 @@ export default defineComponent({
     required: Boolean,
     optional: Boolean,
     modelValue: {
-      type: [String, Number],
+      type: [String, Number, Function],
     },
-  },
-  setup(props, ctx) {
-    const baseClass = 'cdr-input';
-    // console.log(ctx.slots['post-icon']);
-    // TODO: delete un-used hasSlot props
-    const isFocused = ref(false);
-    const hasHelperTop = ctx.slots['helper-text-top'];
-    const hasHelperBottom = ctx.slots['helper-text-bottom'];
-    const hasPreIcon = ctx.slots['pre-icon'];
-    const hasPostIcon = ctx.slots['post-icon'];
-    const hasPostIcons = hasPostIcon && ctx.slots['post-icon']().length > 1;
-    const hasInfo = ctx.slots.info;
-    const hasInfoAction = ctx.slots['info-action'];
-
-    const multilineClass = computed(() => props.rows > 1 && 'cdr-input--multiline');
-    const preIconClass = computed(() => hasPreIcon && 'cdr-input--preicon');
-    // TODO: make one class for this? if possible? there must have been a reason i did it like this.....
-    const postIconClass = computed(() => hasPostIcon && 'cdr-input--posticon');
-    const postIconsClass = computed(() => hasPostIcons && 'cdr-input--posticons');
-    const errorClass = computed(() => props.error && 'cdr-input--error');
-    const backgroundClass = computed(() => `cdr-input--${props.background}`);
-    const sizeClass = computed(() => props.size && `${baseClass}--${props.size}`);
-    const focusedClass = computed(() => isFocused.value && 'cdr-input--focus');
+})
+const baseClass = 'cdr-input';
+// console.log(ctx.slots['post-icon']);
+// TODO: delete un-used hasSlot props
+const isFocused = ref(false);
+const slots = useSlots();
+const attrs = useAttrs();
+const hasHelperTop = slots['helper-text-top'];
+const hasHelperBottom = slots['helper-text-bottom'];
+const hasPreIcon = slots['pre-icon'];
+const hasPostIcon = slots['post-icon'];
+const hasPostIcons = hasPostIcon && slots['post-icon']().length > 1;
+const hasInfo = slots.info;
+const hasInfoAction = slots['info-action'];
 
-    const describedby = computed(() => {
-      return [
-        ctx.slots['helper-text-top'] ? `${props.id}-helper-text-top` : '',
-        ctx.slots['helper-text-bottom'] ? `${props.id}-helper-text-bottom` : '',
-        ctx.attrs['aria-describedby'],
-      ].filter((x) => x).join(' ');
-    })
+const uniqueId = props.id ? props.id : uid();
+const multilineClass = computed(() => props.rows > 1 && 'cdr-input--multiline');
+const preIconClass = computed(() => hasPreIcon && 'cdr-input--preicon');
+// TODO: make one class for this? if possible? there must have been a reason i did it like this.....
+const postIconClass = computed(() => hasPostIcon && 'cdr-input--posticon');
+const postIconsClass = computed(() => hasPostIcons && 'cdr-input--posticons');
+const errorClass = computed(() => props.error && 'cdr-input--error');
+const backgroundClass = computed(() => `cdr-input--${props.background}`);
+const sizeClass = computed(() => props.size && `${baseClass}--${props.size}`);
+const focusedClass = computed(() => isFocused.value && 'cdr-input--focus');
 
+const describedby = computed(() => {
+  return [
+    slots['helper-text-top'] ? `${props.id}-helper-text-top` : '',
+    slots['helper-text-bottom'] ? `${props.id}-helper-text-bottom` : '',
+    attrs['aria-describedby'],
+  ].filter((x) => x).join(' ');
+})
 
-    const inputAttrs = computed(() => {
-      const isNum = props.numeric || props.type === 'number';
-      return {
-        autocorrect: 'off',
-        spellcheck: 'false',
-        autocapitalize: 'off',
-        pattern: (isNum && '[0-9]*') || null,
-        inputmode: (isNum && 'numeric') || null,
-        novalidate: isNum || null,
-        ...ctx.attrs,
-      };
-    });
+const attrsWithClassExcluded = computed(()=>{
+  let returnObj = {}
+  // use const below
+  for (const attr in attrs) {
+    if (attr !== 'class') {
+      returnObj[attr] = attrs[attr]
+    }
+  }
+  return returnObj;
+})
 
-    return {
-      style: useCssModule(),
-      baseClass,
-      sizeClass,
-      focusedClass,
-      multilineClass,
-      preIconClass,
-      postIconClass,
-      postIconsClass,
-      errorClass,
-      backgroundClass,
-      isFocused,
-      hasHelperTop,
-      hasHelperBottom,
-      hasPreIcon,
-      hasPostIcon,
-      hasInfo,
-      hasInfoAction,
-      inputAttrs,
-      describedby,
-      mapClasses,
-    };
-  },
+const inputAttrs = computed(() => {
+  const isNum = props.numeric || props.type === 'number';
+  return {
+    id: uniqueId,
+    autocorrect: 'off',
+    spellcheck: 'false',
+    autocapitalize: 'off',
+    pattern: (isNum && '[0-9]*') || null,
+    inputmode: (isNum && 'numeric') || null,
+    novalidate: isNum || null,
+    ...attrsWithClassExcluded.value,
+  };
 });
+const style = useCssModule();
+ const inputModel = computed({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue)
+  }
+})
 </script>
 <style lang="scss" module src="./styles/CdrInput.module.scss">
 </style>
diff --git a/src/components/input/examples/Inputs.vue b/src/components/input/examples/Inputs.vue
index fb6326995..fa93115c6 100644
--- a/src/components/input/examples/Inputs.vue
+++ b/src/components/input/examples/Inputs.vue
@@ -90,7 +90,7 @@
       type="email"
       :background="backgroundColor"
     >
-      <template slot="info-action">
+      <template #info-action>
         <cdr-link
           tag="button"
           type="button"
@@ -99,17 +99,17 @@
           <span class="sr-only">Information!</span>
         </cdr-link>
       </template>
-      <template slot="pre-icon">
+      <template #pre-icon>
         <cdr-icon
           use="#twitter"
         />
       </template>
-      <template slot="post-icon">
+      <template #post-icon>
         <cdr-icon
           use="#check-lg"
         />
       </template>
-      <template slot="helper-text">
+      <template #helper-text>
         This is helper text. Input length: {{ requiredWithIcons.length }}
       </template>
     </cdr-input>
@@ -125,19 +125,19 @@
         autocomplete="username"
         :background="backgroundColor"
       >
-        <template slot="pre-icon">
+        <template #pre-icon>
           <cdr-icon
             use="#twitter"
           />
         </template>
-        <template slot="post-icon">
+        <template #post-icon>
           <cdr-tooltip
             class="cdr-input__button"
             id="input-tooltip"
           >
             <cdr-button
               :icon-only="true"
-              slot="trigger"
+              #trigger
               aria-label="navigate"
             >
               <icon-map />
@@ -172,7 +172,7 @@
         <span id="errorMessage">you have added too many characters, remove some</span>
       </template>
 
-      <template slot="info">
+      <template #info>
         <cdr-link
           modifier="standalone"
           href="#/inputs"
@@ -181,7 +181,73 @@
         </cdr-link>
       </template>
     </cdr-input>
-
+<cdr-input
+      class="demo-input"
+      :required="true"
+      v-model="megaModel"
+      :error="megaErr"
+      error-role="alert"
+      id="inputWithError"
+      label="Everything at the same time, alert validation"
+      @blur="megaErr = false"
+      size="large"
+    >
+      <icon-map #pre-icon />
+      <template #helper-text-top>
+        <span id="topHelp">Hey im on top of the input!</span>
+      </template>
+      <template #helper-text-bottom>
+        <span id="bottomHelp">Hey im below the input!</span>
+      </template>
+      <template #info>
+        <cdr-link
+          href="#baz"
+          modifier="standalone"
+        >
+          Hey im also on top of the input!
+        </cdr-link>
+      </template>
+      <template #info-action>
+        <cdr-link
+          tag="button"
+          type="button"
+        >
+          <span class="sr-only">I trigger some sort of action!</span>
+          <icon-check-stroke inherit-color />
+        </cdr-link>
+      </template>
+      <template #post-icon>
+        <cdr-tooltip
+          class="cdr-input__button"
+          id="mega-tooltip"
+        >
+          <cdr-button
+            #trigger
+            :icon-only="true"
+            @click="megaErr = 'you have five minutes to fix this'"
+            size="large"
+            aria-label="Click me to cause an error"
+          >
+            <icon-x-stroke />
+          </cdr-button>
+          I put the input into an error state!
+        </cdr-tooltip>
+        <cdr-popover
+          class="cdr-input__button"
+          id="mega-popover"
+        >
+          <cdr-button
+            #trigger
+            :icon-only="true"
+            size="large"
+            aria-label="Hello"
+          >
+            <icon-information-stroke />
+          </cdr-button>
+          Hey What's Up?
+        </cdr-popover>
+      </template>
+    </cdr-input>
     <cdr-input
       class="demo-input"
       v-model="helperValidationModel"
@@ -195,7 +261,7 @@
         <span id="errorMessage">this error comes from slots, and will override any errors from props</span>
       </template>
 
-      <template slot="info">
+      <template #info>
         <cdr-link
           modifier="standalone"
           href="#/inputs"
@@ -235,14 +301,14 @@
       @blur="megaErr = false"
       size="large"
     >
-      <icon-map slot="pre-icon" />
-      <template slot="helper-text-top">
+      <icon-map #pre-icon />
+      <template #helper-text-top>
         <span id="topHelp">Hey im on top of the input!</span>
       </template>
-      <template slot="helper-text-bottom">
+      <template #helper-text-bottom>
         <span id="bottomHelp">Hey im below the input!</span>
       </template>
-      <template slot="info">
+      <template #info>
         <cdr-link
           href="#baz"
           modifier="standalone"
@@ -250,7 +316,7 @@
           Hey im also on top of the input!
         </cdr-link>
       </template>
-      <template slot="info-action">
+      <template #info-action>
         <cdr-link
           tag="button"
           type="button"
@@ -259,13 +325,13 @@
           <icon-check-stroke inherit-color />
         </cdr-link>
       </template>
-      <template slot="post-icon">
+      <template #post-icon>
         <cdr-tooltip
           class="cdr-input__button"
           id="mega-tooltip"
         >
           <cdr-button
-            slot="trigger"
+            #trigger
             :icon-only="true"
             @click="megaErr = 'you have five minutes to fix this'"
             size="large"
@@ -280,7 +346,7 @@
           id="mega-popover"
         >
           <cdr-button
-            slot="trigger"
+            #trigger
             :icon-only="true"
             size="large"
             aria-label="Hello"
@@ -377,29 +443,29 @@ export default {
   },
   watch: {
     $route(to) {
-      this.setBackground(to.query.background);
+      this.setBackground("primary");
     },
   },
   mounted() {
-    this.setBackground(this.$router.currentRoute.query.background);
+    this.setBackground("primary");
   },
   methods: {
     validate() {
       this.helperValidationError = this.helperValidationModel.length > 4;
     },
     onMasterInput(value, e) {
-      console.log('On Master Input value = ', value, ' e = ', e); // eslint-disable-line
-      this.defaultModel = value;
-      this.requiredModel = value;
-      this.optionalModel = value;
-      this.hiddenModel = value;
-      this.disabledModel = value;
-      this.formWithButtons = value;
-      this.requiredWithIcons = value;
-      this.helperValidationModel = value;
-      this.multiRowModel = value;
-      this.sizeModel = value;
-      this.megaModel = value;
+      console.log('On Master Input value = ', this.masterModel, ' e = ', e); // eslint-disable-line
+      this.defaultModel = this.masterModel;
+      this.requiredModel = this.masterModel;
+      this.optionalModel = this.masterModel;
+      this.hiddenModel = this.masterModel;
+      this.disabledModel = this.masterModel;
+      this.formWithButtons = this.masterModel;
+      this.requiredWithIcons = this.masterModel;
+      this.helperValidationModel = this.masterModel;
+      this.multiRowModel = this.masterModel;
+      this.sizeModel = this.masterModel;
+      this.megaModel = this.masterModel;
     },
     setBackground(background) {
       switch (background) {
diff --git a/src/components/labelStandalone/CdrLabelStandalone.vue b/src/components/labelStandalone/CdrLabelStandalone.vue
index 1e0c25fb3..6f9af3acd 100644
--- a/src/components/labelStandalone/CdrLabelStandalone.vue
+++ b/src/components/labelStandalone/CdrLabelStandalone.vue
@@ -76,7 +76,7 @@ export default defineComponent({
     const srOnlyLabelClass = computed(() => props.hideLabel
       && 'cdr-label-standalone__label--sr-only');
     const inputSpacingClass = computed(() => (!props.hideLabel || hasHelper || hasInfo)
-      && 'cdr-label-standalone__input--spacing');
+      && 'cdr-label-standalone__input-spacing');
     return {
       style: useCssModule(),
       mapClasses,
diff --git a/src/utils/uid.js b/src/utils/uid.js
new file mode 100644
index 000000000..74b16a640
--- /dev/null
+++ b/src/utils/uid.js
@@ -0,0 +1,8 @@
+/**
+ * Quickly generates a unique id string.
+ */
+
+export default function uid() {
+    let uid = Math.floor((1 + Math.random()) * 0x1000000).toString(16).substring(1);
+    return `cdr-id-${uid}`
+}
\ No newline at end of file

From 9f69c736395740a9b8c12092cbbf4961cac94894 Mon Sep 17 00:00:00 2001
From: Kenji Crosland <kcrosla@rei.com>
Date: Tue, 8 Mar 2022 14:01:32 -0500
Subject: [PATCH 02/10] test(test snapshots): fix test snapshots

---
 .../input/__tests__/__snapshots__/CdrInput.spec.js.snap     | 6 +++---
 .../__tests__/__snapshots__/CdrLabelStandalone.spec.js.snap | 2 +-
 .../select/__tests__/__snapshots__/CdrSelect.spec.js.snap   | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/input/__tests__/__snapshots__/CdrInput.spec.js.snap b/src/components/input/__tests__/__snapshots__/CdrInput.spec.js.snap
index e4f7e2b0f..80684317c 100644
--- a/src/components/input/__tests__/__snapshots__/CdrInput.spec.js.snap
+++ b/src/components/input/__tests__/__snapshots__/CdrInput.spec.js.snap
@@ -18,7 +18,7 @@ exports[`CdrInput renders correctly 1`] = `
     <!--v-if-->
   </div>
   <div
-    class="cdr-label-standalone__input-wrap cdr-label-standalone__input--spacing"
+    class="cdr-label-standalone__input-wrap cdr-label-standalone__input-spacing"
   >
     
     <div
@@ -68,7 +68,7 @@ exports[`CdrInput renders error state correctly 1`] = `
     <!--v-if-->
   </div>
   <div
-    class="cdr-label-standalone__input-wrap cdr-label-standalone__input--spacing"
+    class="cdr-label-standalone__input-wrap cdr-label-standalone__input-spacing"
   >
     
     <div
@@ -159,7 +159,7 @@ exports[`CdrInput renders number input correctly 1`] = `
     <!--v-if-->
   </div>
   <div
-    class="cdr-label-standalone__input-wrap cdr-label-standalone__input--spacing"
+    class="cdr-label-standalone__input-wrap cdr-label-standalone__input-spacing"
   >
     
     <div
diff --git a/src/components/labelStandalone/__tests__/__snapshots__/CdrLabelStandalone.spec.js.snap b/src/components/labelStandalone/__tests__/__snapshots__/CdrLabelStandalone.spec.js.snap
index 89e46f10a..e15e637e7 100644
--- a/src/components/labelStandalone/__tests__/__snapshots__/CdrLabelStandalone.spec.js.snap
+++ b/src/components/labelStandalone/__tests__/__snapshots__/CdrLabelStandalone.spec.js.snap
@@ -29,7 +29,7 @@ exports[`CdrFormLabelStandalone matches snapshot 1`] = `
     </span>
   </div>
   <div
-    class="cdr-label-standalone__input-wrap cdr-label-standalone__input--spacing"
+    class="cdr-label-standalone__input-wrap cdr-label-standalone__input-spacing"
   >
     
     
diff --git a/src/components/select/__tests__/__snapshots__/CdrSelect.spec.js.snap b/src/components/select/__tests__/__snapshots__/CdrSelect.spec.js.snap
index c5daa6942..efbc0d996 100644
--- a/src/components/select/__tests__/__snapshots__/CdrSelect.spec.js.snap
+++ b/src/components/select/__tests__/__snapshots__/CdrSelect.spec.js.snap
@@ -18,7 +18,7 @@ exports[`cdrSelect renders correctly 1`] = `
     <!--v-if-->
   </div>
   <div
-    class="cdr-label-standalone__input-wrap cdr-label-standalone__input--spacing"
+    class="cdr-label-standalone__input-wrap cdr-label-standalone__input-spacing"
   >
     
     <div
@@ -85,7 +85,7 @@ exports[`cdrSelect renders error state correctly 1`] = `
     <!--v-if-->
   </div>
   <div
-    class="cdr-label-standalone__input-wrap cdr-label-standalone__input--spacing"
+    class="cdr-label-standalone__input-wrap cdr-label-standalone__input-spacing"
   >
     
     <div

From fe2c23bf10338e09c091ebbe14f5cd9c64f3426d Mon Sep 17 00:00:00 2001
From: Kenji Crosland <kcrosla@rei.com>
Date: Tue, 8 Mar 2022 14:07:44 -0500
Subject: [PATCH 03/10] remove unneeded comments

---
 src/components/input/CdrInput.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/input/CdrInput.vue b/src/components/input/CdrInput.vue
index ebf97a1b2..0caaea47d 100644
--- a/src/components/input/CdrInput.vue
+++ b/src/components/input/CdrInput.vue
@@ -151,7 +151,6 @@ const props = defineProps({
       default: 'text',
       validator: (value) => propValidator(
         value,
-        // TODO: moar types?
         ['text', 'email', 'number', 'password', 'search', 'url', 'tel'],
       ),
     },
@@ -200,7 +199,6 @@ const props = defineProps({
     },
 })
 const baseClass = 'cdr-input';
-// console.log(ctx.slots['post-icon']);
 // TODO: delete un-used hasSlot props
 const isFocused = ref(false);
 const slots = useSlots();
@@ -234,7 +232,6 @@ const describedby = computed(() => {
 
 const attrsWithClassExcluded = computed(()=>{
   let returnObj = {}
-  // use const below
   for (const attr in attrs) {
     if (attr !== 'class') {
       returnObj[attr] = attrs[attr]

From 3e62e0e2714660f53a960e561a70327c21e959d8 Mon Sep 17 00:00:00 2001
From: Kenji Crosland <kcrosla@rei.com>
Date: Tue, 8 Mar 2022 14:18:23 -0500
Subject: [PATCH 04/10] Add the proper setBackground parameters

---
 src/components/input/examples/Inputs.vue | 72 +-----------------------
 1 file changed, 3 insertions(+), 69 deletions(-)

diff --git a/src/components/input/examples/Inputs.vue b/src/components/input/examples/Inputs.vue
index fa93115c6..23fa53b74 100644
--- a/src/components/input/examples/Inputs.vue
+++ b/src/components/input/examples/Inputs.vue
@@ -181,73 +181,7 @@
         </cdr-link>
       </template>
     </cdr-input>
-<cdr-input
-      class="demo-input"
-      :required="true"
-      v-model="megaModel"
-      :error="megaErr"
-      error-role="alert"
-      id="inputWithError"
-      label="Everything at the same time, alert validation"
-      @blur="megaErr = false"
-      size="large"
-    >
-      <icon-map #pre-icon />
-      <template #helper-text-top>
-        <span id="topHelp">Hey im on top of the input!</span>
-      </template>
-      <template #helper-text-bottom>
-        <span id="bottomHelp">Hey im below the input!</span>
-      </template>
-      <template #info>
-        <cdr-link
-          href="#baz"
-          modifier="standalone"
-        >
-          Hey im also on top of the input!
-        </cdr-link>
-      </template>
-      <template #info-action>
-        <cdr-link
-          tag="button"
-          type="button"
-        >
-          <span class="sr-only">I trigger some sort of action!</span>
-          <icon-check-stroke inherit-color />
-        </cdr-link>
-      </template>
-      <template #post-icon>
-        <cdr-tooltip
-          class="cdr-input__button"
-          id="mega-tooltip"
-        >
-          <cdr-button
-            #trigger
-            :icon-only="true"
-            @click="megaErr = 'you have five minutes to fix this'"
-            size="large"
-            aria-label="Click me to cause an error"
-          >
-            <icon-x-stroke />
-          </cdr-button>
-          I put the input into an error state!
-        </cdr-tooltip>
-        <cdr-popover
-          class="cdr-input__button"
-          id="mega-popover"
-        >
-          <cdr-button
-            #trigger
-            :icon-only="true"
-            size="large"
-            aria-label="Hello"
-          >
-            <icon-information-stroke />
-          </cdr-button>
-          Hey What's Up?
-        </cdr-popover>
-      </template>
-    </cdr-input>
+
     <cdr-input
       class="demo-input"
       v-model="helperValidationModel"
@@ -443,11 +377,11 @@ export default {
   },
   watch: {
     $route(to) {
-      this.setBackground("primary");
+       this.setBackground(to.query.background);
     },
   },
   mounted() {
-    this.setBackground("primary");
+    this.setBackground(this.$router.currentRoute.query.background);
   },
   methods: {
     validate() {

From 4b887025f4fc9ee6bf4e5c1029fd4b389f16a8d8 Mon Sep 17 00:00:00 2001
From: Kenji Crosland <kcrosla@rei.com>
Date: Tue, 8 Mar 2022 14:19:56 -0500
Subject: [PATCH 05/10] Small uid fixes

---
 src/utils/uid.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/uid.js b/src/utils/uid.js
index 74b16a640..24ce76104 100644
--- a/src/utils/uid.js
+++ b/src/utils/uid.js
@@ -3,6 +3,6 @@
  */
 
 export default function uid() {
-    let uid = Math.floor((1 + Math.random()) * 0x1000000).toString(16).substring(1);
+    const uid = Math.floor((1 + Math.random()) * 0x1000000).toString(16).substring(1);
     return `cdr-id-${uid}`
-}
\ No newline at end of file
+}

From f88add074681750fa83b8632547203c5e98d414e Mon Sep 17 00:00:00 2001
From: Kenji Crosland <kcrosla@rei.com>
Date: Tue, 8 Mar 2022 14:35:58 -0500
Subject: [PATCH 06/10] setBackground fix

---
 src/components/input/examples/Inputs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/input/examples/Inputs.vue b/src/components/input/examples/Inputs.vue
index 23fa53b74..b06fef7f8 100644
--- a/src/components/input/examples/Inputs.vue
+++ b/src/components/input/examples/Inputs.vue
@@ -381,7 +381,7 @@ export default {
     },
   },
   mounted() {
-    this.setBackground(this.$router.currentRoute.query.background);
+    this.setBackground(this.$route.query.background);
   },
   methods: {
     validate() {

From 52922d92cd3e102f66acf8bb45af2cd9f5d9f065 Mon Sep 17 00:00:00 2001
From: Kenji Crosland <kcrosla@rei.com>
Date: Wed, 9 Mar 2022 16:18:01 -0500
Subject: [PATCH 07/10] refactor(cdrinput, cdrformerror): fix id issue in input
 examples. Remove tabindex from form error

Removed ids from the spans slotted to the form error. These ids are automatically provided by the
parent component. Remove tab-index=0 to form errors as form errors should not be tabbable.
---
 src/components/formError/CdrFormError.vue | 2 +-
 src/components/input/CdrInput.vue         | 6 +++---
 src/components/input/examples/Inputs.vue  | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/formError/CdrFormError.vue b/src/components/formError/CdrFormError.vue
index 9525d5a41..ea68abdca 100644
--- a/src/components/formError/CdrFormError.vue
+++ b/src/components/formError/CdrFormError.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="style[baseClass]" role="status" tabindex="0">
+  <div :class="style[baseClass]" role="status">
     <span :class="style[iconClass]">
       <icon-error-stroke size="small" inherit-color />
     </span>
diff --git a/src/components/input/CdrInput.vue b/src/components/input/CdrInput.vue
index 0caaea47d..a436f17b7 100644
--- a/src/components/input/CdrInput.vue
+++ b/src/components/input/CdrInput.vue
@@ -40,7 +40,7 @@
         :disabled="disabled"
         :aria-required="required || null"
         :aria-invalid="!!error || null"
-        :aria-errormessage="(!!error && `${id}-error`) || null"
+        :aria-errormessage="(!!error && `${uniqueId}-error`) || null"
         v-bind="inputAttrs"
         :aria-describedby="describedby || null"
         @focus="isFocused = true"
@@ -63,7 +63,7 @@
         :disabled="disabled"
         :aria-required="required || null"
         :aria-invalid="!!error || null"
-        :aria-errormessage="(!!error && `${id}-error`) || null"
+        :aria-errormessage="(!!error && `${uniqueId}-error`) || null"
         v-bind="inputAttrs"
         :aria-describedby="describedby || null"
         @focus="isFocused = true"
@@ -106,7 +106,7 @@
       <cdr-form-error
         :error="error"
         :role="errorRole"
-        :id="`${id}-error`"
+        :id="`${uniqueId}-error`"
         v-if="error"
       >
         <template #error>
diff --git a/src/components/input/examples/Inputs.vue b/src/components/input/examples/Inputs.vue
index b06fef7f8..c446b5d37 100644
--- a/src/components/input/examples/Inputs.vue
+++ b/src/components/input/examples/Inputs.vue
@@ -169,7 +169,7 @@
       </template>
 
       <template #error>
-        <span id="errorMessage">you have added too many characters, remove some</span>
+        <span>you have added too many characters, remove some</span>
       </template>
 
       <template #info>
@@ -192,7 +192,7 @@
     >
 
       <template #error>
-        <span id="errorMessage">this error comes from slots, and will override any errors from props</span>
+        <span>this error comes from slots, and will override any errors from props</span>
       </template>
 
       <template #info>

From 5db9cdca868120219fae162c5d12d592dfab855c Mon Sep 17 00:00:00 2001
From: Kenji Crosland <kcrosla@rei.com>
Date: Wed, 9 Mar 2022 16:51:13 -0500
Subject: [PATCH 08/10] test(input snapshot files): remove tabindex from
 snapshot files

---
 .../formError/__tests__/__snapshots__/CdrFormError.spec.js.snap  | 1 -
 .../formGroup/__tests__/__snapshots__/CdrFormGroup.spec.js.snap  | 1 -
 .../input/__tests__/__snapshots__/CdrInput.spec.js.snap          | 1 -
 .../select/__tests__/__snapshots__/CdrSelect.spec.js.snap        | 1 -
 4 files changed, 4 deletions(-)

diff --git a/src/components/formError/__tests__/__snapshots__/CdrFormError.spec.js.snap b/src/components/formError/__tests__/__snapshots__/CdrFormError.spec.js.snap
index 646a5d279..6bc2b0aa0 100644
--- a/src/components/formError/__tests__/__snapshots__/CdrFormError.spec.js.snap
+++ b/src/components/formError/__tests__/__snapshots__/CdrFormError.spec.js.snap
@@ -4,7 +4,6 @@ exports[`CdrFormError matches snapshot 1`] = `
 <div
   class="cdr-form-error"
   role="status"
-  tabindex="0"
 >
   <span
     class="cdr-form-error__icon"
diff --git a/src/components/formGroup/__tests__/__snapshots__/CdrFormGroup.spec.js.snap b/src/components/formGroup/__tests__/__snapshots__/CdrFormGroup.spec.js.snap
index a4b7b0c65..e11795f3f 100644
--- a/src/components/formGroup/__tests__/__snapshots__/CdrFormGroup.spec.js.snap
+++ b/src/components/formGroup/__tests__/__snapshots__/CdrFormGroup.spec.js.snap
@@ -48,7 +48,6 @@ exports[`CdrFormGroup renders error state correctly 1`] = `
     class="cdr-form-error"
     id="renders-error"
     role="status"
-    tabindex="0"
   >
     <span
       class="cdr-form-error__icon"
diff --git a/src/components/input/__tests__/__snapshots__/CdrInput.spec.js.snap b/src/components/input/__tests__/__snapshots__/CdrInput.spec.js.snap
index 80684317c..127d2dff4 100644
--- a/src/components/input/__tests__/__snapshots__/CdrInput.spec.js.snap
+++ b/src/components/input/__tests__/__snapshots__/CdrInput.spec.js.snap
@@ -101,7 +101,6 @@ exports[`CdrInput renders error state correctly 1`] = `
       class="cdr-form-error"
       id="renders-error"
       role="status"
-      tabindex="0"
     >
       <span
         class="cdr-form-error__icon"
diff --git a/src/components/select/__tests__/__snapshots__/CdrSelect.spec.js.snap b/src/components/select/__tests__/__snapshots__/CdrSelect.spec.js.snap
index efbc0d996..009642674 100644
--- a/src/components/select/__tests__/__snapshots__/CdrSelect.spec.js.snap
+++ b/src/components/select/__tests__/__snapshots__/CdrSelect.spec.js.snap
@@ -135,7 +135,6 @@ exports[`cdrSelect renders error state correctly 1`] = `
       class="cdr-form-error"
       id="renders-error"
       role="status"
-      tabindex="0"
     >
       <span
         class="cdr-form-error__icon"

From 3e13ef6b1e2ac2165bc7bbba49dfa76e6317d66c Mon Sep 17 00:00:00 2001
From: Kenji Crosland <kcrosla@rei.com>
Date: Thu, 10 Mar 2022 13:41:04 -0500
Subject: [PATCH 09/10] fix(cdr-input and cdr-label-standalone): fix axe and
 screenreader issues

Fixed issues with id mismatches which caused problems with axe and screenreaders. Also removed
`aria-label=required` from cdr-label-standalone since this is superflous when the input is already
labeled required
---
 src/components/input/CdrInput.vue                     | 4 ++--
 src/components/labelStandalone/CdrLabelStandalone.vue | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/input/CdrInput.vue b/src/components/input/CdrInput.vue
index a436f17b7..7e6714e3b 100644
--- a/src/components/input/CdrInput.vue
+++ b/src/components/input/CdrInput.vue
@@ -224,8 +224,8 @@ const focusedClass = computed(() => isFocused.value && 'cdr-input--focus');
 
 const describedby = computed(() => {
   return [
-    slots['helper-text-top'] ? `${props.id}-helper-text-top` : '',
-    slots['helper-text-bottom'] ? `${props.id}-helper-text-bottom` : '',
+    slots['helper-text-top'] ? `${uniqueId}-helper-text-top` : '',
+    slots['helper-text-bottom'] ? `${uniqueId}-helper-text-bottom` : '',
     attrs['aria-describedby'],
   ].filter((x) => x).join(' ');
 })
diff --git a/src/components/labelStandalone/CdrLabelStandalone.vue b/src/components/labelStandalone/CdrLabelStandalone.vue
index 6f9af3acd..69a84ba0a 100644
--- a/src/components/labelStandalone/CdrLabelStandalone.vue
+++ b/src/components/labelStandalone/CdrLabelStandalone.vue
@@ -8,7 +8,6 @@
         {{ label }}{{ required || optional ? '' : '' }}
         <span
           v-if="required"
-          aria-label="required"
         >*</span>
 
         <span

From 932affa1ba83f9f5aa542c50adf6a6f59e1ca349 Mon Sep 17 00:00:00 2001
From: Kenji Crosland <kcrosla@rei.com>
Date: Thu, 10 Mar 2022 13:43:37 -0500
Subject: [PATCH 10/10] test(fix label snapshot): remove aria-label=required
 from cdr-label-standalone snapshot

---
 .../__tests__/__snapshots__/CdrLabelStandalone.spec.js.snap   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/labelStandalone/__tests__/__snapshots__/CdrLabelStandalone.spec.js.snap b/src/components/labelStandalone/__tests__/__snapshots__/CdrLabelStandalone.spec.js.snap
index e15e637e7..0e5f3825a 100644
--- a/src/components/labelStandalone/__tests__/__snapshots__/CdrLabelStandalone.spec.js.snap
+++ b/src/components/labelStandalone/__tests__/__snapshots__/CdrLabelStandalone.spec.js.snap
@@ -12,9 +12,7 @@ exports[`CdrFormLabelStandalone matches snapshot 1`] = `
       for="test"
     >
       Label Test 
-      <span
-        aria-label="required"
-      >
+      <span>
         *
       </span>
     </label>