Use data-* attributes for autocomplete

Description

What happens

The autocomplete HTML currently uses attributes like autocomplete_no_results_text and autocomplete_hint_text. They work fine, but if you run a page with an autocomplete field through an HTML validator, it complains because those aren't actual HTML attributes.

What should happen

We want to use HTML5 data-* attributes (e.g. data-autocomplete-no-results-text or data-autocomplete-hint-text) for the autocomplete's custom attributes. This means we won't get as many validation errors on our HTML.

Testing

The behavior should not change.

If you want to run the new version through a validator while it's on staging, you'll probably need to copy the page source and paste it in on the Validate by Direct Input tab, since the password protection on staging will probably prevent the validator from accessing the page.

Notes

This was pulled out of AO3-3306.

Activity

Show:
redsummernight
December 2, 2020, 3:14 PM

Autocomplete fields work as usual:

  • In the new work form, the fandom field correctly displays “Start typing for suggestions!“ at the start, “Searching…“ when you’ve typed in at least 1 character, then either results or “(No suggestions found)“.

  • In the collection filters, the fandom field only lets me pick one fandom before removing the autocomplete input.

The HTML validator reports 47 errors for the staging new work form, down from 86 for the beta counterpart. No errors on the autocomplete inputs for the staging version, as expected. Looks good.

Sarken
December 2, 2020, 5:18 PM

Harlow confirms it still works as usual with a screen reader!

DeployedToBeta

Assignee

Sarken

Reporter

Sarken

Roadmap

Misc

Priority

Medium

Affects versions

Fix versions

Components

FrontEnd

Difficulty

Easy

Milestone

Internal 0.9