Skip to content

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

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.

Sign up for GitHub

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

Merged
nroshan-eightfold merged 2 commits into from
Jul 21, 2026
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
197f474
fix(a11y): correct select chevron role and type rangepicker aria-labe…
nroshan-eightfold Jul 21, 2026
f62a472
chore(select): remove chevron comment per review feedback
nroshan-eightfold Jul 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/components/DateTimePicker/Internal/OcPicker.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1024,6 +1024,10 @@ export type OcRangePickerSharedProps<DateType> = {
* Allow start or end input leave empty.
*/
allowEmpty?: [boolean, boolean];
/** Aria label for the range's start-date input. */
startDateInputAriaLabel?: string;
/** Aria label for the range's end-date input. */
endDateInputAriaLabel?: string;
/**
* Configure how to provide automated assistance in filling out form field values.
* https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
Expand Down
11 changes: 4 additions & 7 deletions src/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -966,10 +966,8 @@ export const Select: FC<SelectProps> = React.forwardRef(
);

// Move the active descendant without moving DOM focus
const moveActiveDescendant = (
direction: 'down' | 'up'
): void => {
const navigable: SelectOption[] = getNavigableOptions(); // pickable options
const moveActiveDescendant = (direction: 'down' | 'up'): void => {
const navigable: SelectOption[] = getNavigableOptions(); // pickable options
if (navigable.length === 0) {
return;
}
Expand Down Expand Up @@ -1100,10 +1098,9 @@ export const Select: FC<SelectProps> = React.forwardRef(
? toggleButtonAriaLabel
: 'Toggle dropdown',
htmlType: 'button',
// The button does not need to be the tab order as
// the input itself provides the focus and action.
// Decorative chevron hidden from AT via aria-hidden; the role="combobox"
// input is the interaction surface. No role="presentation" (WCAG 4.1.2).
Comment thread
nroshan-eightfold marked this conversation as resolved.
Outdated
tabIndex: -1,
role: 'presentation',
ariaHidden: true,
iconProps: {
path: dropdownVisible
Expand Down
13 changes: 0 additions & 13 deletions src/components/Select/__snapshots__/Select.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ exports[`Select Renders empty options in multiple mode without crashing 1`] = `
aria-hidden="true"
aria-label="Toggle dropdown"
class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
role="presentation"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -131,7 +130,6 @@ exports[`Select Renders empty options in single mode without crashing 1`] = `
aria-hidden="true"
aria-label="Toggle dropdown"
class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
role="presentation"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -211,7 +209,6 @@ exports[`Select Renders null options in multiple mode without crashing 1`] = `
aria-hidden="true"
aria-label="Toggle dropdown"
class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
role="presentation"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -291,7 +288,6 @@ exports[`Select Renders null options in single mode without crashing 1`] = `
aria-hidden="true"
aria-label="Toggle dropdown"
class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
role="presentation"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -371,7 +367,6 @@ exports[`Select Renders with default value 1`] = `
aria-hidden="true"
aria-label="Toggle dropdown"
class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
role="presentation"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -519,7 +514,6 @@ exports[`Select Renders with default values when multiple 1`] = `
aria-hidden="true"
aria-label="Toggle dropdown"
class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
role="presentation"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -599,7 +593,6 @@ exports[`Select Renders without crashing 1`] = `
aria-hidden="true"
aria-label="Toggle dropdown"
class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
role="presentation"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -678,7 +671,6 @@ exports[`Select Select is large 1`] = `
aria-hidden="true"
aria-label="Toggle dropdown"
class="icon-button right-icon button button-system-ui transparent button-large icon-left"
role="presentation"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -756,7 +748,6 @@ exports[`Select Select is medium 1`] = `
aria-hidden="true"
aria-label="Toggle dropdown"
class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
role="presentation"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -834,7 +825,6 @@ exports[`Select Select is pill shaped 1`] = `
aria-hidden="true"
aria-label="Toggle dropdown"
class="icon-button right-icon button button-system-ui transparent button-medium round-shape icon-left"
role="presentation"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -912,7 +902,6 @@ exports[`Select Select is rectangle shaped 1`] = `
aria-hidden="true"
aria-label="Toggle dropdown"
class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
role="presentation"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -990,7 +979,6 @@ exports[`Select Select is small 1`] = `
aria-hidden="true"
aria-label="Toggle dropdown"
class="icon-button right-icon button button-system-ui transparent button-small icon-left"
role="presentation"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -1068,7 +1056,6 @@ exports[`Select Select is underline shaped 1`] = `
aria-hidden="true"
aria-label="Toggle dropdown"
class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
role="presentation"
tabindex="-1"
type="button"
>
Expand Down
Loading