dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.2

package/components/nav/NamespaceFilter.vue

@@ -20,12 +20,15 @@ import { KEY } from '@shell/utils/platform';
 import pAndNFiltering from '@shell/plugins/steve/projectAndNamespaceFiltering.utils';
 import { SETTING } from '@shell/config/settings';
 import paginationUtils from '@shell/utils/pagination-utils';
-import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'
+import { randomStr } from '@shell/utils/string';
+import { RcButton } from '@components/RcButton';
 
 const forcedNamespaceValidTypes = [NAMESPACE_FILTER_KINDS.DIVIDER, NAMESPACE_FILTER_KINDS.PROJECT, NAMESPACE_FILTER_KINDS.NAMESPACE];
 
 export default {
 
+  components: { RcButton },
+
   data() {
     return {
       isOpen:              false,
@@ -36,6 +39,7 @@ export default {
       cachedFiltered:      [],
       NAMESPACE_FILTER_KINDS,
       namespaceFilterMode: undefined,
+      containerId:         `dropdown-${ randomStr() }`,
     };
   },
 
@@ -59,6 +63,9 @@ export default {
       return this.$store.getters[`${ this.currentProduct.inStore }/paginationEnabled`](this.$route.params?.resource) ? paginationUtils.validNsProjectFilters : null;
     },
 
+    /**
+     * Create visible options (filtered version of `options`)
+     */
     filtered() {
       let out = this.options;
 
@@ -138,13 +145,16 @@ export default {
       return createNamespaceFilterKey(this.$store.getters['clusterId'], this.currentProduct);
     },
 
+    /**
+     * Create options (see `filtered` for visible collection)
+     */
     options() {
       const t = this.$store.getters['i18n/t'];
       let out = [];
       const inStore = this.$store.getters['currentStore'](NAMESPACE);
 
       const params = { ...this.$route.params };
-      let resource = params.resource;
+      const resource = params.resource;
 
       // Sometimes, different pages may have different namespaces to filter
       const notFilterNamespaces = this.$store.getters[`type-map/optionsFor`](resource).notFilterNamespace || [];
@@ -337,6 +347,11 @@ export default {
           })
           .filter((x) => !!x);
 
+        if (filters.length !== values.length) {
+          // filter has changed, ensure we persist these to store
+          this.value = filters;
+        }
+
         return filters;
       },
 
@@ -382,10 +397,6 @@ export default {
     }
   },
 
-  beforeUnmount() {
-    this.removeCloseKeyHandler();
-  },
-
   mounted() {
     this.layout();
   },
@@ -401,7 +412,7 @@ export default {
      *
      * This is caused by churn of the filtered and options computed properties causing multiple renders for each action.
      *
-     * To break this multiple-render per cycle behaviour detatch `filtered` from the value used in `v-for`.
+     * To break this multiple-render per cycle behaviour detach `filtered` from the value used in `v-for`.
      *
      */
     filtered(neu) {
@@ -478,28 +489,25 @@ export default {
         }
       });
     },
