diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts index 7412307e1..2b4f746a2 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts @@ -547,4 +547,47 @@ test.describe('Doc Comments Side Panel', () => { 'bn-thread-mark-selected', ); }); + + test('it checks comments accessibility', async ({ page, browserName }) => { + await createDoc(page, 'comment-doc-panel', browserName, 1); + + // Create comment thread + const editor = await writeInEditor({ page, text: 'Hello World' }); + await editor.getByText('Hello').selectText(); + await page.getByRole('button', { name: 'Add comment' }).click(); + + const thread = page.locator('.bn-thread'); + await thread.getByRole('paragraph').first().fill('This is a comment'); + await thread.locator('[data-test="save"]').click(); + + // Open comment side panel and check aria attributes + await page + .getByRole('button', { name: 'Show the comments sidebar' }) + .click(); + + const elCommentsSidePanel = page.getByLabel('Comments side panel'); + await expect(elCommentsSidePanel).not.toHaveAttribute('inert'); + + // Check panel get the focus when opening + await page.keyboard.press('Tab'); + await expect( + elCommentsSidePanel.getByRole('button', { name: 'Filter comments' }), + ).toBeFocused(); + await page.keyboard.press('Tab'); + + // Check the focus goes back to the button that open the side panel + await expect( + elCommentsSidePanel.getByRole('button', { + name: 'Close the comments sidebar', + }), + ).toBeFocused(); + await page.keyboard.press('Enter'); + await expect(elCommentsSidePanel).toBeHidden(); + await expect( + page.getByRole('complementary', { name: 'Side panel' }), + ).toHaveAttribute('inert'); + await expect( + page.getByRole('button', { name: 'Show the comments sidebar' }), + ).toBeFocused(); + }); }); diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentSideBar.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentSideBar.tsx index 1dc2d9695..c4b57a0d1 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentSideBar.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentSideBar.tsx @@ -1,4 +1,8 @@ -import { Button, Tooltip } from '@gouvfr-lasuite/cunningham-react'; +import { + Button, + ButtonElement, + Tooltip, +} from '@gouvfr-lasuite/cunningham-react'; import { DropdownMenu } from '@gouvfr-lasuite/ui-kit'; import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -9,6 +13,7 @@ import SortingResolvedSVG from '@/assets/icons/ui-kit/filter-notification.svg'; import SortingOpenSVG from '@/assets/icons/ui-kit/filter_list.svg'; import { Box, ButtonCloseModal, Text } from '@/components/'; import { useRightPanelStore } from '@/features/right-panel/stores/useRightPanelStore'; +import { useFocusStore } from '@/stores'; import { useCommentSidebarStore } from './useCommentSidebarStore'; @@ -43,7 +48,9 @@ export const CommentSideBar = ({ onClose }: CommentSideBarProps) => { > - {t('Comments')} + + {t('Comments')} + { e.preventDefault(); setOpen((o) => !o); }} - tabIndex={-1} /> @@ -112,6 +118,8 @@ export const CommentSideBarButton = () => { const { t } = useTranslation(); const { isPanelOpen, activePanel, setActivePanel, setIsPanelOpen } = useRightPanelStore(); + const buttonRef = useRef(null); + const { addLastFocus } = useFocusStore(); const isActive = isPanelOpen && activePanel === 'comments'; const ariaLabel = isActive @@ -120,12 +128,14 @@ export const CommentSideBarButton = () => { return (