Autocomplete accessibility and invalid HTML issues

[TriangleJuice]

The current autocomplete implementation has several WCAG 2.1 AA accessibility issues:

• Invalid HTML: <p> elements are nested inside <span>
• Missing ARIA relationships between combobox and suggestion list
• Suggestion list is missing role="listbox"
• Suggestions are missing role="option"
• aria-activedescendant and aria-controls are missing
• Focus management does not follow the ARIA combobox pattern
• Suggestion subLabel is not semantically associated with the option

Recommended:

• Replace nested <p> elements with semantic inline elements ( or )
• Implement the ARIA combobox + listbox pattern correctly
• Use aria-describedby for additional option metadata (subLabels) where relevant
• Keep keyboard focus on the input and manage active options with aria-activedescendant