-    addCloseKeyHandler() {
-      document.addEventListener('keyup', this.closeKeyHandler);
-    },
-    removeCloseKeyHandler() {
-      document.removeEventListener('keyup', this.closeKeyHandler);
-    },
-    closeKeyHandler(e) {
-      if (e.keyCode === KEY.ESCAPE ) {
-        this.close();
-      }
-    },
     // Keyboard support
     itemKeyHandler(e, opt) {
       if (e.keyCode === KEY.DOWN ) {
         e.preventDefault();
         e.stopPropagation();
         this.down();
-      } else if (e.keyCode === KEY.UP ) {
+
+        return;
+      }
+
+      if (e.keyCode === KEY.UP) {
         e.preventDefault();
         e.stopPropagation();
         this.up();
-      } else if (e.keyCode === KEY.SPACE || e.keyCode === KEY.CR) {
+
+        return;
+      }
+
+      if (e.keyCode === KEY.SPACE || e.keyCode === KEY.CR) {
         if (this.namespaceFilterMode && !opt.enabled) {
           return;
         }
@@ -516,10 +524,8 @@ export default {
         e.stopPropagation();
         this.down(true);
         break;
-      case KEY.TAB:
-        // Tab out of the input box
+      case KEY.ESCAPE:
         this.close();
-        e.target.blur();
         break;
       case KEY.CR:
         if (this.filtered.length === 1) {
@@ -527,6 +533,10 @@ export default {
           this.filter = '';
         }
         break;
+      case KEY.TAB:
+        if (e.shiftKey) {
+          this.close();
+        }
       }
     },
     mouseOver(event) {
@@ -542,11 +552,11 @@ export default {
       el.focus();
       this.activeElement = null;
     },
-    down(input) {
-      const exising = this.activeElement || document.activeElement;
+    down(input, focusFirst = true) {
+      const existing = this.activeElement || document.activeElement;
 
       // Focus the first element in the list
-      if (input || !exising) {
+      if (input || (!existing && !focusFirst)) {
         if (this.$refs.options) {
           const c = this.$refs.options.children;
 
@@ -555,15 +565,15 @@ export default {
           }
         }
       } else {
-        let next = exising.nextSibling;
+        let next = existing.nextElementSibling;
 
-        if (next?.children?.length) {
-          const item = next.children[0];
+        if (!next) {
+          next = existing.parentNode.firstElementChild;
+        }
 
-          // Skip over dividers (assumes we don't have two dividers next to each other)
-          if (item.classList.contains('ns-divider')) {
-            next = next.nextSibling;
-          }
+        // Skip over dividers (assumes we don't have two dividers next to each other)
+        if (next?.classList.contains('ns-divider')) {
+          next = next.nextElementSibling;
         }
 
         if (next?.focus) {
@@ -572,15 +582,17 @@ export default {
       }
     },
     up() {
-      if (document.activeElement) {
-        let prev = document.activeElement.previousSibling;
+      const existing = this.activeElement || document.activeElement;
 
-        if (prev?.children?.length) {
-          const item = prev.children[0];
+      if (existing) {
+        let prev = document.activeElement.previousElementSibling;
 
-          if (item.classList.contains('ns-divider')) {
-            prev = prev.previousSibling;
-          }
+        if (!prev) {
+          prev = existing.parentNode.lastElementChild;
+        }
+
+        if (prev.classList.contains('ns-divider')) {
+          prev = prev.previousElementSibling;
         }
 
         if (prev?.focus) {
@@ -600,17 +612,20 @@ export default {
       this.$nextTick(() => {
         this.focusFilter();
       });
-      this.addCloseKeyHandler();
       this.layout();
     },
+    clearFilter() {
+      this.filter = '';
+      this.focusFilter();
+    },
     focusFilter() {
-      this.$refs.filter.focus();
+      this.$refs.filterInput.focus();
     },
     close() {
       this.isOpen = false;
       this.activeElement = null;
-      this.removeCloseKeyHandler();
       this.layout();
+      this.$refs.namespaceFilterInput.focus();
     },
     clear() {
       this.value = [];
@@ -690,11 +705,16 @@ export default {
 <template>
   <div
     v-if="!$fetchState.pending"
+    ref="namespaceFilterInput"
+    role="combobox"
+    :aria-expanded="isOpen"
+    :aria-activedescendant="containerId"
     class="ns-filter"
     data-testid="namespaces-filter"
+    :aria-label="t('generic.namespaceFilter')"
     tabindex="0"
     @mousedown.prevent
-    @focus="open()"
+    @keydown.self.down.enter.space.prevent="open"
   >
     <div
       v-if="isOpen"
@@ -704,6 +724,7 @@ export default {
 
     <!-- Select Dropdown control -->
     <div
+      :id="containerId"
       ref="dropdown"
       class="ns-dropdown"
       data-testid="namespaces-dropdown"
@@ -755,13 +776,18 @@ export default {
         >
           <div>{{ ns.label }}</div>
           <!-- block user from removing the last selection if ns forced filtering is on -->
-          <i
+          <RcButton
             v-if="!namespaceFilterMode || value.length > 1"
-            class="icon icon-close"
+            small
+            ghost
+            class="ns-chip-button"
             :data-testid="`namespaces-values-close-${j}`"
             @click="removeOption(ns, $event)"
+            @keydown.enter.space.stop="removeOption(ns, $event)"
             @mousedown="handleValueMouseDown(ns, $event)"
-          />
+          >
+            <i class="icon icon-close" />
+          </RcButton>
         </div>
       </div>
 
@@ -796,20 +822,33 @@ export default {
       data-testid="namespaces-menu"
     >
       <div class="ns-controls">
-        <div class="ns-input">
+        <div
+          class="ns-input"
+          role="status"
+          aria-live="polite"
+        >
           <input
-            ref="filter"
+            ref="filterInput"
             v-model="filter"
             tabindex="0"
             class="ns-filter-input"
+            :aria-label="t('namespaceFilter.input')"
             @click="focusFilter"
             @keydown="inputKeyHandler($event)"
           >
-          <i
+          <RcButton
             v-if="hasFilter"
-            class="ns-filter-clear icon icon-close"
-            @click="filter = ''"
-          />
+            small
+            ghost
+            class="ns-filter-clear"
+            :aria-label="t('namespaceFilter.button.clearFilter')"
+            @click="clearFilter"
+            @keydown.enter.stop="clearFilter"
+          >
+            <i
+              class="icon icon-close"
+            />
+          </RcButton>
         </div>
         <div
           v-if="namespaceFilterMode"
@@ -820,57 +859,74 @@ export default {
             class="icon icon-info"
           />
         </div>
-        <div
+        <RcButton
           v-else
+          small
+          ghost
           class="ns-clear"
+          :aria-label="t('namespaceFilter.button.clear')"
+          @click="clear"
+          @keydown.enter.stop="clear"
+          @keydown.tab.exact.prevent="down"
         >
           <i
             class="icon icon-close"
-            @click="clear()"
           />
-        </div>
+        </RcButton>
       </div>
       <div class="ns-divider mt-0" />
       <div
         ref="options"
         class="ns-options"
-        role="list"
+        role="listbox"
+        tabindex="0"
+        aria-live="polite"
+        @keydown.down.enter.stop="down"
+        @keydown.escape="close"
+        @keydown.tab.exact.stop="close"
       >
-        <div
+        <template
           v-for="(opt, i) in cachedFiltered"
-          :id="opt.elementId"
           :key="opt.id"
-          tabindex="0"
-          class="ns-option"
-          :disabled="opt.enabled ? null : true"
-          :class="{
-            'ns-selected': opt.selected,
-            'ns-single-match': cachedFiltered.length === 1 && !opt.selected,
-          }"
-          :data-testid="`namespaces-option-${i}`"
-          @click="opt.enabled && selectOption(opt)"
-          @mouseover="opt.enabled && mouseOver($event)"
-          @keydown="itemKeyHandler($event, opt)"
         >
-          <div
+          <hr
             v-if="opt.kind === NAMESPACE_FILTER_KINDS.DIVIDER"
+            role="separator"
+            aria-orientation="horizontal"
             class="ns-divider"
-          />
+          >
           <div
             v-else
-            class="ns-item"
+            :id="opt.elementId"
+            tabindex="-1"
+            role="option"
+            class="ns-option"
+            :aria-selected="opt.selected"
+            :disabled="opt.enabled ? null : true"
+            :class="{
+              'ns-selected': opt.selected,
+              'ns-single-match': cachedFiltered.length === 1 && !opt.selected,
+            }"
+            :data-testid="`namespaces-option-${i}`"
+            @click="opt.enabled && selectOption(opt)"
+            @mouseover="opt.enabled && mouseOver($event)"
+            @keydown="itemKeyHandler($event, opt)"
           >
-            <i
-              v-if="opt.kind === NAMESPACE_FILTER_KINDS.NAMESPACE"
-              class="icon icon-folder"
-            />
-            <div>{{ opt.label }}</div>
-            <i
-              v-if="opt.selected"
-              class="icon icon-checkmark"
-            />
+            <div
+              class="ns-item"
+            >
+              <i
+                v-if="opt.kind === NAMESPACE_FILTER_KINDS.NAMESPACE"
+                class="icon icon-folder"
+              />
+              <div>{{ opt.label }}</div>
+              <i
+                v-if="opt.selected"
+                class="icon icon-checkmark"
+              />
+            </div>
           </div>
-        </div>
+        </template>
         <div
           v-if="cachedFiltered.length === 0"
           class="ns-none"
@@ -893,6 +949,7 @@ export default {
   .ns-filter {
     width: 280px;
     display: inline-block;
+    border-radius: var(--border-radius);
 
     .ns-glass {
       top: 0;
@@ -911,9 +968,9 @@ export default {
     }
 
     .ns-clear {
+      padding: 0 5px;
       &:hover {
         color: var(--primary);
-        cursor: pointer;
       }
     }