Accessibility: Address Line 1 Dropdown

[patrickpeinanw]

The autocomplete for Address Line 1 is not working for keyboard users. These issues are not caught by cypress test.

• When we tab into the the Address Line 1 and start typing, we will see the dropdown address list. (no issue)

  

• Using up/down key, we can select an address in the dropdown (no issue)

  

• Issue 1: when we press 'tab', the next input box will get focus and we get this error:

  

• Issue 2: when we press 'enter', nothing is selected, and we get this error:

  

[mstanton1]

In a few other accessibility tickets it was decided to remove Vuetify components before picking up the accessibility work to avoid re-work. Is Vuetify being used in this component / other work needed before we can pick this up @patrickpeinanw?

[patrickpeinanw]

@mstanton1 Vuetify is not used in the SI filing form. This ticket is not blocked by any ticket.

[mstanton1]

Thanks @patrickpeinanw !

[mstanton1]

@J-Baese can you take a scan over this and confirm my understanding of keyboarding rules. My understanding is that 'Enter' should select the line (i.e. if we tab to an address and choose enter it would select that address and populate the field). My understanding is tab should move to the next field, which seems to be working in the screenshots.

[kialj876]

add keydown.enter select to this line https://github.com/bcgov/business-transparency-registry/blob/main/btr-web/btr-common-components/components/bcros/inputs/Address/Line1Autocomplete.vue#L59

[forgeuxGH5]

Right now in BTR this component is a Select-only combobox: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/

Long-term we want to match our existing Registries address component which is an Editable Combobox with Both List and Inline Autocomplete: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/

(which looks like what @patrickpeinanw has in the screenshots)

Keyboard control in links above (I don't necessary agree with some of their keyboard control definitions but they will be good enough for now)

[mstanton1]

@forgeuxGH5 thanks for the details. I'll pull this back into grooming so we can look over what you've provided and agree upon what we do not to meet WCAG AA for keyboarding. It sounds like this may be more than a 1.

[mstanton1]

Update as per further discussion. Given the component is MVP version, and may be updated to the ideal version at a later time, let's hold on the accessibility update. Adding "On Hold" for now.