diff --git a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue index 22c6cdcce9f..b54db056957 100644 --- a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue +++ b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue @@ -113,7 +113,7 @@ export default defineComponent({ primary: { type: Boolean, default: false - }, + } }, emits: ['update:value'], @@ -227,7 +227,7 @@ export default defineComponent({ :checked="isChecked" :value="valueWhenTrue" type="checkbox" - :tabindex="-1" + tabindex="-1" :name="id" @click.stop.prevent > @@ -325,9 +325,14 @@ $fontColor: var(--input-label); width: 14px; background-color: var(--body-bg); border-radius: var(--border-radius); - transition: all 0.3s ease-out; border: 1px solid var(--border); flex-shrink: 0; + + &:focus-visible { + @include focus-outline; + outline-offset: 2px; + border-radius: 0; + } } input { diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml index b976eab397d..da3170feb5b 100644 --- a/shell/assets/translations/en-us.yaml +++ b/shell/assets/translations/en-us.yaml @@ -115,6 +115,7 @@ generic: basic: Basic locale: + menu: Locale selector menu en-us: English zh-hans: 简体中文 none: (None) diff --git a/shell/components/LocaleSelector.vue b/shell/components/LocaleSelector.vue index e2abf5d0cb2..3a310b61eab 100644 --- a/shell/components/LocaleSelector.vue +++ b/shell/components/LocaleSelector.vue @@ -11,7 +11,11 @@ export default { mode: { type: String, default: '' - }, + } + }, + + data() { + return { isLocaleSelectorOpen: false }; }, computed: { @@ -40,8 +44,15 @@ export default { }, methods: { + openLocaleSelector() { + this.isLocaleSelectorOpen = true; + }, + closeLocaleSelector() { + this.isLocaleSelectorOpen = false; + }, switchLocale($event) { this.$store.dispatch('i18n/switchTo', $event); + this.closeLocaleSelector(); }, } }; @@ -50,13 +61,28 @@ export default { @@ -157,10 +161,16 @@ export default { .password { display: flex; flex-direction: column; + .labeled-input { .addon { - padding-left: 12px; - min-width: 65px; + padding-left: 12px; + min-width: 65px; + + .hide-show:focus-visible { + @include focus-outline; + outline-offset: 4px; + } } } .genPassword {