strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine cmd-k accessibility

Browse Source
This commit is contained in:
Sam Becker 2025-01-05 16:16:47 -06:00
parent dd88e75413
commit 6dbedd3d6d
3 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -13,7 +13,9 @@
"@aws-sdk/client-s3": "3.722.0",
"@aws-sdk/s3-request-presigner": "3.722.0",
"@next/bundle-analyzer": "15.1.3",
"@radix-ui/react-dialog": "^1.1.4",
"@radix-ui/react-dropdown-menu": "^2.1.4",
"@radix-ui/react-visually-hidden": "^1.1.1",
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/forms": "^0.5.9",
"@testing-library/jest-dom": "^6.6.3",

56
pnpm-lock.yaml generated
View File

@ -20,9 +20,15 @@ importers:
'@next/bundle-analyzer':
specifier: 15.1.3
version: 15.1.3
'@radix-ui/react-dialog':
specifier: ^1.1.4
version: 1.1.4(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@radix-ui/react-dropdown-menu':
specifier: ^2.1.4
version: 2.1.4(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@radix-ui/react-visually-hidden':
specifier: ^1.1.1
version: 1.1.1(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@tailwindcss/container-queries':
specifier: ^0.1.1
version: 0.1.1(tailwindcss@3.4.17)
@ -1233,6 +1239,19 @@ packages:
'@types/react':
optional: true
'@radix-ui/react-visually-hidden@1.1.1':
resolution: {integrity: sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
'@radix-ui/rect@1.1.0':
resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
@ -2752,9 +2771,6 @@ packages:
resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
engines: {node: '>= 0.4'}
invariant@2.2.4:
resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
is-array-buffer@3.0.5:
resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
engines: {node: '>= 0.4'}
@ -3722,16 +3738,6 @@ packages:
'@types/react':
optional: true
react-style-singleton@2.2.1:
resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
engines: {node: '>=10'}
peerDependencies:
'@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
react: ^16.8.0 || ^17.0.0 || ^18.0.0
peerDependenciesMeta:
'@types/react':
optional: true
react-style-singleton@2.2.3:
resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
engines: {node: '>=10'}
@ -5855,6 +5861,15 @@ snapshots:
optionalDependencies:
'@types/react': 19.0.2
'@radix-ui/react-visually-hidden@1.1.1(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies:
'@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
optionalDependencies:
'@types/react': 19.0.2
'@types/react-dom': 19.0.2(@types/react@19.0.2)
'@radix-ui/rect@1.1.0': {}
'@rtsao/scc@1.1.0': {}
@ -7744,10 +7759,6 @@ snapshots:
hasown: 2.0.2
side-channel: 1.1.0
invariant@2.2.4:
dependencies:
loose-envify: 1.4.0
is-array-buffer@3.0.5:
dependencies:
call-bind: 1.0.8
@ -8847,22 +8858,13 @@ snapshots:
dependencies:
react: 19.0.0
react-remove-scroll-bar: 2.3.8(@types/react@19.0.2)(react@19.0.0)
react-style-singleton: 2.2.1(@types/react@19.0.2)(react@19.0.0)
react-style-singleton: 2.2.3(@types/react@19.0.2)(react@19.0.0)
tslib: 2.8.1
use-callback-ref: 1.3.3(@types/react@19.0.2)(react@19.0.0)
use-sidecar: 1.1.2(@types/react@19.0.2)(react@19.0.0)
optionalDependencies:
'@types/react': 19.0.2
react-style-singleton@2.2.1(@types/react@19.0.2)(react@19.0.0):
dependencies:
get-nonce: 1.0.1
invariant: 2.2.4
react: 19.0.0
tslib: 2.8.1
optionalDependencies:
'@types/react': 19.0.2
react-style-singleton@2.2.3(@types/react@19.0.2)(react@19.0.0):
dependencies:
get-nonce: 1.0.1

10
src/components/cmdk/CommandKClient.tsx
View File

@ -46,6 +46,11 @@ import { FaTag } from 'react-icons/fa';
import { formatCount, formatCountDescriptive } from '@/utility/string';
import CommandKItem from './CommandKItem';
import { GRID_HOMEPAGE_ENABLED } from '@/site/config';
import { DialogDescription, DialogTitle } from '@radix-ui/react-dialog';
import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
const DIALOG_TITLE = 'Global Command-K Menu';
const DIALOG_DESCRIPTION = 'For searching photos, views, and settings';
const LISTENER_KEYDOWN = 'keydown';
const MINIMUM_QUERY_LENGTH = 2;
@ -343,7 +348,6 @@ export default function CommandKClient({
<Command.Dialog
open={isOpen}
onOpenChange={setIsOpen}
label="Global Command Menu"
filter={(value, search, keywords) => {
const searchFormatted = search.trim().toLocaleLowerCase();
return (
@ -360,6 +364,10 @@ export default function CommandKClient({
>
<div className="space-y-1.5">
<div className="relative">
<VisuallyHidden.Root>
<DialogTitle>{DIALOG_TITLE}</DialogTitle>
<DialogDescription>{DIALOG_DESCRIPTION}</DialogDescription>
</VisuallyHidden.Root>
<Command.Input
onChangeCapture={(e) => setQueryLive(e.currentTarget.value)}
className={clsx(