Skip to content

aria-labelledby on the input element fails WCAG checks because the target button has no text #1183

@nicksergeant

Description

@nicksergeant

Description

The <input aria-labelledby="autocomplete-0-input" ..." element references the following element:

<label class="aa-Label" for="autocomplete-0-input" id="autocomplete-0-label"><button class="aa-SubmitButton" type="submit" title="Submit"><svg class="aa-SubmitIcon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"></path></svg></button></label>

This element has only a <button> element with an SVG in it, and no title in the button.

The aria-labelledby docs state:

"Some elements get their accessible name from their inner content. For example, the accessible name for a , , or comes from the text between the opening and closing tags. Other elements, such as form <textarea>, , and get their accessible name from the content of associated elements; for these elements, the accessible name comes from the with a for attribute, , and caption respectively"

So it seems that even though the <button> element has a title attribute, the aria-labelledby expects the description to be inside the button element.

Reproduction

Use the WAVE Evaluation Tool Chrome Extension to test https://phelpsny.com/, and you'll see the errors here:

image

Expected behavior

I think the element would benefit from some invisible text that will be readable by screen readers.

Environment

  • OS: macOS
  • Browser: Chrome
  • Autocomplete version: 1.11.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions