Active descendant false fails axe and lighthouse tests

[ediblecode]

Repro steps

1. Load accessible autocomplete on a page
2. Run axe

Expected results

No accessibility issues reported

Actual results

Axe reports "ARIA attributes must conform to valid values, Ensures all ARIA attributes have valid values, Invalid ARIA attribute value: aria-activedescendant="false".

Notes

It seems to be cause by this line: https://github.com/alphagov/accessible-autocomplete/blob/master/src/autocomplete.js#L495. Maybe this should return a null value instead of false, so that the attribute isn't even rendered? Or an empty string so it's treated as empty?

This comment in the ARIA spec: suggests having an empty string is OK and is treated as an absent property.

The ARIA spec says activedescendant can only take an 'ID reference' so a bool value is invalid.

This ARIA practices example uses an empty value, rather than removing the attribute.

Here's a discussion on axe core about activedescendant.

I don't know what the actual implications of having this invalid attribute are for assistive tech but it does mean that automated accessibility tests fail. In our case we're running them in out CI pipelines to catch any basic accessibility regressions.

[ediblecode]

Should point we've implemented a beautiful hack to make out tests pass for the time being, read this and weep: https://github.com/nice-digital/cks-gatsby/blob/master/gatsby/src/components/Header/Header.tsx#L82-L98

[mark-roberts-ho]

I've done what I think is a better solution which I've put in here as I can't push to the repo. This evaluates all the ariaProps in an object and then puts them into the input using the spread operator. All values which evaluate to false are not included.

render () {
     ...

    const assistiveHintID = id + '__assistiveHint'
    const ariaProps = {
      'aria-describedby': ariaHint ? assistiveHintID : null,
      'aria-expanded': menuOpen ? 'true' : 'false',
      'aria-activedescendant': optionFocused ? `${id}__option--${focused}` : false,
      'aria-owns': `${id}__listbox`,
      'aria-autocomplete': (this.hasAutoselect()) ? 'both' : 'list'
    }

    let dropdownArrow

    ....

        <input
          {...ariaProps}
          autoComplete='off'
          className={`${inputClassName}${inputModifierFocused}${inputModifierType}`}
          id={id}
          onClick={(event) => this.handleInputClick(event)}
          onBlur={this.handleInputBlur}
          {...onChangeCrossLibrary(this.handleInputChange)}
          onFocus={this.handleInputFocus}
          name={name}
          placeholder={placeholder}
          ref={(inputElement) => { this.elementReferences[-1] = inputElement }}
          type='text'
          role='combobox'
          required={required}
          value={query}
        />

        {dropdownArrow}

 

      </div>
    )
  }
}