diff --git a/packages/mobile/src/cells/Cell.tsx b/packages/mobile/src/cells/Cell.tsx
index def5e747eb..5ed30553fc 100644
--- a/packages/mobile/src/cells/Cell.tsx
+++ b/packages/mobile/src/cells/Cell.tsx
@@ -282,7 +282,7 @@ export const Cell = memo(function Cell(_props: CellProps) {
accessibilityHint={accessibilityHint}
accessibilityLabel={accessibilityLabel}
accessibilityRole={accessibilityRole}
- accessibilityState={{ disabled, ...accessibilityState }}
+ accessibilityState={{ disabled, selected, ...accessibilityState }}
background="bg"
blendStyles={blendStyles}
borderRadius={borderRadius}
@@ -306,6 +306,7 @@ export const Cell = memo(function Cell(_props: CellProps) {
accessibilityLabel,
accessibilityRole,
disabled,
+ selected,
styles?.pressable,
accessibilityState,
blendStyles,
diff --git a/packages/mobile/src/cells/__tests__/ListCell.test.tsx b/packages/mobile/src/cells/__tests__/ListCell.test.tsx
index b6222283c4..506ee2f9b2 100644
--- a/packages/mobile/src/cells/__tests__/ListCell.test.tsx
+++ b/packages/mobile/src/cells/__tests__/ListCell.test.tsx
@@ -318,6 +318,30 @@ describe('ListCell', () => {
expect(screen.getByTestId('listcell-with-a11y')).toBeAccessible();
});
+ it('sets selected accessibilityState when selected and pressable', () => {
+ render(
+
+
+ ,
+ );
+
+ expect(screen.getByTestId('listcell-selected-cell-pressable')).toHaveAccessibilityState({
+ selected: true,
+ });
+ });
+
+ it('does not set selected accessibilityState when not selected', () => {
+ render(
+
+
+ ,
+ );
+
+ expect(screen.getByTestId('listcell-not-selected-cell-pressable')).not.toHaveAccessibilityState(
+ { selected: true },
+ );
+ });
+
it('applies styles to internal components', () => {
const styles = {
accessory: { borderRightWidth: 11 },
diff --git a/packages/web/src/cells/Cell.tsx b/packages/web/src/cells/Cell.tsx
index a25c37e12a..ced6a48972 100644
--- a/packages/web/src/cells/Cell.tsx
+++ b/packages/web/src/cells/Cell.tsx
@@ -430,14 +430,20 @@ export const Cell: CellComponent = memo(
};
if (isAnchor)
return (
-
+
{content}
);
if (isButton)
return (
-
+
{content}
);
@@ -454,6 +460,7 @@ export const Cell: CellComponent = memo(
onClick,
onKeyDown,
onKeyUp,
+ selected,
tabIndex,
testID,
styles?.pressable,
diff --git a/packages/web/src/cells/__tests__/Cell.test.tsx b/packages/web/src/cells/__tests__/Cell.test.tsx
index 5082c000b9..c8cdbcda7d 100644
--- a/packages/web/src/cells/__tests__/Cell.test.tsx
+++ b/packages/web/src/cells/__tests__/Cell.test.tsx
@@ -282,4 +282,48 @@ describe('Cell', () => {
expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
});
+
+ it('sets aria-pressed on the button when selected', () => {
+ render(
+
+ |
+ {CELL_TEXT}
+ |
+ ,
+ );
+
+ expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'true');
+ });
+
+ it('does not set aria-pressed on the button when not selected', () => {
+ render(
+
+ {CELL_TEXT} |
+ ,
+ );
+
+ expect(screen.getByRole('button')).not.toHaveAttribute('aria-pressed', 'true');
+ });
+
+ it('sets aria-current on the link when selected', () => {
+ render(
+
+
+ {CELL_TEXT}
+ |
+ ,
+ );
+
+ expect(screen.getByRole('link')).toHaveAttribute('aria-current', 'true');
+ });
+
+ it('does not set aria-current on the link when not selected', () => {
+ render(
+
+ {CELL_TEXT} |
+ ,
+ );
+
+ expect(screen.getByRole('link')).not.toHaveAttribute('aria-current');
+ });
});