Missing: ARIA 3.3.2 Labels or Instructions (Level A)

[sodacrackers]

Describe the bug
The form component is missing it's html label. Components should return standards compliant, valid HTML.

See WebAIM's WCAG 2 Checklist:

Sufficient labels, cues, and instructions for required interactive elements are provided via instructions, examples, properly positioned input labels, or fieldsets/legends. https://www.w3.org/TR/WCAG22/#labels-or-instructions

Form elements must have labels Rule ID: label Ruleset: axe-core 4.2 User Impact: Critical Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), Section 508

To Reproduce
Make use of https://github.com/elastic/search-ui/blob/main/packages/react-search-ui-views/src/SingleSelectFacet.tsx

Note it is missing a <label ... like found in https://github.com/elastic/search-ui/blob/main/packages/react-search-ui-views/src/MultiCheckboxFacet.tsx

Working example:
MyPage.js

import { Facet } from "@elastic/react-search-ui";

export default function MyPage(props) {
  return (
    <div className="page">
           <Facet
              field="category"
              label="By Catagory"
              searchPlaceholder="- Any -"
              filterType="all"
              isFilterable={false}
              show="10"
              view={SingleSelectFacet}
            />

Expected behavior
I see <label for="... " class="visually-hidden">{{ label }}</label> rendered.

Which backends and packages are you using:

    "@elastic/react-search-ui": "^1.19.1",
    "@elastic/react-search-ui-views": "^1.19.1",

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",

[joemcelroy]

workaround is to customise the component to fit your needs (https://docs.elastic.co/search-ui/guides/customizing-styles-and-html#customizing-html)

[sodacrackers]

@joemcelroy , thanks for replying. That's not a solution for us

Customizing a component should not be required to use it; the application should have valid markup.

The adjacent component (linked above) does have a valid form label.

I'm afraid customizing components isn't an easy solution for many people-- it requires special programming skills. And customizing means duplicating code and maybe missing improvements that happen in Search UI.

[botelastic]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.