Failing AXE tests

[spacedmonkey]

I used the tool axe to scan this autocomplete and got the following errors.

    Expected page to pass Axe accessibility tests.
    Violations found:
    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

[spacedmonkey]

Another

    Affected Nodes:
      #amp-stories-font-family-picker-5
        Fix ALL of the following:
          - Invalid ARIA attribute value: aria-activedescendant="false".

[NickColley]

Hello @spacedmonkey,

I think the error represented by the rule 'aria-input-field-name' will be resolved by the upcoming 2.0.0 release.

When running axecore 3.3.1 on https://alphagov.github.io/accessible-autocomplete/examples/ I cannot reproduce the rule: "aria-required-children", could you help me reproduce that?

The aria-activedescendant issue seems to be that the value should always be the ID of an another element, and sometimes it gets set to false, so potentially the logic should be to remove the attribute instead of setting it to false.

[robertparkinson]

Another failing aXe issue we have discovered is "Document has active elements with the same id atrribute". The containing div and the input have the same ID.

[sussexrick]

@nickcolley We are using v2.0.3 and the aria-input-field-name issue is still there. Since this component asks us to render our own label outside this component, I think the fix is to provide a prop where we can pass in the id of that label, and that gets added as the value of aria-labelledby on the <ul>.

We're also seeing the aria-activedescendant=false error and your suggested fix sounds right to me.

[NickColley]

I no longer work on this project at the moment so unfortunately I can't help you @sussexrick but hopefully if the maintainers get time they'll follow up with you :)

[JakeChampion]

@sussexrick - I have a pull-request which fixes the aria-activedescendant=false issue --> https://github.com/alphagov/accessible-autocomplete/pull/497

[sussexrick]

@JakeChampion Thank you. Could be useful for us @bentpr @vrojastpr.

[JakeChampion]

@sussexrick, we have forked accessible-autocomplete and added a few bug fixes such as this one. We published our fork to @financial-times/accessible-autocomplete, the changelogs from v2.1.0 onwards are the changes we've included

[sussexrick]

@bentpr @vrojastpr Let's use @JakeChampion's package and create PRs there for any bugfix we do, rather than publish our own package to npm.

[sussexrick]

@JakeChampion I've submitted a PR to your fork with a fix for the 'aria-input-field-name' issue. Any chance you could review?

[sussexrick]

For anyone finding this, PR #500 fixes "aria-input-field-name" (ARIA input fields have an accessible name).