Fix DialogContent requires a DialogTitle warning

[toplenboren]

This should fix #55

RadixUI which is used by Vaul, which is used by this library is quite opinionated when it comes to a11y.

It requires to explicitly set <Dialog.Title> (for this library it is <Drawer.TItle>) and <Dialog.Description>

Here is reference issue in Radix: radix-ui/primitives#2986

--

In this PR I just utilize VisuallyHidden and hack my way thorough this warning. The only thing that seems to be added to final DOM is this:

--

Thanks for the lib by the way :-) using it to craft a small pet project, works like charm :-)

[mainsmirnov]

Hey, thank you for your PR.

aria-describedby should be undefined without it. You also rewrite it for restProps in case someone wants to pass it, did you do it on purpose?

[vuonghuuhung]

It worked with me, thank for your solution, I need to patch-package it currently.

[backdownof]

same error

[bragaru-i]

This issue still persist in @2.1.8

`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

and

Warning: Missing `Description` or `aria-describedby={undefined}` for {DialogContent}.
overrideMethod @ hook.js:608
n2.<computed> @ eruda.js?v=f112dd21:3361
(anonymous) @ chunk-JLKUWZTE.js?v=f112dd21:2081
commitHookEffectListMount @ chunk-GKJBSOWT.js?v=f112dd21:16915
invokePassiveEffectMountInDEV @ chunk-GKJBSOWT.js?v=f112dd21:18324
invokeEffectsInDev @ chunk-GKJBSOWT.js?v=f112dd21:19701
commitDoubleInvokeEffectsInDEV @ chunk-GKJBSOWT.js?v=f112dd21:19686
flushPassiveEffectsImpl @ chunk-GKJBSOWT.js?v=f112dd21:19503
flushPassiveEffects @ chunk-GKJBSOWT.js?v=f112dd21:19447
commitRootImpl @ chunk-GKJBSOWT.js?v=f112dd21:19416
commitRoot @ chunk-GKJBSOWT.js?v=f112dd21:19277
performSyncWorkOnRoot @ chunk-GKJBSOWT.js?v=f112dd21:18895
flushSyncCallbacks @ chunk-GKJBSOWT.js?v=f112dd21:9119
(anonymous) @ chunk-GKJBSOWT.js?v=f112dd21:18627

perhaps reexporting styled anatomy parts from radix can help user to fix it by they own?
https://www.radix-ui.com/primitives/docs/components/dialog#anatomy

[sashamelentyev]

Hello. Any news?

[bragaru-i]

Here is my fix:

1. add as a dependency @radix-ui/react-dialog
2. use it in your modal:

import {
  Modal as TGModal,
  ModalProps as TGModalProps,
  VisuallyHidden,
} from '@telegram-apps/telegram-ui';

import { DialogDescription, DialogTitle } from '@radix-ui/react-dialog';




export interface ModalProps extends TGModalProps {
  /**
   * Accessibility text added for aria-describedby
   */
  descriptionText?: string;
  /**
   * Accessibility text added for aria-labelledby
   */
  titleText?: string;
}

export const Modal: FC<ModalProps> = ({
  descriptionText = 'Modal Description',
  titleText = 'Modal title',
  children,
  ...props
}) => {


  return (
    <TGModal
      {...props}

    >
      <VisuallyHidden>
        <DialogDescription>{descriptionText}</DialogDescription>
        <DialogTitle>{titleText}</DialogTitle>
      </VisuallyHidden>
  
      {children}
    </TGModal>
  );
};

telegram-ui do not uses this vital imported accessibility components. On the hood - telegram ui uses vaul which uses react-dialog from radix