Skip to content

[Accessibility] Fix accessibility roles and states for radio buttons, checkboxes, and tabs #81054

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

Open
ashu75575 wants to merge 10 commits into
base: main
Choose a base branch
from
+37 −4
Open

[Accessibility] Fix accessibility roles and states for radio buttons, checkboxes, and tabs #81054

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
71ace07
Fix accessibility roles and states for radio buttons, checkboxes, and…
ashu75575 Jan 30, 2026
e5efd1c
code format
ashu75575 Jan 30, 2026
23adcc3
Merge branch 'Expensify:main' into fix/79240
ashu75575 Jan 30, 2026
c826b49
fix ai comment
ashu75575 Jan 31, 2026
d6431ac
Merge branch 'Expensify:main' into fix/79240
ashu75575 Jan 31, 2026
db43c01
fix type checks
ashu75575 Feb 1, 2026
a3d246b
fix eslint
ashu75575 Feb 1, 2026
20cd080
fix tests
ashu75575 Feb 1, 2026
79868b7
Refactor accessibility roles in selection list items
ashu75575 Feb 1, 2026
3360f03
fix eslint
ashu75575 Feb 1, 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
6 changes: 6 additions & 0 deletions src/CONST/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8110,6 +8110,12 @@ const CONST = {
LHN: {
OPTION_ROW: 'LHN-OptionRow',
},
SELECTION_LIST: {
BASE_LIST_ITEM: 'SelectionList-BaseListItem',
},
SELECTION_LIST_WITH_SECTIONS: {
BASE_LIST_ITEM: 'SelectionListWithSections-BaseListItem',
},
CONTEXT_MENU: {
REPLY_IN_THREAD: 'ContextMenu-ReplyInThread',
MARK_AS_UNREAD: 'ContextMenu-MarkAsUnread',
Expand Down
8 changes: 7 additions & 1 deletion src/components/SelectionList/ListItem/BaseListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ function BaseListItem<TItem extends ListItem>({
shouldDisableHoverStyle,
shouldStopMouseLeavePropagation = true,
shouldShowRightCaret = false,
accessibilityRole = getButtonRole(true),
}: BaseListItemProps<TItem>) {
const theme = useTheme();
const styles = useThemeStyles();
Expand Down Expand Up @@ -85,6 +86,9 @@ function BaseListItem<TItem extends ListItem>({

const shouldShowHiddenCheckmark = shouldShowRBRIndicator && !shouldShowCheckmark;

const accessibilityState =
accessibilityRole === CONST.ROLE.CHECKBOX || accessibilityRole === CONST.ROLE.RADIO ? {checked: !!item.isSelected, selected: !!isFocused} : {selected: !!isFocused};

return (
<OfflineWithFeedback
onClose={() => onDismissError(item)}
Expand All @@ -94,6 +98,7 @@ function BaseListItem<TItem extends ListItem>({
contentContainerStyle={containerStyle}
>
<PressableWithFeedback
sentryLabel={CONST.SENTRY_LABEL.SELECTION_LIST.BASE_LIST_ITEM}
// eslint-disable-next-line react/jsx-props-no-spreading
{...bind}
ref={pressableRef}
Expand All @@ -113,7 +118,8 @@ function BaseListItem<TItem extends ListItem>({
disabled={isDisabled && !item.isSelected}
interactive={item.isInteractive}
accessibilityLabel={item.accessibilityLabel ?? [item.text, item.text !== item.alternateText ? item.alternateText : undefined].filter(Boolean).join(', ')}
role={getButtonRole(true)}
role={accessibilityRole}
accessibilityState={accessibilityState}
isNested
hoverDimmingValue={1}
pressDimmingValue={item.isInteractive === false ? 1 : variables.pressDimValue}
Expand Down
1 change: 1 addition & 0 deletions src/components/SelectionList/ListItem/MultiSelectListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ function MultiSelectListItem<TItem extends ListItem>({
isDisabled={isDisabled}
rightHandSideComponent={checkboxComponent}
onSelectRow={onSelectRow}
accessibilityRole={CONST.ROLE.CHECKBOX}
onDismissError={onDismissError}
shouldPreventEnterKeySubmit={shouldPreventEnterKeySubmit}
isMultilineSupported={isMultilineSupported}
Expand Down
2 changes: 2 additions & 0 deletions src/components/SelectionList/ListItem/RadioListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ function RadioListItem<TItem extends ListItem>({
shouldHighlightSelectedItem = true,
shouldDisableHoverStyle,
shouldStopMouseLeavePropagation,
accessibilityRole,
}: RadioListItemProps<TItem>) {
const styles = useThemeStyles();
const fullTitle = isMultilineSupported ? item.text?.trimStart() : item.text;
Expand All @@ -51,6 +52,7 @@ function RadioListItem<TItem extends ListItem>({
shouldHighlightSelectedItem={shouldHighlightSelectedItem}
shouldDisableHoverStyle={shouldDisableHoverStyle}
shouldStopMouseLeavePropagation={shouldStopMouseLeavePropagation}
accessibilityRole={accessibilityRole}
>
<>
{!!item.leftElement && item.leftElement}
Expand Down
5 changes: 4 additions & 1 deletion src/components/SelectionList/ListItem/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type {ReactElement, ReactNode} from 'react';
import type {AccessibilityState, BlurEvent, NativeSyntheticEvent, StyleProp, TargetedEvent, TextStyle, ViewStyle} from 'react-native';
import type {AccessibilityState, BlurEvent, NativeSyntheticEvent, Role, StyleProp, TargetedEvent, TextStyle, ViewStyle} from 'react-native';
import type {AnimatedStyle} from 'react-native-reanimated';
import type {ValueOf} from 'type-fest';
import type {ForwardedFSClassProps} from '@libs/Fullstory/types';
Expand Down Expand Up @@ -195,6 +195,9 @@ type CommonListItemProps<TItem extends ListItem> = {
/** Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on */
accessibilityState?: AccessibilityState;

/** Accessibility role for the list item (e.g. 'checkbox' for multi-select options so screen readers announce checked state) */
accessibilityRole?: Role;

/** Whether to show the right caret icon */
shouldShowRightCaret?: boolean;
} & TRightHandSideComponent<TItem>;
Expand Down
8 changes: 7 additions & 1 deletion src/components/SelectionListWithSections/BaseListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ function BaseListItem<TItem extends ListItem>({
shouldHighlightSelectedItem = true,
shouldDisableHoverStyle,
shouldStopMouseLeavePropagation = true,
accessibilityRole = getButtonRole(true),
}: BaseListItemProps<TItem>) {
const icons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
const theme = useTheme();
Expand Down Expand Up @@ -83,6 +84,9 @@ function BaseListItem<TItem extends ListItem>({
const defaultAccessibilityLabel = item.text === item.alternateText ? (item.text ?? '') : [item.text, item.alternateText].filter(Boolean).join(', ');
const accessibilityLabel = item.accessibilityLabel ?? defaultAccessibilityLabel;

const accessibilityState =
accessibilityRole === CONST.ROLE.CHECKBOX || accessibilityRole === CONST.ROLE.RADIO ? {checked: !!item.isSelected, selected: !!isFocused} : {selected: !!isFocused};

return (
<OfflineWithFeedback
onClose={() => onDismissError(item)}
Expand All @@ -92,6 +96,7 @@ function BaseListItem<TItem extends ListItem>({
contentContainerStyle={containerStyle}
>
<PressableWithFeedback
sentryLabel={CONST.SENTRY_LABEL.SELECTION_LIST_WITH_SECTIONS.BASE_LIST_ITEM}
// eslint-disable-next-line react/jsx-props-no-spreading
{...bind}
ref={pressableRef}
Expand All @@ -111,7 +116,8 @@ function BaseListItem<TItem extends ListItem>({
disabled={isDisabled && !item.isSelected}
interactive={item.isInteractive}
accessibilityLabel={accessibilityLabel}
role={getButtonRole(true)}
accessibilityState={accessibilityState}
role={accessibilityRole}
isNested
hoverDimmingValue={1}
pressDimmingValue={item.isInteractive === false ? 1 : variables.pressDimValue}
Expand Down
2 changes: 2 additions & 0 deletions src/components/SelectionListWithSections/RadioListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ function RadioListItem<TItem extends ListItem>({
shouldHighlightSelectedItem = true,
shouldDisableHoverStyle,
shouldStopMouseLeavePropagation,
accessibilityRole,
}: RadioListItemProps<TItem>) {
const styles = useThemeStyles();
const fullTitle = isMultilineSupported ? item.text?.trimStart() : item.text;
Expand All @@ -51,6 +52,7 @@ function RadioListItem<TItem extends ListItem>({
shouldHighlightSelectedItem={shouldHighlightSelectedItem}
shouldDisableHoverStyle={shouldDisableHoverStyle}
shouldStopMouseLeavePropagation={shouldStopMouseLeavePropagation}
accessibilityRole={accessibilityRole}
>
<>
{!!item.leftElement && item.leftElement}
Expand Down
2 changes: 2 additions & 0 deletions src/components/SelectionListWithSections/SingleSelectListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, {useCallback} from 'react';
import Checkbox from '@components/Checkbox';
import useThemeStyles from '@hooks/useThemeStyles';
import CONST from '@src/CONST';
import RadioListItem from './RadioListItem';
import type {ListItem, SingleSelectListItemProps} from './types';

Expand Down Expand Up @@ -48,6 +49,7 @@ function SingleSelectListItem<TItem extends ListItem>({
isDisabled={isDisabled}
rightHandSideComponent={radioCheckboxComponent}
onSelectRow={onSelectRow}
accessibilityRole={CONST.ROLE.RADIO}
onDismissError={onDismissError}
shouldPreventEnterKeySubmit={shouldPreventEnterKeySubmit}
isMultilineSupported={isMultilineSupported}
Expand Down
4 changes: 4 additions & 0 deletions src/components/SelectionListWithSections/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type {
LayoutChangeEvent,
NativeScrollEvent,
NativeSyntheticEvent,
Role,
ScrollViewProps,
SectionListData,
StyleProp,
Expand Down Expand Up @@ -123,6 +124,9 @@ type CommonListItemProps<TItem extends ListItem> = {

/** Whether to call stopPropagation on the mouseleave event in BaseListItem */
shouldStopMouseLeavePropagation?: boolean;

/** Accessibility role for the list item (e.g. 'checkbox' for multi-select options so screen readers announce checked state) */
accessibilityRole?: Role;
} & TRightHandSideComponent<TItem>;

type ListItemFocusEventHandler = (event: NativeSyntheticEvent<ExtendedTargetedEvent>) => void;
Expand Down
3 changes: 2 additions & 1 deletion src/components/TabSelector/TabSelectorItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,12 +118,13 @@ function TabSelectorItem({
<AnimatedPressableWithFeedback
accessibilityLabel={title}
accessibilityState={accessibilityState}
accessibilityRole={CONST.ROLE.TAB}
style={[styles.tabSelectorButton, styles.tabBackground(isHovered, isActive, backgroundColor), styles.userSelectNone]}
wrapperStyle={[equalWidth ? styles.flex1 : styles.flexGrow1]}
onPress={onPress}
onHoverIn={() => setIsHovered(true)}
onHoverOut={() => setIsHovered(false)}
role={CONST.ROLE.BUTTON}
role={CONST.ROLE.TAB}
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
testID={testID}
ref={childRef}
Expand Down
Loading