Skip to content

Commit 1f4a52c

Browse files
Make searchbox first focused element in settings dialog (#5804)
## Summary Resolves #5164 by adding `autofocus` prop to common `SearchBox` component then enabled for the settings dialog search box (changing first focused element from the close button). Previously, searchbox was the 2nd item in tab order. ## Review Focus Accessibility implications of automatic focus and potential interference with screen readers or keyboard navigation patterns. Already discussed this previously w.r.t. accessibility, but only now implementing. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5804-Make-searchbox-first-focused-element-in-settings-dialog-27a6d73d3650814997facfa2418e1d40) by [Unito](https://www.unito.io)
1 parent f2e925d commit 1f4a52c

File tree

2 files changed

+5
-1
lines changed

2 files changed

+5
-1
lines changed

src/components/common/SearchBox.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
class="search-box-input w-full"
1414
:model-value="modelValue"
1515
:placeholder="placeholder"
16+
:autofocus="autofocus"
1617
@input="handleInput"
1718
/>
1819
<InputIcon v-if="!modelValue" :class="icon" />
@@ -57,14 +58,16 @@ const {
5758
icon = 'pi pi-search',
5859
debounceTime = 300,
5960
filterIcon,
60-
filters = []
61+
filters = [],
62+
autofocus = false
6163
} = defineProps<{
6264
modelValue: string
6365
placeholder?: string
6466
icon?: string
6567
debounceTime?: number
6668
filterIcon?: string
6769
filters?: TFilter[]
70+
autofocus?: boolean
6871
}>()
6972
7073
const emit = defineEmits<{

src/platform/settings/components/SettingDialogContent.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
class="settings-search-box w-full mb-2"
77
:placeholder="$t('g.searchSettings') + '...'"
88
:debounce-time="128"
9+
autofocus
910
@search="handleSearch"
1011
/>
1112
<Listbox

0 commit comments

Comments
 (0)