-
Notifications
You must be signed in to change notification settings - Fork 17
fix(frontend): a11y for user facing pages #626
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
2384a1a to
96905ab
Compare
lighthouse passes now in the chat
c26544b to
a1f985c
Compare
05fbada to
e9467c2
Compare
907a68c to
8163097
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR improves accessibility across user-facing pages to achieve a Lighthouse score of 100, and introduces automated accessibility testing in the e2e test suite. The changes focus on adding proper semantic HTML, ARIA labels, and screen reader support.
Key changes:
- Added semantic HTML elements (header, main, nav, aside) to replace generic divs
- Added ARIA labels to interactive elements lacking accessible names (buttons, inputs, textareas)
- Introduced automated a11y testing using @axe-core/playwright in e2e tests
Reviewed Changes
Copilot reviewed 27 out of 28 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/texts/languages/en.ts | Added accessibility-focused text keys for ARIA labels |
| frontend/src/texts/languages/de.ts | Added German translations for accessibility text keys |
| frontend/src/texts/index.ts | Exposed new accessibility text functions |
| frontend/src/pages/login/LoginPage.tsx | Replaced divs with semantic HTML (main, header, section, nav) and changed h2 to h1 |
| frontend/src/pages/chat/files/Files.tsx | Added aria-label to file input and changed button colors from "gray" to "#666" |
| frontend/src/pages/chat/files/FileCard.tsx | Added aria-label to file selection checkbox |
| frontend/src/pages/chat/conversation/FileItem.tsx | Added aria-label to file delete button |
| frontend/src/pages/chat/conversation/ConversationPage.tsx | Added aria-label to scroll-to-bottom button |
| frontend/src/pages/chat/conversation/ChatItem/HumanChatItem.tsx | Added aria-labels to edit textarea and action buttons |
| frontend/src/pages/chat/conversation/ChatItem/AIChatItemActions.tsx | Added aria-labels to copy and rate action buttons |
| frontend/src/pages/chat/conversation/ChatInput.tsx | Added aria-labels to chat input and send button, replaced Icon component with IconArrowUp |
| frontend/src/pages/chat/ConversationItems.tsx | Changed h4 to h2 for date group headings |
| frontend/src/pages/chat/ConversationItem.tsx | Restructured conversation item layout and added aria-labels to menu button |
| frontend/src/pages/chat/ChatPage.tsx | Added semantic HTML (header, nav, main, aside) with aria-labels |
| frontend/src/pages/admin/theme/LogoUpload.tsx | Added aria-label to logo upload input |
| frontend/src/components/UserProfileModal.tsx | Added data-testid for test reliability |
| frontend/src/components/PdfControlBar.tsx | Added aria-label to page number input |
| frontend/src/components/NavigationBar.ui-unit.spec.tsx | Updated tests to verify sr-only h1 element |
| frontend/src/components/NavigationBar.tsx | Added sr-only h1 for screen readers |
| frontend/src/components/Forms.tsx | Added aria-labels to file type and size limit inputs |
| frontend/src/components/CollapseButton.tsx | Added aria-label using tooltip text |
| e2e/tests/utils/helper.ts | Added expectA11yCompliant helper function |
| e2e/tests/administration/userSettings.spec.ts | Updated selector for modal close button |
| e2e/package.json | Added @axe-core/playwright dependency |
| e2e/extension-tests/azure-user-args.spec.ts | Added accessibility check |
| e2e/extension-tests/azure-open-ai.spec.ts | Added accessibility checks at multiple test points |
| e2e/extension-tests/a11y.spec.ts | New dedicated accessibility test file |
Files not reviewed (1)
- e2e/package-lock.json: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
8163097 to
67723d4
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
Copilot reviewed 27 out of 28 changed files in this pull request and generated 2 comments.
Files not reviewed (1)
- e2e/package-lock.json: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
f256477 to
ee7eff3
Compare
This PR achieves a Lighthouse rating of 100 on the main chat page.
And introduces automatic checks for accessibility in the e2e tests.
Related to #203 and #258