color input is now key nav friendly + tooltip works on focus + trying…

… to get focus trap to work properly

pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue

@@ -254,13 +254,15 @@ export default defineComponent({
           <template v-else-if="label">{{ label }}</template>
           <i
             v-if="tooltipKey"
-            v-clean-tooltip="t(tooltipKey)"
+            v-clean-tooltip="{content: t(tooltipKey), triggers: ['hover', 'touch', 'focus']}"
             class="checkbox-info icon icon-info icon-lg"
+            :tabindex="isDisabled ? -1 : 0"
           />
           <i
             v-else-if="tooltip"
-            v-clean-tooltip="tooltip"
+            v-clean-tooltip="{content: tooltip, triggers: ['hover', 'touch', 'focus']}"
             class="checkbox-info icon icon-info icon-lg"
+            :tabindex="isDisabled ? -1 : 0"
           />
         </slot>
       </span>
@@ -319,6 +321,11 @@ $fontColor: var(--input-label);
   .checkbox-info {
     line-height: normal;
     margin-left: 2px;
+
+    &:focus-visible {
+      @include focus-outline;
+      outline-offset: 2px;
+    }
   }
 
  .checkbox-custom {

shell/assets/translations/en-us.yaml

@@ -9,6 +9,7 @@ generic:
   back: Back
   cancel: Cancel
   confirm: Confirm
+  colorPicker: Color picker
   clear: Clear
   clearAll: Clear All
   close: Close

shell/components/form/ColorInput.vue

@@ -73,7 +73,21 @@ export default {
   mounted() {
     // Ensures that if the default value is used, the model is updated with it
     this.$emit('update:value', this.inputValue);
-  }
+  },
+
+  methods: {
+    handleKeyups(ev) {
+      if (this.isDisabled) {
+        return '';
+      }
+
+      return this.$refs.input.click(ev);
+    }
+  },
+
+  // according to https://www.w3.org/TR/html-aria/
+  // input type="color" has no applicable role
+  // and only aria-label and aria-disabled
 };
 </script>
 
@@ -82,6 +96,9 @@ export default {
     class="color-input"
     :class="{[mode]:mode, disabled: isDisabled}"
     :data-testid="componentTestid + '-color-input'"
+    :tabindex="isDisabled ? -1 : 0"
+    @keyup.enter.stop="handleKeyups($event)"
+    @keyup.space.stop="handleKeyups($event)"
   >
     <label class="text-label"><t
       v-if="labelKey"
@@ -99,8 +116,11 @@ export default {
       >
         <input
           ref="input"
+          :aria-disabled="isDisabled ? 'true' : 'false'"
+          :aria-label="t('generic.colorPicker')"
           type="color"
           :disabled="isDisabled"
+          tabindex="-1"
           :value="inputValue"
           @input="$emit('update:value', $event.target.value)"
         >
@@ -116,6 +136,10 @@ export default {
   border-radius: var(--border-radius);
   padding: 10px;
 
+  &:focus-visible {
+    @include focus-outline;
+  }
+
   &.disabled, &.disabled .selected, &[disabled], &[disabled]:hover {
     color: var(--input-disabled-text);
     background-color: var(--input-disabled-bg);

shell/dialog/AddCustomBadgeDialog.vue

@@ -259,7 +259,6 @@ export default {
             <Checkbox
               v-model:value="badgeAsIcon"
               :label="t('clusterBadge.modal.badgeAsIcon')"
-
               :tooltip="t('clusterBadge.modal.maxCharsTooltip')"
             />
 
@@ -313,15 +312,23 @@ export default {
         />
         <div class="buttons">
           <button
+            role="button"
             class="btn role-secondary mr-10"
+            :aria-label="t('generic.cancel')"
             @click="close"
+            @keyup.enter="close"
+            @keyup.space="close"
           >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton
             :action-label="t('clusterBadge.modal.buttonAction')"
             :disabled="!canSubmit"
+            role="button"
+            :aria-label="t('generic.cancel')"
             @click="apply"
+            @keyup.enter="apply"
+            @keyup.space="apply"
           />
         </div>
       </div>