Fix DialogContent requires a DialogTitle warning #62
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mainsmirnov
reviewed
Nov 11, 2024
| @@ -108,7 +109,9 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(({ | |||
| ref={ref} | |||
| className={classNames(styles.wrapper, className)} | |||
| {...restProps} | |||
| aria-describedby={undefined} | |||
There was a problem hiding this comment.
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?
|
It worked with me, thank for your solution, I need to patch-package it currently. |
|
same error |
|
This issue still persist in and perhaps reexporting styled anatomy parts from radix can help user to fix it by they own? |
|
Hello. Any news? |
|
Here is my fix:
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>
);
};
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
VisuallyHiddenand 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 :-)