diff --git a/package.json b/package.json index 48b0ff63..ca160fa2 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 03e78ee1..347524a5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/src/components/cmdk/CommandKClient.tsx b/src/components/cmdk/CommandKClient.tsx index 3d679263..f95ec9c1 100644 --- a/src/components/cmdk/CommandKClient.tsx +++ b/src/components/cmdk/CommandKClient.tsx @@ -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({ { const searchFormatted = search.trim().toLocaleLowerCase(); return ( @@ -360,6 +364,10 @@ export default function CommandKClient({ >
+ + {DIALOG_TITLE} + {DIALOG_DESCRIPTION} + setQueryLive(e.currentTarget.value)} className={clsx(