Chore: Aria busy indicators (#27978)

apps/meteor/client/views/root/PageLoading.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 const PageLoading: FC = () => (
-	<div className='page-loading'>
+	<div className='page-loading' role='alert' aria-busy='true' aria-live='polite' aria-label='loading'>
 		<div className='loading-animation'>
 			<div className='bounce bounce1'></div>
 			<div className='bounce bounce2'></div>

apps/meteor/tests/e2e/config/global-setup.ts

@@ -1,6 +1,6 @@
 /* eslint no-await-in-loop: 0 */
 
-import { chromium } from '@playwright/test';
+import { chromium, expect } from '@playwright/test';
 
 import * as constants from './constants';
 import injectInitialData from '../fixtures/inject-initial-data';
@@ -32,7 +32,7 @@ export default async function (): Promise<void> {
 	await page.locator('[name=password]').type(constants.ADMIN_CREDENTIALS.password);
 	await page.locator('role=button >> text="Login"').click();
 
-	await page.waitForTimeout(1000);
+	await expect(page.locator('role=alert[name=loading]')).toHaveCount(0);
 
 	await page.context().storageState({ path: `admin-session.json` });
 

apps/meteor/tests/e2e/config/global.d.ts

@@ -2,5 +2,6 @@ declare namespace PlaywrightTest {
 	interface Matchers<R> {
 		hasAttribute(a: string): Promise<R>;
 		toBeInvalid(): Promise<R>;
+		toBeBusy(): Promise<R>;
 	}
 }

apps/meteor/tests/e2e/utils/test.ts

@@ -88,6 +88,13 @@ expect.extend({
 			pass,
 		};
 	},
+	async toBeBusy(received: Locator) {
+		const pass = await received.evaluate((node) => node.getAttribute('aria-busy') === 'true');
+		return {
+			message: () => `expected ${received} to be busy`,
+			pass,
+		};
+	},
 	async hasAttribute(received: Locator, attribute: string) {
 		const pass = await received.evaluate((node, attribute) => node.hasAttribute(attribute), attribute);