fix misc issues for a11y

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

@@ -105,6 +105,15 @@ export default defineComponent({
     class: {
       type:    String,
       default: ''
+    },
+
+    /**
+     * Optionally use this to comply with a11y IF there's no label
+     * associated with the input
+     */
+    accessibilityLabel: {
+      type:    String,
+      default: ''
     }
   },
 
@@ -364,6 +373,7 @@ export default defineComponent({
         :id="inputId"
         ref="value"
         v-bind="$attrs"
+        v-stripped-aria-label="!hasLabel && accessibilityLabel ? accessibilityLabel : undefined"
         :maxlength="_maxlength"
         :disabled="isDisabled"
         :value="value || ''"
@@ -378,6 +388,7 @@ export default defineComponent({
         v-else
         :id="inputId"
         ref="value"
+        v-stripped-aria-label="!hasLabel && accessibilityLabel ? accessibilityLabel : undefined"
         role="textbox"
         :class="{ 'no-label': !hasLabel }"
         v-bind="$attrs"

shell/assets/translations/en-us.yaml

@@ -967,6 +967,10 @@ catalog:
     experimentalWarning: '{chartName} has been marked as experimental. Use caution when installing this helm chart as it might not function as expected.'
     deprecatedAndExperimentalWarning: '{chartName} has been marked as deprecated and experimental. Use caution when installing this helm chart as it might be removed in the future and might not function as expected.'
   charts:
+    browseBtn: Browse
+    featuredBtn: Featured
+    featuredAriaLabel: Show Featured Charts Carousel and charts grid
+    browseAriaLabel: Show only charts grid
     iconAlt: Icon for {app} card/grid item
     refresh: refresh charts
     all: All

shell/components/AppModal.vue

@@ -60,15 +60,6 @@ export default defineComponent({
       type:    String,
       default: '',
     },
-    /**
-     * pass codemirror yaml editor reference (optional)
-     * will be used to prevent "escape" from triggering modal closing
-     * IF there's an instance of codemirror focused on this modal
-     */
-    yamlEditor: {
-      type:    Object,
-      default: () => {},
-    },
     /**
      * trigger focus trap
      */
@@ -160,9 +151,7 @@ export default defineComponent({
       }
     },
     handleEscapeKey(event: KeyboardEvent) {
-      if (this.clickToClose &&
-        (!this.yamlEditor || !Object.keys(this.yamlEditor).length || (Object.keys(this.yamlEditor).length && !this.yamlEditor.hasFocus())) &&
-        event.key === 'Escape') {
+      if (this.clickToClose && event.key === 'Escape') {
         this.$emit('close');
       }
     },

shell/components/ButtonGroup.vue

@@ -70,6 +70,13 @@ export default {
       const label = opt.labelKey ? this.t(opt.labelKey) : opt.label;
 
       return tooltip || label || '';
+    },
+    actionAriaLabel(opt) {
+      const ariaLabel = opt.ariaLabel;
+      const label = opt.labelKey ? this.t(opt.labelKey) : opt.label;
+      const tooltip = opt.tooltipKey ? this.t(opt.tooltipKey) : opt.tooltip;
+
+      return ariaLabel || tooltip || label || undefined;
     }
   }
 };
@@ -89,7 +96,7 @@ export default {
       :class="opt.class"
       :disabled="disabled || opt.disabled"
       role="button"
-      :aria-label="actionDescription(opt)"
+      :aria-label="actionAriaLabel(opt)"
       @click="change(opt.value)"
     >
       <slot
@@ -100,7 +107,7 @@ export default {
         <i
           v-if="opt.icon"
           :class="{icon: true, [opt.icon]: true, [`icon-${iconSize}`]: !!iconSize }"
-          :alt="actionDescription(opt)"
+          :alt="actionAriaLabel(opt)"
         />
         <t
           v-if="opt.labelKey"

shell/components/CodeMirror.vue

@@ -123,12 +123,16 @@ export default {
   },
 
   async mounted() {
-    document.addEventListener('keyup', this.handleKeyPress);
+    const el = this.$refs.codeMirrorContainer;
+
+    el.addEventListener('keydown', this.handleKeyPress);
     this.codeMirrorContainerRef = this.$refs.codeMirrorContainer;
   },
 
   beforeUnmount() {
-    document.removeEventListener('keyup', this.handleKeyPress);
+    const el = this.$refs.codeMirrorContainer;
+
+    el.removeEventListener('keydown', this.handleKeyPress);
   },
 
   watch: {
@@ -158,11 +162,10 @@ export default {
     },
 
     handleKeyPress(ev) {
-      ev.preventDefault();
-      ev.stopPropagation();
-
       // make focus leave the editor for it's parent container so that we can tab
       if (this.isCodeMirrorFocused && ev.code === 'Escape') {
+        ev.preventDefault();
+        ev.stopPropagation();
         this.$refs?.codeMirrorContainer?.focus();
       }
 

shell/components/PodSecurityAdmission.vue

@@ -256,6 +256,7 @@ export default defineComponent({
           :options="options"
           :placeholder="t('podSecurityAdmission.version.placeholder', { psaControl: mode })"
           :mode="mode"
+          :accessibility-label="`${t(`podSecurityAdmission.labels.${level}`)} - ${t('podSecurityAdmission.version.placeholder', { psaControl: mode })}`"
           @update:value="updateLabels()"
         />
       </span>
@@ -295,6 +296,7 @@ export default defineComponent({
             :options="options"
             :placeholder="t('podSecurityAdmission.exemptions.placeholder', { psaExemptionsControl: dimension })"
             :mode="mode"
+            :accessibility-label="`${t(`podSecurityAdmission.labels.${ dimension }`)} - ${t('podSecurityAdmission.exemptions.placeholder', { psaExemptionsControl: dimension })}`"
             @update:value="updateExemptions()"
           />
         </span>

shell/components/PromptRemove.vue

@@ -389,6 +389,7 @@ export default {
           v-focus
           :data-testid="componentTestid + '-input'"
           type="text"
+          :accessibility-label="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) })"
         >
           <div class="text-warning mb-10 mt-10">
             {{ warning }}

shell/components/nav/Header.vue

@@ -81,8 +81,7 @@ export default {
       extensionHeaderActions: getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, this.$route),
       ctx:                    this,
       showImportModal:        false,
-      showSearchModal:        false,
-      currYamlEditor:         undefined
+      showSearchModal:        false
     };
   },
 
@@ -391,10 +390,6 @@ export default {
       }
 
       return null;
-    },
-
-    onReadyYamlEditor(yamlEditor) {
-      this.currYamlEditor = yamlEditor;
     }
   }
 };
@@ -567,12 +562,10 @@ export default {
             width="75%"
             height="auto"
             styles="max-height: 90vh;"
-            :yaml-editor="currYamlEditor"
             @close="closeImport"
           >
             <Import
               :cluster="currentCluster"
-              @onReadyYamlEditor="onReadyYamlEditor"
               @close="closeImport"
             />
           </app-modal>

shell/components/nav/WindowManager/index.vue

@@ -261,15 +261,15 @@ export default {
       this.reportedWidth = this.width;
     },
 
-    setWmDimensions() {
+    setWmDimensions(forceValue) {
       switch (this.userPin) {
       case RIGHT:
       case LEFT:
         document.documentElement.style.setProperty('--wm-height', `${ window.innerHeight - 55 }px`);
-        document.documentElement.style.setProperty('--wm-width', `${ this.width }px`);
+        document.documentElement.style.setProperty('--wm-width', `${ forceValue || this.width }px`);
         break;
       case BOTTOM:
-        document.documentElement.style.setProperty('--wm-height', `${ this.height }px`);
+        document.documentElement.style.setProperty('--wm-height', `${ forceValue || this.height }px`);
         break;
       }
     },
@@ -293,6 +293,30 @@ export default {
 
     emitDraggable(event) {
       this.$emit('draggable', event);
+    },
+
+    resizeVertical(arrowUp) {
+      const resizeStep = 20;
+      const height = arrowUp ? this.height + resizeStep : this.height - resizeStep;
+
+      this.height = height;
+
+      this.setWmDimensions(height);
+    },
+
+    resizeHorizontal(arrowLeft) {
+      const resizeStep = 20;
+      let width;
+
+      if (this.userPin === 'left') {
+        width = arrowLeft ? this.width - resizeStep : this.width + resizeStep;
+      } else {
+        width = arrowLeft ? this.width + resizeStep : this.width - resizeStep;
+      }
+
+      this.width = width;
+
+      this.setWmDimensions(width);
     }
   }
 };
@@ -320,8 +344,14 @@ export default {
       <div
         v-if="userPin == 'right'"
         class="resizer resizer-x"
+        role="button"
+        tabindex="0"
+        :aria-label="t('wm.containerShell.resizeShellWindow')"
+        aria-expanded="true"
         @mousedown.prevent.stop="dragXStart($event)"
         @touchstart.prevent.stop="dragXStart($event)"
+        @keyup.left.prevent.stop="resizeHorizontal(true)"
+        @keyup.right.prevent.stop="resizeHorizontal(false)"
       >
         <i
           class="icon icon-code"
@@ -361,9 +391,15 @@ export default {
       <div
         v-if="userPin == 'bottom'"
         class="resizer resizer-y"
+        role="button"
+        tabindex="0"
+        :aria-label="t('wm.containerShell.resizeShellWindow')"
+        aria-expanded="true"
         @mousedown.prevent.stop="dragYStart($event)"
         @touchstart.prevent.stop="dragYStart($event)"
         @click="toggle"
+        @keyup.up.prevent.stop="resizeVertical(true)"
+        @keyup.down.prevent.stop="resizeVertical(false)"
       >
         <i
           class="icon icon-sort"
@@ -373,8 +409,14 @@ export default {
       <div
         v-if="userPin == 'left'"
         class="resizer resizer-x resizer-align-right"
+        role="button"
+        tabindex="0"
+        :aria-label="t('wm.containerShell.resizeShellWindow')"
+        aria-expanded="true"
         @mousedown.prevent.stop="dragXStart($event)"
         @touchstart.prevent.stop="dragXStart($event)"
+        @keyup.left.prevent.stop="resizeHorizontal(true)"
+        @keyup.right.prevent.stop="resizeHorizontal(false)"
       >
         <i
           class="icon icon-code"

shell/mixins/vue-select-overrides.js

@@ -20,6 +20,9 @@ export default {
 
       // escape
       (out[27] = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
         vm.open = false;
         vm.search = '';
 

shell/pages/c/_cluster/apps/charts/index.vue

@@ -58,12 +58,14 @@ export default {
       showHidden:      null,
       chartOptions:    [
         {
-          label: 'Browse',
-          value: 'browse',
+          label:     this.t('catalog.charts.browseBtn'),
+          value:     'browse',
+          ariaLabel: this.t('catalog.charts.browseAriaLabel')
         },
         {
-          label: 'Featured',
-          value: 'featured'
+          label:     this.t('catalog.charts.featuredBtn'),
+          value:     'featured',
+          ariaLabel: this.t('catalog.charts.featuredAriaLabel')
         }
       ]
     };