Query suggestion accessibility improvements and fixes

[cfoss-coveo]

Accessibility and UX improvements:

• When Query Suggestions first appear, there should an an aria announcement describing how they work
• When hovering over Query Suggestions or using keyboard navigation to move between suggestions, the search input value should not change
  -If you select a Query Suggestion, it should immediately take you to the results for that item (rather than filling the search input)
• Bugfix: aria-selected="true" isn't applied to the selected Query Suggestion item on the very first mouse interaction with a newly constructed suggestion box. Subsequent interactions work as expected.

Associated tasks:

• Defect 409115: QS - Query suggestion accessibility issue
• Defect 409203: QS - aria-selected isn't triggering on first mouse interaction with a newly constructed suggestion box

[GormFrank]

@cfoss-coveo @bblaisATcoveo Please add aria-expanded="false" on the input when QS gets initialized after page load.

[GormFrank]

@cfoss-coveo @bblaisATcoveo

Also, please add an line that will force the search's input type to text if QS are enabled (minimumCharsForSuggestion > 0); this is just in case it is set to type search which is valid only when there are no QS/combobox.

The more detailed reason is that the role combobox is clashing at a semantic level with the type search, since type search has an implicit role value of searchbox which is clashing with combobox. So the type search is semantically good only when there is no QS enabled on the page.

CC: @ipaksc

[cfoss-coveo]

@GormFrank This is ready for another look.

CC @bblaisATcoveo @ipaksc

---

For your information, here's the logic we're using when applying attributes to the search box.

Default search box attributes, applied on page load

Attribute	Value	Applied	Notes
type	search	Yes, on init
aria-expanded	false	Yes, on init
role	searchbox	No	Implicit based on type="search"
Others	left as-is	No

Query Suggestions enabled (i.e., params.numberOfSuggestions > 0), applied page load

Attribute	Value	Applied	Notes
type	text	Yes, on init
role	combobox	Yes, on init
aria-expanded	false	Yes, above
aria-autocomplete	list	Yes, on init
aria-controls	suggestions	Yes, on init	Added after the id="suggestions" ul element created
Others	left as-is	No

Query Suggestions enabled, when the query suggestions dropdown opens

Attribute	Value	Note
aria-expanded	true
Others	left as-is

Query Suggestions enabled, when items are highlighted (via cursor or keyboard controls)

Attribute	Value	Note
aria-activedescendant	suggestion-{n}	The id of the highlighted item
Others	left as-is

Query Suggestions enabled, when the query suggestions dropdown closes

Attribute	Value	Note
aria-expanded	false
aria-activedescendant	''
Others	left as-is

[GormFrank]

@cfoss-coveo Thank you :) Changes required! CC: @bblaisATcoveo

[cfoss-coveo]

@GormFrank Pushed an update that addresses your feedback. Ready for another look!

CC @bblaisATcoveo @ipaksc

[GormFrank]

@cfoss-coveo Just small details remaining, and then we'll be good to go :)

[cfoss-coveo]

@GormFrank Made the changes. Thanks for using the code suggestions. That made it super easy!

[GormFrank]

Just a note on the rationale for some of the design aspect and accessibility/usability:

• The accessibility disclaimer for screen reader users has been added to get away from the WCAG failure F36 with adding a warning before submit. Also, it has been reviewed and improved by our internal Service Canada communications & translation team
• The magnifying glass icon displayed besides each list item (suggestions), which is the same as in the Search submit button, was added as a visual indicator (counter part to the "hidden" accessibility disclaimer mentioned above) to predictably hinting them that clicking on a suggestion will trigger a submit.

[cfoss-coveo]

Test Cases

• When Query Suggestions first appear, there should an an aria announcement describing how they work
• When Query Suggestions first appear after a page load/refresh, when you mouse over the first item in the query suggestion list, it should have the aria-selected="true" attribute applied.
• When hovering over Query Suggestions or using keyboard navigation to move between suggestions, the search input value should not change
• If you select a Query Suggestion either via mouse or keyboard, you should immediately be taken to the results for that item (rather than filling the search input)

@GormFrank