Skip to content

[autocomplete] Improve command palette accessibility #4949

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SSDWGG wants to merge 1 commit into
base: master
Choose a base branch
from
+31 −1
Open

[autocomplete] Improve command palette accessibility #4949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ...p/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -363,6 +363,7 @@
}
}

.VisuallyHidden,
.VisuallyHiddenClose {
position: absolute;
width: 1px;
Expand Down
17 changes: 16 additions & 1 deletion .../src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import styles from './index.module.css';

export default function ExampleAutocompleteCommandPalette() {
const [open, setOpen] = React.useState(false);
const inputRef = React.useRef<HTMLInputElement>(null);
const shortcutsDescriptionId = React.useId();

function handleItemClick() {
setOpen(false);
Expand All @@ -18,7 +20,11 @@ export default function ExampleAutocompleteCommandPalette() {
<Dialog.Portal>
<Dialog.Backdrop className={styles.Backdrop} />
<Dialog.Viewport className={styles.Viewport}>
<Dialog.Popup className={styles.Popup} aria-label="Command palette">
<Dialog.Popup
className={styles.Popup}
aria-label="Command palette"
initialFocus={inputRef}
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot May 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Preserve touch focus behavior when opening

When the palette is opened from a touch trigger, this unconditional initialFocus={inputRef} bypasses Dialog.Popup's default touch behavior in DialogPopup.tsx, which focuses the popup instead of an input to avoid opening the virtual keyboard. On phones/tablets, tapping “Open command palette” in this demo (and the Tailwind variant with the same prop) will now immediately focus the search field and show the keyboard; consider using an initialFocus function that only returns the input for non-touch opens and preserves the popup/default behavior for touch.

Useful? React with 👍 / 👎.

>
<Autocomplete.Root
open
inline
Expand All @@ -27,7 +33,10 @@ export default function ExampleAutocompleteCommandPalette() {
keepHighlight
>
<Autocomplete.Input
ref={inputRef}
className={styles.Input}
aria-label="Search commands"
aria-describedby={shortcutsDescriptionId}
placeholder="Search for apps and commands…"
/>
<Dialog.Close className={styles.VisuallyHiddenClose}>
Expand Down Expand Up @@ -77,12 +86,18 @@ export default function ExampleAutocompleteCommandPalette() {
</ScrollArea.Root>

<div className={styles.Footer}>
<span id={shortcutsDescriptionId} className={styles.VisuallyHidden}>
Use Enter to activate the highlighted item. Use Control or Command K for command
actions.
</span>
<div className={styles.FooterLeft}>
<span>Activate</span>
<kbd className={styles.Kbd}>Enter</kbd>
</div>
<div className={styles.FooterRight}>
<span>Actions</span>
<kbd className={styles.Kbd}>Ctrl</kbd>
<span>/</span>
<kbd className={styles.Kbd}>Cmd</kbd>
<kbd className={styles.Kbd}>K</kbd>
</div>
Expand Down
14 changes: 14 additions & 0 deletions docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { ScrollArea } from '@base-ui/react/scroll-area';

export default function ExampleAutocompleteCommandPalette() {
const [open, setOpen] = React.useState(false);
const inputRef = React.useRef<HTMLInputElement>(null);
const shortcutsDescriptionId = React.useId();

function handleItemClick() {
setOpen(false);
Expand All @@ -22,6 +24,7 @@ export default function ExampleAutocompleteCommandPalette() {
<Dialog.Popup
className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-md flex-col border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[translate,scale,opacity] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
aria-label="Command palette"
initialFocus={inputRef}
>
<Autocomplete.Root
open
Expand All @@ -31,7 +34,10 @@ export default function ExampleAutocompleteCommandPalette() {
keepHighlight
>
<Autocomplete.Input
ref={inputRef}
className="relative z-1 h-10 w-full border-0 bg-white px-3 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400"
aria-label="Search commands"
aria-describedby={shortcutsDescriptionId}
placeholder="Search for apps and commands…"
/>
<Dialog.Close className="sr-only">Close command palette</Dialog.Close>
Expand Down Expand Up @@ -81,6 +87,10 @@ export default function ExampleAutocompleteCommandPalette() {
</ScrollArea.Root>

<div className="flex items-center justify-between border-t border-neutral-950 bg-white px-3 py-2.5 text-xs text-neutral-600 dark:border-white dark:bg-neutral-950 dark:text-neutral-400">
<span id={shortcutsDescriptionId} className="sr-only">
Use Enter to activate the highlighted item. Use Control or Command K for command
actions.
</span>
<div className="flex items-center gap-1">
<span>Activate</span>
<kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-400 bg-neutral-100 px-1 font-mono text-[0.625rem] leading-none font-normal text-neutral-600 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400">
Expand All @@ -89,6 +99,10 @@ export default function ExampleAutocompleteCommandPalette() {
</div>
<div className="flex items-center gap-1">
<span>Actions</span>
<kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-400 bg-neutral-100 px-1 font-mono text-[0.625rem] leading-none font-normal text-neutral-600 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400">
Ctrl
</kbd>
<span>/</span>
<kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-400 bg-neutral-100 px-1 font-mono text-[0.625rem] leading-none font-normal text-neutral-600 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400">
Cmd
</kbd>
Expand Down
Loading