import React from 'react'; import { Card, CardTitle, CardBody } from '@patternfly/react-core'; export const CardLegacySelectableA11yHighlight: React.FunctionComponent = () => { const [selected, setSelected] = React.useState(''); const onKeyDown = (event: React.KeyboardEvent) => { if (event.target !== event.currentTarget) { return; } if ([' ', 'Enter'].includes(event.key)) { event.preventDefault(); const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id; setSelected(newSelected); } }; const onClick = (event: React.MouseEvent) => { const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id; setSelected(newSelected); }; const onChange = (_event: React.FormEvent, labelledById: string) => { const newSelected = labelledById === selected ? '' : labelledById; setSelected(newSelected); }; return ( Selectable card with proper accessibility considerations When using a screen reader a checkbox will become navigable that indicates this card is selectable and communicate if it is currently selected.
Selectable card without proper accessibility considerations When using a screen reader there are no indications that this card is selectable or if it is currently selected. ); };