Skip to content

Autocomplete accessibility issues  #3301

@spacedmonkey

Description

@spacedmonkey

When running the automated accessibility tests in #3294 the follow errors where found with the autocomplete component.

  Rule: "aria-input-field-name" (ARIA input fields have an accessible name)
    Help: https://dequeuniversity.com/rules/axe/3.3/aria-input-field-name?application=axe-puppeteer
    Affected Nodes:
      #amp-stories-font-family-picker-1__listbox
        Fix ANY of the following:
        - aria-label attribute does not exist or is empty
        - aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
        - Element has no title attribute or the title attribute is empty
    Rule: "aria-required-children" (Certain ARIA roles must contain particular children)
    Help: https://dequeuniversity.com/rules/axe/3.3/aria-required-children?application=axe-puppeteer
    Affected Nodes:
      #amp-stories-font-family-picker-1__listbox
        Fix ANY of the following:
        - Required ARIA child role not present: option
   Rule: "aria-valid-attr-value" (ARIA attributes must conform to valid values)
    Help: https://dequeuniversity.com/rules/axe/3.3/aria-valid-attr-value?application=axe-puppeteer
    Affected Nodes:
      #amp-stories-font-family-picker-3
        Fix ALL of the following:
          - Invalid ARIA attribute value: aria-activedescendant="false".
    Rule: "listitem" (<li> elements must be contained in a <ul> or <ol>)
    Help: https://dequeuniversity.com/rules/axe/3.3/listitem?application=axe-puppeteer
    Affected Nodes:
      .autocomplete__option
        Fix ANY of the following:
        - List item does not have a <ul>, <ol> or role="list" parent element

Metadata

Metadata

Assignees

Labels

AccessibilityChanges that impact accessibility and need corresponding review (e.g. markup changes).BugSomething isn't working

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions