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'); + }); });