fix(Card): indicate card selectivity and status if using a screen reader

Author: wise-king-sullyman

packages/react-core/src/components/Card/Card.tsx

@@ -36,6 +36,10 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isPlain?: boolean;
   /** Flag indicating if a card is expanded. Modifies the card to be expandable. */
   isExpanded?: boolean;
+  /** Flag indicating that the card should render a hidden input for a11y reasons */
+  hasHiddenInput?: boolean;
+  /** Callback that executes when the hidden input is changed */
+  onHiddenInputChange?: (labelledBy: string, event: React.FormEvent<HTMLInputElement>) => void;
 }
 
 interface CardContextProps {
@@ -67,6 +71,8 @@ export const Card: React.FunctionComponent<CardProps> = ({
   isPlain = false,
   ouiaId,
   ouiaSafe = true,
+  hasHiddenInput = false,
+  onHiddenInputChange = () => {},
   ...props
 }: CardProps) => {
   const Component = component as any;
@@ -90,33 +96,51 @@ export const Card: React.FunctionComponent<CardProps> = ({
     return '';
   };
 
+  const CardComponent = (
+    <Component
+      id={id}
+      className={css(
+        styles.card,
+        isCompact && styles.modifiers.compact,
+        isExpanded && styles.modifiers.expanded,
+        isFlat && styles.modifiers.flat,
+        isRounded && styles.modifiers.rounded,
+        isLarge && styles.modifiers.displayLg,
+        isFullHeight && styles.modifiers.fullHeight,
+        isPlain && styles.modifiers.plain,
+        getSelectableModifiers(),
+        className
+      )}
+      tabIndex={isSelectable || isSelectableRaised ? '0' : undefined}
+      {...props}
+      {...ouiaProps}
+    >
+      {children}
+    </Component>
+  );
+
+  const CardWithHiddenInput = (
+    <label htmlFor={id}>
+      <input
+        className="pf-screen-reader"
+        type="checkbox"
+        checked={isSelected}
+        onChange={event => onHiddenInputChange(id, event)}
+        aria-labelledby={id}
+        disabled={isDisabledRaised}
+      />
+      {CardComponent}
+    </label>
+  );
+
   return (
     <CardContext.Provider
       value={{
         cardId: id,
         isExpanded
       }}
     >
-      <Component
-        id={id}
-        className={css(
-          styles.card,
-          isCompact && styles.modifiers.compact,
-          isExpanded && styles.modifiers.expanded,
-          isFlat && styles.modifiers.flat,
-          isRounded && styles.modifiers.rounded,
-          isLarge && styles.modifiers.displayLg,
-          isFullHeight && styles.modifiers.fullHeight,
-          isPlain && styles.modifiers.plain,
-          getSelectableModifiers(),
-          className
-        )}
-        tabIndex={isSelectable || isSelectableRaised ? '0' : undefined}
-        {...props}
-        {...ouiaProps}
-      >
-        {children}
-      </Component>
+      {hasHiddenInput ? CardWithHiddenInput : CardComponent}
     </CardContext.Provider>
   );
 };

packages/react-core/src/components/Card/examples/CardSelectable.tsx

@@ -31,6 +31,11 @@ export const CardSelectable: React.FunctionComponent = () => {
     setSelected(newSelected);
   };
 
+  const onChange = (labelledById: string, _event: React.FormEvent<HTMLInputElement>) => {
+    const newSelected = labelledById === selected ? null : labelledById;
+    setSelected(newSelected);
+  };
+
   const onToggle = (
     isOpen: boolean,
     event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>
@@ -68,6 +73,8 @@ export const CardSelectable: React.FunctionComponent = () => {
         id="selectable-first-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
+        hasHiddenInput
+        onHiddenInputChange={onChange}
         isSelectableRaised
         isSelected={selected === 'selectable-first-card'}
       >
@@ -91,14 +98,16 @@ export const CardSelectable: React.FunctionComponent = () => {
         id="selectable-second-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
+        hasHiddenInput
+        onHiddenInputChange={onChange}
         isSelectableRaised
         isSelected={selected === 'selectable-second-card'}
       >
         <CardTitle>Second card</CardTitle>
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>
       <br />
-      <Card id="selectable-third-card" isSelectableRaised isDisabledRaised>
+      <Card id="selectable-third-card" isSelectableRaised isDisabledRaised aria-disabled hasHiddenInput>
         <CardTitle>Third card</CardTitle>
         <CardBody>This is a raised but disabled card.</CardBody>
       </Card>

packages/react-core/src/demos/Card/Card.md

@@ -103,7 +103,8 @@ class CardViewBasic extends React.Component {
       splitButtonDropdownIsOpen: false,
       page: 1,
       perPage: 10,
-      totalItemCount: 10
+      totalItemCount: 10,
+      focusedItemId: '',
     };
 
     this.onToolbarDropdownToggle = isLowerToolbarDropdownOpen => {
@@ -581,10 +582,13 @@ class CardViewBasic extends React.Component {
                 <Card 
                   isSelectable 
                   selectableVariant="raised" 
+                  hasHiddenInput
                   isCompact 
                   key={product.name}
+                  id={product.name}
                   onKeyDown={(e) => this.onKeyDown(e, product.id)}
                   onClick={() => this.onClick(product.id)}
+                  onHiddenInputChange={() => this.onClick(product.id)}
                   isSelected={selectedItems.includes(product.id)}
                 >
                   <CardHeader>

packages/react-core/src/demos/PrimaryDetail.md

@@ -1100,6 +1100,7 @@ class PrimaryDetailCardView extends React.Component {
         return;
       }
       if ([13, 32].includes(event.keyCode)) {
+        event.preventDefault();
         const newSelected = event.currentTarget.id;
         this.setState({
           activeCard: newSelected,
@@ -1121,6 +1122,17 @@ class PrimaryDetailCardView extends React.Component {
       });
     };
 
+    this.onChange = (labelledById, _event) => {
+      if (labelledById === this.state.activeCard) {
+        return;
+      }
+
+      this.setState({
+        activeCard: labelledById,
+        isDrawerExpanded: true
+      });
+    };
+
     this.onPerPageSelect = (_evt, perPage) => {
       this.setState({ page: 1, perPage });
     };
@@ -1271,8 +1283,10 @@ class PrimaryDetailCardView extends React.Component {
               id={'card-view-' + key}
               onKeyDown={this.onKeyDown}
               onClick={this.onCardClick}
+              onHiddenInputChange={this.onChange}
               isSelectable
-              isSelected={activeCard === key}
+              isSelected={activeCard === 'card-view-' + key}
+              hasHiddenInput
             >
               <CardHeader>
                 <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />

packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx

@@ -94,9 +94,12 @@ export const ModalTabs: React.FunctionComponent = () => {
               <Card
                 isSelectable
                 isSelectableRaised
+                hasHiddenInput
                 isCompact
                 key={product.id}
+                id={product.name}
                 onClick={onCardClick(product)}
+                onHiddenInputChange={() => onCardClick(product)()}
                 onKeyPress={onCardKeyPress(product)}
               >
                 <CardTitle>{product.name}</CardTitle>