fix(timezoneSelect): a11y aria-label

[bvandercar-vt]

Changes proposed in this pull request:

Add aria-label to timezone select to fix a11y aXe failure.

[changelog-app]

Generate changelog in packages/datetime/changelog/@unreleased

What do the change types mean?

• feature: A new feature of the service.
• improvement: An incremental improvement in the functionality or operation of the service.
• fix: Remedies the incorrect behaviour of a component of the service in a backwards-compatible way.
• break: Has the potential to break consumers of this service's API, inclusive of both Palantir services
  and external consumers of the service's API (e.g. customer-written software or integrations).
• deprecation: Advertises the intention to remove service functionality without any change to the
  operation of the service itself.
• manualTask: Requires the possibility of manual intervention (running a script, eyeballing configuration,
  performing database surgery, ...) at the time of upgrade for it to succeed.
• migration: A fully automatic upgrade migration task with no engineer input required.

Note: only one type should be chosen.

How are new versions calculated?

• ❗The break and manual task changelog types will result in a major release!
• 🐛 The fix changelog type will result in a minor release in most cases, and a patch release version for patch branches. This behaviour is configurable in autorelease.
• ✨ All others will result in a minor version release.

Type

• Feature
• Improvement
• Fix
• Break
• Deprecation
• Manual task
• Migration

Description

fix(timezoneSelect): a11y aria-label

Check the box to generate changelog(s)

• Generate changelog entry

[ggdouglas]

On what element in Select does this aria-label get applied?

[bvandercar-vt]

On what element in Select does this aria-label get applied?

could you provide a bit more context as to the accessibility failure you're experiencing and how adding this label addresses it?

Here is the failure:

Every type of input needs an aria-label or aria-labelledby, including a select (which in this case is the combobox).

[ggdouglas]

It doesn't look like providing the aria-label prop to Select does anything. Inside of <Select>, it will be passed via restProps to <QueryList>, where it is then discarded:

blueprint/packages/select/src/components/select/select.tsx

Lines 137 to 142 in 3f4a894

	public render() {
	// omit props specific to this component, spread the rest.
	const { filterable, inputProps, menuProps, popoverProps, ...restProps } = this.props;
	return (
	<QueryList<T>

blueprint/packages/select/src/components/query-list/queryList.tsx

Line 220 in 3f4a894

const { className, items, renderer, itemListRenderer = this.renderItemList, menuProps } = this.props;

Did you mean to pass this aria-label via popoverTargetProps?

<Select<TimezoneWithNames>
    popoverTargetProps={{
        "aria-label": "timezone",
    }}
    ...
/>

---

Regardless, it feels a bit redundant to have to add an additional label when the Select's input already has a placeholder value of "Select timezone...". Is there any way we can leverage the existing placeholder to improve accessibility?

[bvandercar-vt]

Did you mean to pass this aria-label via popoverTargetProps?

Good catch, that worked perfectly!

it feels a bit redundant to have to add an additional label when the Select's input already has a placeholder value of "Select timezone...". Is there any way we can leverage the existing placeholder to improve accessibility?

If the placeholder was enough, we wouldn't be getting the aXe failure. A select/combobox component needs dedicated label for what it is, it can't just use its text content because that is just its current value, which doesn't always tell a screenreader what the component is actually for.

[ggdouglas]

@bvandercar-vt could you provide a bit more context as to the accessibility failure you're experiencing and how adding this label addresses it?

[bvandercar-vt]

@jscheiny @ggdouglas I rebased this PR, it's ready.

[ggdouglas]

Thanks for improving the accessibility here, @bvandercar-vt. Much appreciated!