diff --git a/.changeset/breezy-cups-turn.md b/.changeset/breezy-cups-turn.md new file mode 100644 index 0000000000..460b22d36e --- /dev/null +++ b/.changeset/breezy-cups-turn.md @@ -0,0 +1,7 @@ +--- +"sit-onyx": patch +--- + +fix(OnyxInput): prevent keyboard focus on clear icon + +The clear icon is no longer focusable via keyboard to not interrupt the users tab order when multiple form elements are used. diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue index 5942e2f429..e08388816f 100644 --- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue +++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue @@ -103,6 +103,7 @@ const errorClass = useErrorClass(showError); class="onyx-input__clear" :aria-label="t('input.clear')" :title="t('input.clear')" + tabindex="-1" @click="() => (value = '')" > @@ -161,15 +162,9 @@ const errorClass = useErrorClass(showError); cursor: pointer; color: var(--onyx-color-text-icons-neutral-intense); - &:hover, - &:focus-visible { + &:hover { color: var(--onyx-color-text-icons-primary-intense); } - - &:focus-visible { - outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); - border-radius: var(--onyx-radius-sm); - } } // hide clear icon when input is not focussed