Skip to content

fix(z-app-header): add searchLabel prop for visible search input label#659

Open
ada-workbackai wants to merge 2 commits intomasterfrom
workbackai/fix/wcag-3.3.2-app-header-search-label
Open

fix(z-app-header): add searchLabel prop for visible search input label#659
ada-workbackai wants to merge 2 commits intomasterfrom
workbackai/fix/wcag-3.3.2-app-header-search-label

Conversation

@ada-workbackai
Copy link
Copy Markdown
Contributor

Summary

Fixes WCAG 3.3.2 (Labels or Instructions) by adding a searchLabel prop to z-app-header that passes through to z-searchbar's existing label prop.

Issue: The search input field in the app header relies solely on placeholder text for identification. Placeholder text disappears when users type, leaving no visible indication of the field's purpose or search capabilities (title, author, ISBN).

Solution: z-searchbar already supports a label prop that renders a visible <label> element via z-input. However, z-app-header did not expose this prop. This PR adds a searchLabel prop to z-app-header that is forwarded to z-searchbar as label.

Consumer usage:

<z-app-header
  enable-search
  search-label="Cerca per titolo, autore o ISBN"
  search-placeholder="Cerca per titolo, autore o ISBN"
></z-app-header>

Test Plan

  • Build completes successfully (yarn build)
  • Auto-generated components.d.ts and readme.md updated correctly
  • Verified on production that z-app-header currently has no search-label attribute set
  • Confirmed z-searchbar label prop renders a visible <label> element

Evidence

View before/after screenshots and full audit details:
https://app.workback.ai/issues/4br6zzrichzh6dytmdsfw84okc/


WCAG Reference:
3.3.2 Labels or Instructions

Users with cognitive disabilities or low vision need a persistent visible
label on the search field that remains after they start typing.
Stencil build updated TypeScript declarations and component docs
to include the new searchLabel prop on z-app-header.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant