Skip to content

fix(a11y): correct select chevron role and type rangepicker aria-label props - #1156

Merged
nroshan-eightfold merged 2 commits into
mainfrom
nroshan/a11y-select-rangepicker-eng202320
Jul 21, 2026
Merged

fix(a11y): correct select chevron role and type rangepicker aria-label props#1156
nroshan-eightfold merged 2 commits into
mainfrom
nroshan/a11y-select-rangepicker-eng202320

Conversation

@nroshan-eightfold

@nroshan-eightfold nroshan-eightfold commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

SUMMARY:

Two WCAG-related accessibility fixes surfaced by the Eightfold condition / If-Then builder.

  1. Select chevron (WCAG 4.1.2): the dropdown toggle chevron rendered as role="presentation" + aria-hidden="true" with an aria-label. A presentational role on a <button> strips its semantics and the aria-label is ignored — an inconsistent state axe flags as a presentation-role conflict. Since the role="combobox" input already owns open/close (aria-expanded / aria-controls), this removes role="presentation" and keeps aria-hidden, so the chevron is cleanly hidden from assistive tech per the combobox pattern.
  2. RangePicker date-input aria labels (typing / DX): startDateInputAriaLabel / endDateInputAriaLabel are consumed by the internal range picker but were declared only on a local type, so they were missing from the public .d.ts. Consumers had to cast (as unknown as …) to name the start/end date inputs. They're now on the public OcRangePickerSharedProps, so the cast can be dropped downstream.

GITHUB ISSUE (Open Source Contributors)

N/A

JIRA TASK (Eightfold Employees Only):

https://eightfoldai.atlassian.net/browse/ENG-203981

CHANGE TYPE:

  • Bugfix Pull Request
  • Feature Pull Request

TEST COVERAGE:

  • Tests for this change already exist
  • I have added unittests for this change

TEST PLAN:

Issue 1 — Select chevron (WCAG 4.1.2)

Verified in Storybook (Select → Basic) by inspecting the chevron <button> on main vs this branch:

  • Before (main / 2.58.4): <button aria-hidden="true" role="presentation" tabindex="-1" aria-label="Toggle dropdown"> — presentational role on an interactive button with an ignored label. axe flags it as 1 Incomplete ("ARIA role presentation must be removed when the element is made visible, as it is not allowed for the element").
  • After (this PR): <button aria-hidden="true" tabindex="-1" aria-label="Toggle dropdown">role="presentation" removed, aria-hidden retained. axe: 0 violations / 0 incomplete. The role="combobox" input remains the interaction surface.
  • Keyboard: Tab skips the chevron; the combobox input opens/closes via Enter / / Esc.
  • VoiceOver: announces only the combobox — no separate "Toggle dropdown" button.
Screenshot 2026-07-21 at 4 26 25 PM

Before:
Screenshot 2026-07-21 at 4 26 53 PM

After:
Screenshot 2026-07-21 at 4 29 04 PM

Issue 3a — RangePicker aria-label prop types

Verified via the type system + compiled output (this is a type change, not a runtime one):

  • yarn typecheck → clean. The props type-check across the codebase; on main they were not usable without a cast.

  • The props are now emitted in the public .d.ts:

    lib/components/DateTimePicker/Internal/OcPicker.types.d.ts
      932:  startDateInputAriaLabel?: string;
      934:  endDateInputAriaLabel?: string;
    

    <RangePicker startDateInputAriaLabel="…" endDateInputAriaLabel="…" /> now type-checks with no as unknown as … cast downstream.

Regression

  • Full unit suite green in pre-commit: 222 suites / 2645 tests pass.
  • Select snapshots regenerated — the only rendered-DOM change is the removed role="presentation" on the chevron; no behavioral change (mouse onClick and keyboard combobox interaction unchanged).

Note: this PR covers Issue 1 and Issue 3a from ENG-203981. Issues 2 (keyboard-active option contrast) and 3b (RangePicker aria passthrough) were already satisfied in octuple 2.58.4 and need no change here.

@nroshan-eightfold nroshan-eightfold changed the title fix(a11y): correct select chevron role and type rangepicker aria-labe… fix(a11y): correct select chevron role and type rangepicker aria-label props Jul 21, 2026
@codesandbox-ci

codesandbox-ci Bot commented Jul 21, 2026

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@codecov

codecov Bot commented Jul 21, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.00%. Comparing base (daa8ea0) to head (f62a472).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1156      +/-   ##
==========================================
- Coverage   85.00%   85.00%   -0.01%     
==========================================
  Files        1230     1230              
  Lines       21588    21587       -1     
  Branches     8209     8209              
==========================================
- Hits        18351    18350       -1     
  Misses       3151     3151              
  Partials       86       86              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@nroshan-eightfold
nroshan-eightfold marked this pull request as ready for review July 21, 2026 10:08
Comment thread src/components/Select/Select.tsx Outdated

@agupta-eightfold agupta-eightfold left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

lgtm

@bgharu-eightfold bgharu-eightfold left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

LGTM

@nroshan-eightfold
nroshan-eightfold merged commit f22fb38 into main Jul 21, 2026
7 of 9 checks passed
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.

3 participants