'About your service' dropdown

[adriannelee]

Description

As a CDS CRM manager, I need new clients to log in the right field when they can't find their department on the dropdown so that I can keep the data clean without a lot of manual work.

As a francophone client, I need the "No search results" to be in English.

As screen magnifier user, I need to be able to read what I've selected when using a dropdown. Video clip

As a screen reader user, I need to press 'Enter' on a dropdown selection without submitting the form so that I can review what else is on the page before I submit.

WHY are we building / VALUE?

• Users are comfortable using the product in either official language
• Clean data
• Providing accessible elements means that a higher diversity of public servants are supported for their job.
• Prevent accidental form submission

WHAT are we building?

• Design fix to figure out where people should enter the department/org not on the list
• Other fixes to the dropdown

Documentation and Artifacts

Acceptance Criteria

• [ ] Generate appropriate log messages so that executions of this feature can be tracked

• [ ] Can misuse of this feature cause harm? If yes, create an alert

• [ ] When the page is in French, "No search results" is in French

• [ ] When the department/org is not on the list, the user doesn't enter it in 'Enter any other names for your group'

• [ ] Using a screen magnification tool (Firefox issue?) text doesn't overlap when a selection is made and the user click on the dropdown again

• [ ] Update the status of related findings, insights, and hypotheses on the Research Airtable

• [ ] Once change/fix/feature is implemented, link relevant Airtable records to design artifacts (Figma)

• A11y

• Bilingualism

• Privacy considerations

• Security controls in place

• Measuring success and metrics

Related Research Airtable records

• Submitting the 'About your Service' form is surprising. Pressing 'enter' on the dropdown submits the form - there's no confirmation
• Overlapping of text on dropdown & not clear how to delete an entry
• Would enter dept not on list to "Other names" field.

QA Steps

• [ ] Tested in a realistic production scenario

[amazingphilippe]

A bit more investigation on the overlapping text. This screenshot shows that the autocomplete input and suggestion don't quite align. Also noting that the color contrast of that suggestion backdrop probably doesn't pass 7:1, or even 4.5:1. One idea could be to remove it. I'm not sure we need it?

Private Zenhub Image

[amazingphilippe]

There is also a focus trap introduced by this component:

Private Zenhub Video

[amazingphilippe]

Fable testers confirmed the same bugs we have found.

[amazingphilippe]

Possible native way of doing this: https://www.htmhell.dev/adventcalendar/2023/2/#datalist-a-native-autosuggest

[amazingphilippe]

Adding more details about the focus trap:

Browser: Firefox Method: Just keyboard navigation, no voiceover.

Steps to reproduce:

1. Tab until the autocomplete box
2. Escape
3. Shift-tab to move focus upwards
4. Shift once to focus the autocomplete box again
5. The next shift will focus at the top of the page, and you will be trapped within the top and autocomplete box elements.

[YedidaZalik]

Adding to Ally stmt

[jzbahrai]

1. When the text is too long it gets cut off (we can make the text box larger, but dont know if we should?) (but it displays it correctly up top)
2. Text behind -Making the text box larger fixes it

[YedidaZalik]

Andrew will review