Story

As a user, I want to see the label of the search bar even after I begin typing, so that I can clearly understand the input requirements and not lose context while completing the task, in compliance with Trusted Tester SC (success criteria) 3.3.2-label-provided and WCAG SC 3.3.2: Labels or Instructions (Level A).

Additionally, as a user,
I need a consistent design pattern applied across the non-org model home and the various org model pages (domains, requests, members),
so that my experience is predictable, familiar, and easier to navigate, reducing confusion and effort as I complete tasks.

Acceptance Criteria

• The search bar input field and search button are tabable.
• All search bar input field's ANDI output matches the input label.
• On the domain request home page for the non-org model view, drop the search bar to it's own row and place the reset button to the right of the search component.
• Update the org model home page to bottom-align the search component and reset + export button
• Follow the Figma design here : see Figma

Additional Context

Today the org model and non-org model search bars fail Trusted Tester SC (success criteria) 3.3.2-label-provided and WCAG SC 3.3.2:
Labels or Instructions (Level A) because the user cannot see the label after they begin typing. This issue was caught by our latest section 508 audit by the DHS Section 508 office. Providing clear and unambiguous labels and instructions (including examples of expected data formats) helps all users - but particularly those with cognitive, language, and learning disabilities - to enter information correctly.

Additionally, there are some pattern inconsistencies on the non-org model home and the various org model pages with tables (domains, requests, members). A design pattern is a reusable solution to a common problem or interaction. You can read more about patterns in Jyoti's design system presentation. Patterns help create a consistent, familiar experience for users, making interfaces easier to understand and use.
Inconsisent patterns.pdf

📚Helpful links for coding accessible labels and associating forms

• Grouping controls W3C
• Using the fieldset and legend elements GOV.UK
• ANDI Guide
• Trusted Tester docs

Issue Links

• ⏬ Caused by Design: Update table search bar so the form field label is visible #2535 and Design: Update org model table search bar so the form field label is visible #2824
• Organization feature: Buggy CSS for search bar on the edit member domains page #3400 revises the interaction when the reset button appears/disappears

Prioritization Comments

WCAG Conformance Level: 2.1 AA
WCAG Standard that applies:
3.3.2 - Labels or Instructions (Level A) (Critical)
Critical Failure if Not Met?: In this case no, see below
Prioritization: High/Must Do
Reason: The current search bar design and inconsistent pattern usage create an accessibility barrier, particularly for users with cognitive or learning disabilities and users who rely on screen readers. When users start typing in the search bar, the label disappears, which makes it difficult for them to understand the input requirements if they lose context mid-task. Additionally, the lack of consistent design patterns across pages impacts usability, increasing cognitive load and potentially causing errors or confusion for users. Fixing this issue is essential for maintaining accessibility and a cohesive user experience across the application, but since it does not prevent all users from using the search functionality, it is prioritized as High / Must Do rather than Blocker.