ARIA COMBOBOX MULTISELECT closing in Esc

[LaurenceRLewis]

Hi Bryan

I notice that for keyboard users who focus to the input and then activate the checkboxes using the arrow key navigation and Space to make the selections, pressing Esc closes the list. However for pointing device (mouse) users there is no intuitive way to dismiss the list after making selection/s, other than clicking on the X button, which is not 'obvious' as it resembles a cancel/close button visually and being red is more confusing as it seems destructive.

I suggest changing the image Close button to:

• An HTML button
• Replace the icon image role button, and have a visible label 'Apply'.

This <img id="mobileCloseIcon" class="" src="img/close.png" role="button" title="Close Suggestion Dropdown" alt="Close" aria-label="Close Suggestion Dropdown">

To <button type="submit">Apply</button>

Applies to:

• ARIA COMBOBOX (NATIVE INPUTS, MULTISELECT EDITABLE WITH SUBSTRING MATCH
• ARIA COMBOBOX (SIMULATED, READONLY MULTISELECT)

[accdc]

Sounds great to me, do you want to make that change? That’s just markup right? I can make any scripting changes if these are needed.

From: Laurence Lewis @.> Sent: Wednesday, April 10, 2024 11:44 PM To: WhatSock/apex @.> Cc: Subscribed @.***> Subject: [WhatSock/apex] ARIA COMBOBOX MULTISELECT closing in Esc (Issue #55)

Hi Bryan

I notice that for keyboard users who focus to the input and then activate the checkboxes using the arrow key navigation and Space to make the selections, pressing Esc closes the list. However for pointing device (mouse) users there is no intuitive way to dismiss the list after making selection/s, other than clicking on the X button, which is not 'obvious' as it resembles a cancel/close button visually and being red is more confusing as it seems destructive.

I suggest changing the image Close button to:

• An HTML button
• Replace the icon image role button, and have a visible label 'Apply'.

This

To

Apply

Applies to:

• ARIA COMBOBOX (NATIVE INPUTS, MULTISELECT EDITABLE WITH SUBSTRING MATCH https://whatsock.com/Templates/Comboboxes/Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm
• ARIA COMBOBOX (SIMULATED, READONLY MULTISELECT) https://whatsock.com/Templates/Comboboxes/Simulated,%20Readonly%20Multiselect/index.htm

— Reply to this email directly, view it on GitHub https://github.com/WhatSock/apex/issues/55 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOHK2AMIDWVXYS3C5PWXO3Y4YWJ7AVCNFSM6AAAAABGBWYRBWVHI2DSMVQWIX3LMV43ASLTON2WKOZSGIZTOMBRHE4TCMI . You are receiving this because you are subscribed to this thread. https://github.com/notifications/beacon/AAOHK2D2AD5FM57VWDZ2SNLY4YWJ7A5CNFSM6AAAAABGBWYRBWWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHIKVRXA4.gif Message ID: @. @.> >

[LaurenceRLewis]

No problem @accdc will update and create a PR.

[LaurenceRLewis]

Bryan I have uploaded the following changes to 'ARIA COMBOBOX (NATIVE INPUTS, MULTISELECT EDITABLE WITH SUBSTRING MATCH)'

• Updated the icon to use a less destructive visual indicator for manually collapsing and setting the list.
• Wrapped the new SVG icon in an HTML Button
• The icon is permanent and not initially hidden. I found the sudden appearance of the icon when making selections jarring (personal opinion add the hidden class to the button if you wish this to only show when a selection is made from the listbox)
• Added HTML autocomplete=off to the input to prevent the browser making suggestions (should have done this before but missed it in previous testing)

I think I captured all the changes.