From 90d8e17a6b33a642be12e9319bce8a598e0cd5e1 Mon Sep 17 00:00:00 2001 From: Maximo Macchi <232606069+maximo-macchi-cb@users.noreply.github.com> Date: Tue, 21 Apr 2026 14:35:35 -0700 Subject: [PATCH 1/4] Update a11y state --- packages/mobile/src/cells/Cell.tsx | 3 ++- packages/web/src/cells/Cell.tsx | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) 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/web/src/cells/Cell.tsx b/packages/web/src/cells/Cell.tsx index a25c37e12a..aa39d7fd8e 100644 --- a/packages/web/src/cells/Cell.tsx +++ b/packages/web/src/cells/Cell.tsx @@ -416,6 +416,7 @@ export const Cell: CellComponent = memo( accessibilityHint, accessibilityLabel, accessibilityLabelledBy, + 'aria-selected': selected, background: 'bg' as const, borderRadius, className: cx(pressCss, insetFocusRingCss, classNames?.pressable), @@ -454,6 +455,7 @@ export const Cell: CellComponent = memo( onClick, onKeyDown, onKeyUp, + selected, tabIndex, testID, styles?.pressable, @@ -468,6 +470,7 @@ export const Cell: CellComponent = memo( Date: Tue, 21 Apr 2026 14:36:22 -0700 Subject: [PATCH 2/4] Add tests --- .../src/cells/__tests__/ListCell.test.tsx | 24 ++++++++++ .../web/src/cells/__tests__/Cell.test.tsx | 46 +++++++++++++++++++ 2 files changed, 70 insertions(+) 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/__tests__/Cell.test.tsx b/packages/web/src/cells/__tests__/Cell.test.tsx index 5082c000b9..0e950e062e 100644 --- a/packages/web/src/cells/__tests__/Cell.test.tsx +++ b/packages/web/src/cells/__tests__/Cell.test.tsx @@ -282,4 +282,50 @@ describe('Cell', () => { expect(onKeyDownSpy).toHaveBeenCalledTimes(1); }); + + it('sets aria-selected on the pressable element when selected and interactive', () => { + render( + + + {CELL_TEXT} + + , + ); + + expect(screen.getByRole('button')).toHaveAttribute('aria-selected', 'true'); + }); + + it('does not set aria-selected on the pressable element when not selected', () => { + render( + + {CELL_TEXT} + , + ); + + expect(screen.getByRole('button')).not.toHaveAttribute('aria-selected'); + }); + + it('sets aria-selected on the root element when selected and not interactive', () => { + render( + + + {CELL_TEXT} + + , + ); + + expect(screen.getByTestId('cell')).toHaveAttribute('aria-selected', 'true'); + }); + + it('sets aria-selected on the link element when selected and linkable', () => { + render( + + + {CELL_TEXT} + + , + ); + + expect(screen.getByRole('link')).toHaveAttribute('aria-selected', 'true'); + }); }); From 42dcc94cbf66ae70d24328c69179dd9b27fd98a9 Mon Sep 17 00:00:00 2001 From: Maximo Macchi <232606069+maximo-macchi-cb@users.noreply.github.com> Date: Tue, 21 Apr 2026 14:47:30 -0700 Subject: [PATCH 3/4] Remove usage of aria-selected for non-interactive cells --- packages/web/src/cells/Cell.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web/src/cells/Cell.tsx b/packages/web/src/cells/Cell.tsx index aa39d7fd8e..2cd35e858d 100644 --- a/packages/web/src/cells/Cell.tsx +++ b/packages/web/src/cells/Cell.tsx @@ -470,7 +470,6 @@ export const Cell: CellComponent = memo( Date: Wed, 22 Apr 2026 10:00:12 -0700 Subject: [PATCH 4/4] Update role --- packages/web/src/cells/Cell.tsx | 11 +++++++--- .../web/src/cells/__tests__/Cell.test.tsx | 22 +++++++++---------- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/packages/web/src/cells/Cell.tsx b/packages/web/src/cells/Cell.tsx index 2cd35e858d..ced6a48972 100644 --- a/packages/web/src/cells/Cell.tsx +++ b/packages/web/src/cells/Cell.tsx @@ -416,7 +416,6 @@ export const Cell: CellComponent = memo( accessibilityHint, accessibilityLabel, accessibilityLabelledBy, - 'aria-selected': selected, background: 'bg' as const, borderRadius, className: cx(pressCss, insetFocusRingCss, classNames?.pressable), @@ -431,14 +430,20 @@ export const Cell: CellComponent = memo( }; if (isAnchor) return ( - + {content} ); if (isButton) return ( - + {content} ); diff --git a/packages/web/src/cells/__tests__/Cell.test.tsx b/packages/web/src/cells/__tests__/Cell.test.tsx index 0e950e062e..c8cdbcda7d 100644 --- a/packages/web/src/cells/__tests__/Cell.test.tsx +++ b/packages/web/src/cells/__tests__/Cell.test.tsx @@ -283,7 +283,7 @@ describe('Cell', () => { expect(onKeyDownSpy).toHaveBeenCalledTimes(1); }); - it('sets aria-selected on the pressable element when selected and interactive', () => { + it('sets aria-pressed on the button when selected', () => { render( @@ -292,40 +292,38 @@ describe('Cell', () => { , ); - expect(screen.getByRole('button')).toHaveAttribute('aria-selected', 'true'); + expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'true'); }); - it('does not set aria-selected on the pressable element when not selected', () => { + it('does not set aria-pressed on the button when not selected', () => { render( {CELL_TEXT} , ); - expect(screen.getByRole('button')).not.toHaveAttribute('aria-selected'); + expect(screen.getByRole('button')).not.toHaveAttribute('aria-pressed', 'true'); }); - it('sets aria-selected on the root element when selected and not interactive', () => { + it('sets aria-current on the link when selected', () => { render( - + {CELL_TEXT} , ); - expect(screen.getByTestId('cell')).toHaveAttribute('aria-selected', 'true'); + expect(screen.getByRole('link')).toHaveAttribute('aria-current', 'true'); }); - it('sets aria-selected on the link element when selected and linkable', () => { + it('does not set aria-current on the link when not selected', () => { render( - - {CELL_TEXT} - + {CELL_TEXT} , ); - expect(screen.getByRole('link')).toHaveAttribute('aria-selected', 'true'); + expect(screen.getByRole('link')).not.toHaveAttribute('aria-current'); }); });