diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml index e96d25522a8..66f43e86345 100644 --- a/shell/assets/translations/en-us.yaml +++ b/shell/assets/translations/en-us.yaml @@ -4634,6 +4634,7 @@ namespaceFilter: button: clear: Remove applied namespace filters clearFilter: Clear namespace options filter + removeNamespace: 'Remove {name} from filter' namespaceList: selectLabel: Namespace diff --git a/shell/components/nav/NamespaceFilter.vue b/shell/components/nav/NamespaceFilter.vue index f40d4469495..b11daf14daa 100644 --- a/shell/components/nav/NamespaceFilter.vue +++ b/shell/components/nav/NamespaceFilter.vue @@ -673,9 +673,16 @@ export default { }, removeOption(ns, event) { - this.selectOption(ns); event.preventDefault(); event.stopPropagation(); + + this.selectOption(ns); + + if (event.type !== 'keydown' || this.value.length !== 0) { + return; + } + + this.$refs.namespaceFilterInput.focus(); }, defaultOption() { @@ -782,6 +789,7 @@ export default { ghost class="ns-chip-button" :data-testid="`namespaces-values-close-${j}`" + :aria-label="t('namespaceFilter.removeNamespace', { name: ns.label })" @click="removeOption(ns, $event)" @keydown.enter.space.stop="removeOption(ns, $event)" @mousedown="handleValueMouseDown(ns, $event)" @@ -951,6 +959,10 @@ export default { display: inline-block; border-radius: var(--border-radius); + &:focus, &.focused { + @include focus-outline; + } + .ns-glass { top: 0; bottom: 0;