helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): announce notifications to screen readers (#12071)

Browse source
This commit is contained in:
Ben 2024-08-27 18:13:17 -04:00 • committed by GitHub
parent 98b3441cb1
commit 72ab664936
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 46 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts
View file

@ -39,6 +39,29 @@ describe('NotificationCard component', () => {
expect(sut.getByTestId('message')).toHaveTextContent('Notification message');
});
it('makes all buttons non-focusable and hidden from screen readers', () => {
sut = render(NotificationCard, {
notification: {
id: 1234,
message: 'Notification message',
timeout: 1000,
type: NotificationType.Info,
action: { type: 'discard' },
button: {
text: 'button',
onClick: vi.fn(),
},
},
});
const buttons = sut.container.querySelectorAll('button');
expect(buttons).toHaveLength(2);
for (const button of buttons) {
expect(button.getAttribute('tabindex')).toBe('-1');
expect(button.getAttribute('aria-hidden')).toBe('true');
}
});
it('shows title and renders component', () => {
sut = render(NotificationCard, {
notification: {

6
web/src/lib/components/shared-components/notification/__tests__/notification-list.spec.ts
View file

@ -9,8 +9,6 @@ function _getNotificationListElement(sut: RenderResult<NotificationList>): HTMLA
}
describe('NotificationList component', () => {
const sut: RenderResult<NotificationList> = render(NotificationList);
beforeAll(() => {
// https://testing-library.com/docs/svelte-testing-library/faq#why-arent-transition-events-running
vi.stubGlobal('requestAnimationFrame', (fn: FrameRequestCallback) => {
@ -23,6 +21,10 @@ describe('NotificationList component', () => {
});
it('shows a notification when added and closes it automatically after the delay timeout', async () => {
const sut: RenderResult<NotificationList> = render(NotificationList);
const status = await sut.findAllByRole('status');
expect(status).toHaveLength(1);
expect(_getNotificationListElement(sut)).not.toBeInTheDocument();
notificationController.show({