search

thirdweb-dev / js

Best in class web3 SDKs for Browser, Node and Mobile apps
https://thirdweb.com
Apache License 2.0
420 stars 314 forks source link

Warning Appears When Opening the Modal #4313

Closed ninpeng closed 2 weeks ago

ninpeng commented 2 weeks ago

I keep receiving the following warning when I open modals such as the Connect modal or the Detail modal.

Warning

app-index.js:33 `DialogContent` requires a `DialogTitle` for the component to be accessible for screen reader users.

If you want to hide the `DialogTitle`, you can wrap it with our VisuallyHidden component.

For more information, see https://radix-ui.com/primitives/docs/components/dialog 
    at TitleWarning (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-dialog/dist/index.mjs:434:11)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-dialog/dist/index.mjs:315:13)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-dialog/dist/index.mjs:237:58)
    at Presence (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-presence@1.1.0_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-presence/dist/index.mjs:28:13)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-dialog/dist/index.mjs:209:64)
    at div
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-primitive@2.0.0_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-primitive/dist/index.mjs:36:13)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-focus-scope@1.1.0_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3._usminssybtbyaqudt5yvwzn5uq/node_modules/@radix-ui/react-focus-scope/dist/index.mjs:27:13)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-slot@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.mjs:34:11)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-slot@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.mjs:15:11)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-primitive@2.0.0_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-primitive/dist/index.mjs:36:13)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-portal@1.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-portal/dist/index.mjs:22:24)
    at Presence (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-presence@1.1.0_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-presence/dist/index.mjs:28:13)
    at Provider (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-context@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-context/dist/index.mjs:34:15)
    at DialogPortal (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-dialog/dist/index.mjs:130:13)
    at Provider (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-context@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-context/dist/index.mjs:34:15)
    at Dialog (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-dialog/dist/index.mjs:61:13)
    at Modal (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/thirdweb@5.44.0_@types+react-dom@18.3.0_@types+react@18.3.3_bufferutil@4.0.8_react-dom@18.3.1_tqrwroblpbk4gqatndmcliwmou/node_modules/thirdweb/dist/esm/react/web/ui/components/Modal.js:59:83)
    at ConnectButtonInner (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/thirdweb@5.44.0_@types+react-dom@18.3.0_@types+react@18.3.3_bufferutil@4.0.8_react-dom@18.3.1_tqrwroblpbk4gqatndmcliwmou/node_modules/thirdweb/dist/esm/react/web/ui/ConnectWallet/ConnectButton.js:387:114)
    at CustomThemeProvider (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/thirdweb@5.44.0_@types+react-dom@18.3.0_@types+react@18.3.3_bufferutil@4.0.8_react-dom@18.3.1_tqrwroblpbk4gqatndmcliwmou/node_modules/thirdweb/dist/esm/react/core/design-system/CustomThemeProvider.js:19:13)
    at WalletUIStatesProvider (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/thirdweb@5.44.0_@types+react-dom@18.3.0_@types+react@18.3.3_bufferutil@4.0.8_react-dom@18.3.1_tqrwroblpbk4gqatndmcliwmou/node_module
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:63
overrideMethod @ console.js:288
eval @ index.mjs:441

console.js:288 Warning: Missing `Description` or `aria-describedby={undefined}` for {DialogContent}. 
    at DescriptionWarning (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-dialog/dist/index.mjs:457:11)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-dialog/dist/index.mjs:315:13)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-dialog/dist/index.mjs:237:58)
    at Presence (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-presence@1.1.0_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-presence/dist/index.mjs:28:13)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-dialog/dist/index.mjs:209:64)
    at div
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-primitive@2.0.0_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-primitive/dist/index.mjs:36:13)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-focus-scope@1.1.0_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3._usminssybtbyaqudt5yvwzn5uq/node_modules/@radix-ui/react-focus-scope/dist/index.mjs:27:13)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-slot@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.mjs:34:11)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-slot@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.mjs:15:11)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-primitive@2.0.0_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-primitive/dist/index.mjs:36:13)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-portal@1.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-portal/dist/index.mjs:22:24)
    at Presence (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-presence@1.1.0_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-presence/dist/index.mjs:28:13)
    at Provider (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-context@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-context/dist/index.mjs:34:15)
    at DialogPortal (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-dialog/dist/index.mjs:130:13)
    at Provider (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-context@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-context/dist/index.mjs:34:15)
    at Dialog (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-dialog/dist/index.mjs:61:13)
    at Modal (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/thirdweb@5.44.0_@types+react-dom@18.3.0_@types+react@18.3.3_bufferutil@4.0.8_react-dom@18.3.1_tqrwroblpbk4gqatndmcliwmou/node_modules/thirdweb/dist/esm/react/web/ui/components/Modal.js:59:83)
    at ConnectButtonInner (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/thirdweb@5.44.0_@types+react-dom@18.3.0_@types+react@18.3.3_bufferutil@4.0.8_react-dom@18.3.1_tqrwroblpbk4gqatndmcliwmou/node_modules/thirdweb/dist/esm/react/web/ui/ConnectWallet/ConnectButton.js:387:114)
    at CustomThemeProvider (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/thirdweb@5.44.0_@types+react-dom@18.3.0_@types+react@18.3.3_bufferutil@4.0.8_react-dom@18.3.1_tqrwroblpbk4gqatndmcliwmou/node_modules/thirdweb/dist/esm/react/core/design-system/CustomThemeProvider.js:19:13)
    at WalletUIStatesProvider (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/thirdweb@5.44.0_@types+react-dom@18.3.0_@types+react@18.3.3_bufferutil@4.0.8_react-dom@18.3.1_tqrwroblpbk4gqatndmcliwmou/node_
overrideMethod @ console.js:288
eval @ index.mjs:466

Solution

Insert this code where the Dialog component of shadcn-ui is used.

import { VisuallyHidden } from '@radix-ui/react-visually-hidden';

<DialogContent aria-describedby={undefined}>
  <VisuallyHidden asChild>
    <DialogTitle>some title</DialogTitle>
  </VisuallyHidden>
...
</DialogContent>
gregfromstl commented 2 weeks ago

Thanks for reporting this @ninpeng, we'll have a fix merged soon