fix(app-webdir-ui): correct DOM order of WebDirectory controls for keyboard focus

[juanmitriatti]

Title: fix(app-webdir-ui): correct DOM order for WCAG 2.4.3 focus order

Description

Problem: The WebDirectory component renders its three controls (Filter by Last Initial, View,
Sort by) in the wrong DOM order. CSS Grid repositions them visually, but keyboard focus (Tab
key) follows DOM source order, causing screen readers and keyboard users to experience them in
the wrong sequence. This violates WCAG 2.1 SC 2.4.3 Focus Order (Level A).

Solution: Reorder the JSX children inside so DOM order matches visual/semantic

order:

1. (View)
2. (Sort by)
3. (Filter by Last Initial)
4. (Results)

No CSS or logic changes needed — the existing grid-area assignments continue to place elements
in the correct visual positions.

Testing Steps:

Open the Departments story with alphaFilter enabled Navigate to the staging Storybook URL: https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1671/@asu/app-webdir-ui/iframe.html?args=alphaFilter%3Atrue&id=organisms-web-directory-templates--web-directory-example-departments&viewMode=story Confirm the page renders with three visible controls: View (grid/list toggle), Sort by (dropdown), and Filter By Last Initial (A–Z buttons).

Verify visual order Visually confirm the controls appear on screen in this top-to-bottom order:

View (grid/list icons) — topmost

Sort by (dropdown) — second

Filter By Last Initial (alphabet buttons) — third

Verify keyboard tab order Click somewhere before the web directory component (e.g., the page body above it), then press Tab repeatedly and confirm focus moves in this order:

1st → View buttons (Grid view / List view)

2nd → Sort by dropdown

3rd → Filter By Last Initial radiogroup (All, A, B, C…)

Confirm the old broken order is no longer reproducible On the same page, confirm that focus does not jump to Filter By Last Initial first before visiting View or Sort by. The previously broken order was Filter by → View → Sort by — tabbing through the controls should never reach the alphabet filter buttons before the View toggle and Sort dropdown have received focus.

Check the People story Switch to Web Directory Example People in the sidebar. Repeat the Tab key test. Expected keyboard order: View → Sort by (no alpha filter on this story, confirm no regression).

Check the Departments And People story Switch to Web Directory Example Departments And People. Run the same Tab key check and confirm the correct order: View → Sort by → Filter By Last Initial. Note: this story has a pre-existing aria-prohibited-attr violation on the address card — confirm it is unrelated to the tab order controls.

[asu-jenkins-devops]

Storybook deployed at https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1671/index.html