Skip to content

Commit 0acba79

Browse files
authored
Silence aria-descriedby warning in test (#2638)
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> <!-- Fixes #0000 --> - None ## Summary <!-- Please brief explanation of the changes made --> 2개의 콘솔 warning과 error 메시지를 제거합니다. ```Warning: Missing `Description` or `aria-describedby={undefined}` for {DialogContent}.``` ``` `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. ``` ## Details <!-- Please elaborate description of the changes --> - DialogContent 와 연결된 described-by 가 있기를 기대하는데 ModalHeaderProps에 description 을 주지 않아서 워닝이 뜨고 있었습니다. DialogContent에 described-by={undefined} 를 추가했습니다. - ModalHeader 가 필요없더라도 VisuallyHidden 을 써야 접근성을 해치지 않기 때문에 명시적으로 hidden 속성을 줬습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> - No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://www.radix-ui.com/primitives/docs/components/dialog#description
1 parent 124beac commit 0acba79

File tree

1 file changed

+8
-1
lines changed

1 file changed

+8
-1
lines changed

packages/bezier-react/src/components/Modal/Modal.test.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,13 +157,15 @@ describe('Modal', () => {
157157
it("should have proper 'aria-labelledby' attribute (only title)", () => {
158158
const { getByRole } = renderOpenedModal({
159159
modalHeaderProps: { title: TITLE_TEXT, subtitle: null },
160+
modalContentProps: { 'aria-describedby': undefined },
160161
})
161162
expect(getByRole('dialog', { name: TITLE_TEXT })).toBeInTheDocument()
162163
})
163164

164165
it("should have proper 'aria-labelledby' attribute (hidden title)", () => {
165166
const { getByRole } = renderOpenedModal({
166167
modalHeaderProps: { title: TITLE_TEXT, subtitle: null, hidden: true },
168+
modalContentProps: { 'aria-describedby': undefined },
167169
})
168170
expect(getByRole('dialog', { name: TITLE_TEXT })).toBeInTheDocument()
169171
})
@@ -248,6 +250,7 @@ describe('Modal', () => {
248250

249251
it("should be visually hidden when the 'hidden' prop is true", () => {
250252
const { queryByRole } = renderOpenedModal({
253+
modalContentProps: { 'aria-describedby': undefined },
251254
modalHeaderProps: { title: TITLE_TEXT, hidden: true },
252255
})
253256
/**
@@ -330,7 +333,11 @@ describe('Modal', () => {
330333
<ModalTrigger>
331334
<button type="button">{TRIGGER_TEXT}</button>
332335
</ModalTrigger>
333-
<ModalContent>
336+
<ModalContent aria-describedby={undefined}>
337+
<ModalHeader
338+
hidden
339+
title={TITLE_TEXT}
340+
/>
334341
<ModalBody>
335342
<input type="text" />
336343
</ModalBody>

0 commit comments

Comments
 (0)