Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(timezoneSelect): a11y aria-label #6960

Open
wants to merge 10 commits into
base: develop
Choose a base branch
from

Conversation

bvandercar-vt
Copy link
Contributor

Changes proposed in this pull request:

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

@changelog-app
Copy link

changelog-app bot commented Sep 4, 2024

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

@@ -162,6 +162,7 @@ export class TimezoneSelect extends AbstractPureComponent<TimezoneSelectProps, T

return (
<Select<TimezoneWithNames>
aria-label="timezone"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

image

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

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

@ggdouglas
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants