Add support for disabled drop down items in SelectControl

[philipjohn]

Description

Fixes #11270. Adds support for marking options within a SelectControl as 'disabled', which translates to the disabled attribute being added to the HTML option element.

How Has This Been Tested?

1. Added the Tag Cloud block to a new post
2. Observed that the "Taxonomy" sidebar setting included a "- Select -" option that could be selected.
3. Applied the patch and ran the build
4. Repeated step 1
5. Observed that the "- Select -" option is now disabled

Screenshots (jpeg or gifs if applicable):

Before:

After:

Types of changes

This changes improves an existing component and updates one use of that component to demonstrate how it can be used.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows has proper inline documentation.

[afercia]

Discussed during today's accessibility bug scrub. Agreed we don't see any accessibility issue in implementing an <option disabled>...</option>. Are we missing something perhaps? Please do let us know if a specific accessibility feedback is needed here.

[aduth]

It's not clear to me: What's the purpose of the "- Select -" option existing at all? My initial worry was that the block allows for the value to be "unset", which we'd regress on with the changes here. But the behavior from choosing the value seems to be invalid (displays a message "Your site has no tags"). Perhaps it's meant as a fallback condition for sites with no taxonomies registered?

[philipjohn]

It's not clear to me: What's the purpose of the "- Select -" option existing at all?

It's to provide a default option as a placeholder, so that it doesn't look to the user as though the first option is selected - it hasn't, if you check the value of the select.

My initial worry was that the block allows for the value to be "unset"

This won't happen - the initial value is disabled for that very reason.

Perhaps it's meant as a fallback condition for sites with no taxonomies registered?

It's for anywhere that a dropdown is used and the list of option elements for that value is not pre-determined or completely known.

One way you can test this is to create a simple block with a drop down in the block controls. Give the drop down a single value. At the moment, the result would be that it looks to the user as though that single option is selected. If you use JS to get the value of the select, it will be empty (so not what the user sees). If the user attempts to select that single option, nothing actually happens - the value never changes.

[philipjohn]

Are we missing something perhaps?

@gziolo Did you just want a gut check from the a11y team? Given there are no issues identified, how are we on getting this approved?

[brentswisher]

This looks good, thanks fo the work @philipjohn. I have used the pattern you described of a disabled first item in other projects and it was very useful, and looks like a good fit for the tag cloud here.

[brentswisher]

@aduth @afercia this looks good to merge to me unless you have any objections?

[aduth]

No objections from me.

[afercia]

Thanks for working on this! No objections from me in having the ability to disable an option.

Not sure about the specific usage on the Tag Cloud taxonomy select. One of the taxonomies must be always selected, so I'm not sure I understand what is the purpose of the - Select - option. I'd rather remove it. Also, the legacy Tag Cloud widget doesn't have a - Select - option.

[philipjohn]

@afercia In the absence of a default, the browser may select the first option against the user expectation. You can see an example in Automattic/newspack-plugin#83

This could also affect the tag cloud, hence why the default disabled option is included here.

[brentswisher]

@afercia thanks for the feedback, since the - Select - is already there in the "new" tag cloud and this just makes it disabled I would say it's still a step in the right direction. Could explore dropping it in a different issue, but don't see that as a blocker to this. Thanks again @philipjohn

[afercia]

see an example in Automattic/newspack-plugin#83

That sounds like a bug in the code, which is assuming a state change 🙂 Native selects don't work that way. I'd say the component fails in reproducing the native, expected, behavior.

• the selected option misses a selected attribute
• the selected attribute is specifically meant to indicate whether the option is selected by default
• browsers will understand what the initially selected option is thanks to the selected attribute
• the code should take into account the selected attribute and update it as necessary

Will create a new issue...