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

src/CONST/index.ts

@@ -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',

src/components/SelectionList/ListItem/BaseListItem.tsx

@@ -1,4 +1,5 @@
 import React, {useRef} from 'react';
+import type {Role} from 'react-native';
 import {View} from 'react-native';
 import {getButtonRole} from '@components/Button/utils';
 import Icon from '@components/Icon';
@@ -47,6 +48,7 @@ function BaseListItem<TItem extends ListItem>({
     shouldDisableHoverStyle,
     shouldStopMouseLeavePropagation = true,
     shouldShowRightCaret = false,
+    shouldUseRadioRole = false,
 }: BaseListItemProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -85,6 +87,18 @@ function BaseListItem<TItem extends ListItem>({
 
     const shouldShowHiddenCheckmark = shouldShowRBRIndicator && !shouldShowCheckmark;
 
+    const isRadioOption = shouldUseRadioRole;
+    const isCheckboxOption = canSelectMultiple;
+    let role: Role | undefined;
+    if (isCheckboxOption) {
+        role = CONST.ROLE.CHECKBOX;
+    } else if (isRadioOption) {
+        role = CONST.ROLE.RADIO;
+    } else {
+        role = getButtonRole(true);
+    }
+    const accessibilityState = isRadioOption || isCheckboxOption ? {checked: !!item.isSelected, selected: !!isFocused} : {selected: !!isFocused};
+
     return (
         <OfflineWithFeedback
             onClose={() => onDismissError(item)}
@@ -94,6 +108,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}
@@ -113,7 +128,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={role}
+                accessibilityState={accessibilityState}
                 isNested
                 hoverDimmingValue={1}
                 pressDimmingValue={item.isInteractive === false ? 1 : variables.pressDimValue}

src/components/SelectionList/ListItem/MultiSelectListItem.tsx

@@ -76,6 +76,7 @@ function MultiSelectListItem<TItem extends ListItem>({
             showTooltip={showTooltip}
             isDisabled={isDisabled}
             rightHandSideComponent={checkboxComponent}
+            canSelectMultiple
             onSelectRow={onSelectRow}
             onDismissError={onDismissError}
             shouldPreventEnterKeySubmit={shouldPreventEnterKeySubmit}

src/components/SelectionList/ListItem/RadioListItem.tsx

@@ -26,6 +26,7 @@ function RadioListItem<TItem extends ListItem>({
     shouldHighlightSelectedItem = true,
     shouldDisableHoverStyle,
     shouldStopMouseLeavePropagation,
+    canSelectMultiple,
 }: RadioListItemProps<TItem>) {
     const styles = useThemeStyles();
     const fullTitle = isMultilineSupported ? item.text?.trimStart() : item.text;
@@ -40,6 +41,7 @@ function RadioListItem<TItem extends ListItem>({
             isFocused={isFocused}
             isDisabled={isDisabled}
             showTooltip={showTooltip}
+            canSelectMultiple={canSelectMultiple}
             onSelectRow={onSelectRow}
             onDismissError={onDismissError}
             shouldPreventEnterKeySubmit={shouldPreventEnterKeySubmit}
@@ -51,6 +53,8 @@ function RadioListItem<TItem extends ListItem>({
             shouldHighlightSelectedItem={shouldHighlightSelectedItem}
             shouldDisableHoverStyle={shouldDisableHoverStyle}
             shouldStopMouseLeavePropagation={shouldStopMouseLeavePropagation}
+            shouldUseDefaultRightHandSideCheckmark={!canSelectMultiple || !rightHandSideComponent}
+            shouldUseRadioRole
         >
             <>
                 {!!item.leftElement && item.leftElement}

src/components/SelectionList/ListItem/types.ts

@@ -314,6 +314,9 @@ type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
 
     /** Whether to call stopPropagation on the mouseleave event in BaseListItem */
     shouldStopMouseLeavePropagation?: boolean;
+
+    /** Whether to expose this row as a radio option for screen readers (single-choice group). Set by RadioListItem. */
+    shouldUseRadioRole?: boolean;
 };
 
 type SplitListItemType = ListItem &

src/components/SelectionListWithSections/BaseListItem.tsx

@@ -1,4 +1,5 @@
 import React, {useRef} from 'react';
+import type {Role} from 'react-native';
 import {View} from 'react-native';
 import {getButtonRole} from '@components/Button/utils';
 import Icon from '@components/Icon';
@@ -48,6 +49,7 @@ function BaseListItem<TItem extends ListItem>({
     shouldHighlightSelectedItem = true,
     shouldDisableHoverStyle,
     shouldStopMouseLeavePropagation = true,
+    shouldUseRadioRole = false,
 }: BaseListItemProps<TItem>) {
     const icons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
     const theme = useTheme();
@@ -83,6 +85,18 @@ 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 isRadioOption = shouldUseRadioRole;
+    const isCheckboxOption = canSelectMultiple;
+    let role: Role | undefined;
+    if (isCheckboxOption) {
+        role = CONST.ROLE.CHECKBOX;
+    } else if (isRadioOption) {
+        role = CONST.ROLE.RADIO;
+    } else {
+        role = getButtonRole(true);
+    }
+    const accessibilityState = isRadioOption || isCheckboxOption ? {checked: !!item.isSelected, selected: !!isFocused} : {selected: !!isFocused};
+
     return (
         <OfflineWithFeedback
             onClose={() => onDismissError(item)}
@@ -92,6 +106,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}
@@ -111,7 +126,8 @@ function BaseListItem<TItem extends ListItem>({
                 disabled={isDisabled && !item.isSelected}
                 interactive={item.isInteractive}
                 accessibilityLabel={accessibilityLabel}
-                role={getButtonRole(true)}
+                accessibilityState={accessibilityState}
+                role={role}
                 isNested
                 hoverDimmingValue={1}
                 pressDimmingValue={item.isInteractive === false ? 1 : variables.pressDimValue}

src/components/SelectionListWithSections/RadioListItem.tsx

@@ -51,6 +51,7 @@ function RadioListItem<TItem extends ListItem>({
             shouldHighlightSelectedItem={shouldHighlightSelectedItem}
             shouldDisableHoverStyle={shouldDisableHoverStyle}
             shouldStopMouseLeavePropagation={shouldStopMouseLeavePropagation}
+            shouldUseRadioRole
         >
             <>
                 {!!item.leftElement && item.leftElement}

src/components/SelectionListWithSections/types.ts

@@ -619,6 +619,8 @@ type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> &
         testID?: string;
         /** Whether to show the default right hand side checkmark */
         shouldUseDefaultRightHandSideCheckmark?: boolean;
+        /** Whether to expose this row as a radio option for screen readers (single-choice group). Set by RadioListItem. */
+        shouldUseRadioRole?: boolean;
     };
 
 type UserListItemProps<TItem extends ListItem> = ListItemProps<TItem> &

src/components/TabSelector/TabSelectorItem.tsx

@@ -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}