mi6
Make disabled options on ic-select focusable
Summary
Make disabled options on ic-select focussable so that focus behaviour is consistent with popover menu component and to help make it clearer to screen reader users that the option list includes disabled options.
💬 Description
Currently, if you focus through the options on an ic-select (with all three variants - single, searchable and multi) using the up and down arrow keys, the focus skips past any disabled options.
After discussing this issue during an accessibility testing session, and with a designer (@DBD324), we decided that it would likely be clearer for screen reader users if disabled options were focusable so it is more obvious that they exist.
This ticket is to make the disabled options focusable and apply the styling used on popover menus, where the disabled options display a dashed line as shown below when focussed:
Note: I assume we would want to apply this change to the multi-select as well so that it's consistent with the normal / existing ic-select variants - particularly as it would be quite a big / noticeable difference. This means that the change will need to be added to the multi-select code in the canary folders (canary-web-components and canary-react) as well as in the normal folders.
💰 User value
This would bring the behaviour of ic-selects with disabled options in line with the behaviour of those on popover menu components, and help make it easier for screen reader users to understand when some options are disabled.
📚 User Stories
As a screen reader user I need to be able to focus on disabled options on an ic-select So that I can easily tell that there are options present which are disabled.
📝 Acceptance Criteria
Given that I am using up and down arrow keys to focus through options on an ic-select When I come to a disabled option Then the disabled option becomes focussed rather than skipping onto the next enabled option.
Given that I am a screen reader user using an ic-select When I focus on a disabled option Then the screen reader tells me that that option is disabled.
✏ Designs
A focused disabled option on an ic-select should have the same appearance, measurements, spacing etc. of that of a popover menu component.
Need a clear answer if we are doing this, but also if this is needed for other components
When we implement, consider if it'll break tests (when doing the dev work, move to v3)
Give notice before making this change on the channel and in the release notes
I think the solution may involve changes to loadUngroupedOptions(). This is where this.ungroupedOptions is set; this.options contains all options passed to the options prop so can include parent options (used to create groups) and disabled options, but this.ungroupedOptions only contains enabled options and child options, i.e. the options that are currently focusable (this is passed to setNextOptionValue() and setPreviousOptionValue(), for example, to determine which option to focus next when the user is using the keyboard).
So I think it might at first basically involve a change to what this.ungroupedOptions is set to.
Spent some time investigating this and made some initial progress with the suggestions from @GCHQ-Developer-847 above, but it showed that the remaining work will be quite involved, so think it it worth refining again.
Due to the way ic-select and ic-menu interact, there would need to be quite a bit of refactoring\rewriting of the code to highlight an option. At the moment it relies closely on the value in the input field to determine when to highlight an option\mark as selected. However, if a disabled option cannot be selected, this cannot be used as way of determining when to highlight it.
Design input may also be required on what should happen in some scenarios. For example, what should happen when you press the ArrowDown key in this scenario:
Should the value Cappuccino remain in the input and also the Cappuccino menu item remain with a tick, but focus now be on Latte?
If that is the case, are there any accessibility considerations around this behavior?
Also to be considered is that any changes will need to be duplicated\extended to work in the canary ic-select-with-multi code, to keep this in sync with ic-select.
this is currently on hold, until #2108 is complete. Otherwise this will be much more complex to complete\require lots of code duplication