diff --git a/packages/vkui/src/components/Accordion/Accordion.test.tsx b/packages/vkui/src/components/Accordion/Accordion.test.tsx index 3951d76e60..fb58cb6ecd 100644 --- a/packages/vkui/src/components/Accordion/Accordion.test.tsx +++ b/packages/vkui/src/components/Accordion/Accordion.test.tsx @@ -1,10 +1,19 @@ import { fireEvent, render } from '@testing-library/react'; -import { baselineComponent, waitCSSKeyframesAnimation } from '../../testing/utils'; +import { a11yTest, baselineComponent, waitCSSKeyframesAnimation } from '../../testing/utils'; import { Accordion } from './Accordion'; describe(Accordion, () => { + a11yTest(() => ( + + + Title + + Content + + )); + baselineComponent(Accordion.Content); - baselineComponent(Accordion.Summary, { a11y: false }); + baselineComponent((props) => Title); it('toggles on click', async () => { const result = render( diff --git a/packages/vkui/src/components/Alert/Alert.test.tsx b/packages/vkui/src/components/Alert/Alert.test.tsx index a17e9281f7..f81b779e87 100644 --- a/packages/vkui/src/components/Alert/Alert.test.tsx +++ b/packages/vkui/src/components/Alert/Alert.test.tsx @@ -7,6 +7,7 @@ import { Platform } from '../../lib/platform'; import { baselineComponent, fakeTimers, + setNodeEnv, userEvent, waitCSSKeyframesAnimation, } from '../../testing/utils'; @@ -25,9 +26,28 @@ import typographyStyles from '../Typography/Typography.module.css'; describe('Alert', () => { fakeTimers(); - baselineComponent(Alert, { - // TODO [a11y]: "ARIA dialog and alertdialog nodes should have an accessible name (aria-dialog-name)" - a11y: false, + baselineComponent((props) => , {}); + + it('shows warning if title and area attributes are not provided', () => { + setNodeEnv('development'); + const warn = jest.spyOn(console, 'warn').mockImplementation(noop); + + const component = render(); + expect(warn).not.toHaveBeenCalled(); + + component.rerender(); + expect(warn).not.toHaveBeenCalled(); + + component.rerender(); + expect(warn).not.toHaveBeenCalled(); + + component.rerender(); + + expect(warn.mock.calls[0][0]).toBe( + '%c[VKUI/Alert] Если "title" не используется, то необходимо задать либо "aria-label", либо "aria-labelledby" (см. правило axe aria-dialog-name)', + ); + + setNodeEnv('test'); }); describe('closes', () => { diff --git a/packages/vkui/src/components/Alert/Alert.tsx b/packages/vkui/src/components/Alert/Alert.tsx index bd663e2b74..8d1fd0f3e2 100644 --- a/packages/vkui/src/components/Alert/Alert.tsx +++ b/packages/vkui/src/components/Alert/Alert.tsx @@ -8,6 +8,7 @@ import { type UseFocusTrapProps } from '../../hooks/useFocusTrap'; import { usePlatform } from '../../hooks/usePlatform'; import { useCSSKeyframesAnimationController } from '../../lib/animation'; import { stopPropagation } from '../../lib/utils'; +import { warnOnce } from '../../lib/warnOnce'; import type { AlignType, AnchorHTMLAttributesOnly, @@ -81,6 +82,8 @@ export interface AlertProps allowClickPropagation?: boolean; } +const warn = warnOnce('Alert'); + /** * @see https://vkcom.github.io/VKUI/#/Alert */ @@ -149,6 +152,17 @@ export const Alert = ({ useScrollLock(); + if ( + process.env.NODE_ENV === 'development' && + !title && + !restProps['aria-label'] && + !restProps['aria-labelledby'] + ) { + warn( + 'Если "title" не используется, то необходимо задать либо "aria-label", либо "aria-labelledby" (см. правило axe aria-dialog-name)', + ); + } + const handleClick = allowClickPropagation ? onClick : (event: React.MouseEvent) => { @@ -166,7 +180,6 @@ export const Alert = ({ getRootRef={getRootRef} >
describe('CardScroll', () => { baselineComponent(CardScroll, { - a11y: false, + a11yConfig: { + rules: { + // TODO [a11y]: "
    and
      must only directly contain
    1. ,