@patternfly/react-core 4.213.2 → 4.213.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.213.2",
+  "version": "4.213.3",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.64.2",
-    "@patternfly/react-styles": "^4.63.2",
-    "@patternfly/react-tokens": "^4.65.2",
+    "@patternfly/react-icons": "^4.64.3",
+    "@patternfly/react-styles": "^4.63.3",
+    "@patternfly/react-tokens": "^4.65.3",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "42579815df2b03fd9efa0082f41dd349fa04bfe4"
+  "gitHead": "ac145c98fef36357752cd28ffd81f3fcd4ba2cb5"
 }

package/src/components/Card/Card.tsx

@@ -36,15 +36,28 @@ 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 to make it selectable */
+  hasSelectableInput?: boolean;
+  /** Aria label to apply to the selectable input if one is rendered */
+  selectableInputAriaLabel?: string;
+  /** Callback that executes when the selectable input is changed */
+  onSelectableInputChange?: (labelledBy: string, event: React.FormEvent<HTMLInputElement>) => void;
 }
 
 interface CardContextProps {
   cardId: string;
+  registerTitleId: (id: string) => void;
   isExpanded: boolean;
 }
 
+interface AriaProps {
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}
+
 export const CardContext = React.createContext<Partial<CardContextProps>>({
   cardId: '',
+  registerTitleId: () => {},
   isExpanded: false
 });
 
@@ -67,10 +80,16 @@ export const Card: React.FunctionComponent<CardProps> = ({
   isPlain = false,
   ouiaId,
   ouiaSafe = true,
+  hasSelectableInput = false,
+  selectableInputAriaLabel,
+  onSelectableInputChange = () => {},
   ...props
 }: CardProps) => {
   const Component = component as any;
   const ouiaProps = useOUIAProps(Card.displayName, ouiaId, ouiaSafe);
+  const [titleId, setTitleId] = React.useState('');
+  const [ariaProps, setAriaProps] = React.useState<AriaProps>();
+
   if (isCompact && isLarge) {
     // eslint-disable-next-line no-console
     console.warn('Card: Cannot use isCompact with isLarge. Defaulting to isCompact');
@@ -90,13 +109,47 @@ export const Card: React.FunctionComponent<CardProps> = ({
     return '';
   };
 
+  const containsCardTitleChildRef = React.useRef(false);
+
+  const registerTitleId = (id: string) => {
+    setTitleId(id);
+    containsCardTitleChildRef.current = !!id;
+  };
+
+  React.useEffect(() => {
+    if (selectableInputAriaLabel) {
+      setAriaProps({ 'aria-label': selectableInputAriaLabel });
+    } else if (titleId) {
+      setAriaProps({ 'aria-labelledby': titleId });
+    } else if (hasSelectableInput && !containsCardTitleChildRef.current) {
+      setAriaProps({});
+      // eslint-disable-next-line no-console
+      console.warn(
+        'If no CardTitle component is passed as a child of Card the selectableInputAriaLabel prop must be passed'
+      );
+    }
+  }, [hasSelectableInput, selectableInputAriaLabel, titleId]);
+
   return (
     <CardContext.Provider
       value={{
         cardId: id,
+        registerTitleId,
         isExpanded
       }}
     >
+      {hasSelectableInput && (
+        <input
+          className="pf-screen-reader"
+          id={`${id}-input`}
+          {...ariaProps}
+          type="checkbox"
+          checked={isSelected}
+          onChange={event => onSelectableInputChange(id, event)}
+          disabled={isDisabledRaised}
+          tabIndex={-1}
+        />
+      )}
       <Component
         id={id}
         className={css(

package/src/components/Card/CardTitle.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
+import { CardContext } from './Card';
 
 export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the CardTitle */
@@ -17,9 +18,18 @@ export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
   component = 'div',
   ...props
 }: CardTitleProps) => {
+  const { cardId, registerTitleId } = React.useContext(CardContext);
   const Component = component as any;
+  const titleId = cardId ? `${cardId}-title` : '';
+
+  React.useEffect(() => {
+    registerTitleId(titleId);
+
+    return () => registerTitleId('');
+  }, [registerTitleId, titleId]);
+
   return (
-    <Component className={css(styles.cardTitle, className)} {...props}>
+    <Component className={css(styles.cardTitle, className)} id={titleId || undefined} {...props}>
       {children}
     </Component>
   );

package/src/components/Card/__tests__/Card.test.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
+
 import { render, screen } from '@testing-library/react';
-import { Card } from '../Card';
+import '@testing-library/jest-dom';
+
+import { Card, CardContext } from '../Card';
 
 describe('Card', () => {
   test('renders with PatternFly Core styles', () => {
@@ -118,4 +121,90 @@ describe('Card', () => {
     render(<Card isLarge isCompact />);
     expect(consoleWarnMock).toHaveBeenCalled();
   });
+
+  test('card renders with a hidden input to improve a11y when hasSelectableInput is passed', () => {
+    render(<Card isSelectable hasSelectableInput />);
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toBeInTheDocument();
+  });
+
+  test('card does not render the hidden input when hasSelectableInput is not passed', () => {
+    render(<Card isSelectable />);
+
+    const selectableInput = screen.queryByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).not.toBeInTheDocument();
+  });
+
+  test('card warns when hasSelectableInput is passed without selectableInputAriaLabel or a card title', () => {
+    const consoleWarnMock = jest.fn();
+    global.console = { warn: consoleWarnMock } as any;
+
+    render(<Card isSelectable hasSelectableInput />);
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(consoleWarnMock).toBeCalled();
+    expect(selectableInput).toHaveAccessibleName('');
+  });
+
+  test('card applies selectableInputAriaLabel to the hidden input', () => {
+    render(<Card isSelectable hasSelectableInput selectableInputAriaLabel="Input label test" />);
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Input label test');
+  });
+
+  test('card applies the supplied card title as the aria label of the hidden input', () => {
+
+    // this component is used to mock the CardTitle's title registry behavior to keep this a pure unit test
+    const MockCardTitle = ({ children }) => {
+      const { registerTitleId } = React.useContext(CardContext);
+      const id = 'card-title-id';
+
+      React.useEffect(() => {
+        registerTitleId(id);
+      });
+
+      return <div id={id}>{children}</div>;
+    };
+
+    render(
+      <Card id="card" isSelectable hasSelectableInput>
+        <MockCardTitle>Card title from title component</MockCardTitle>
+      </Card>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Card title from title component');
+  });
+
+  test('card prioritizes selectableInputAriaLabel over card title labelling via card title', () => {
+
+    // this component is used to mock the CardTitle's title registry behavior to keep this a pure unit test
+    const MockCardTitle = ({ children }) => {
+      const { registerTitleId } = React.useContext(CardContext);
+      const id = 'card-title-id';
+
+      React.useEffect(() => {
+        registerTitleId(id);
+      });
+
+      return <div id={id}>{children}</div>;
+    };
+
+    render(
+      <Card id="card" isSelectable hasSelectableInput selectableInputAriaLabel="Input label test">
+        <MockCardTitle>Card title from title component</MockCardTitle>
+      </Card>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Input label test');
+  });
 });

package/src/components/Card/__tests__/CardTitle.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardTitle } from '../CardTitle';
+import { CardContext } from '../Card';
 
 describe('CardTitle', () => {
   test('renders with PatternFly Core styles', () => {
@@ -19,4 +20,16 @@ describe('CardTitle', () => {
     render(<CardTitle data-testid={testId} />);
     expect(screen.getByTestId(testId)).toBeInTheDocument();
   });
+
+  test('calls the registerTitleId function provided by the CardContext with the generated title id', () => {
+    const mockRegisterTitleId = jest.fn();
+
+    render(
+      <CardContext.Provider value={{ cardId: 'card', registerTitleId: mockRegisterTitleId }}>
+        <CardTitle>text</CardTitle>
+      </CardContext.Provider>
+    );
+
+    expect(mockRegisterTitleId).toHaveBeenCalledWith('card-title');
+  });
 });

package/src/components/Card/examples/Card.md

@@ -71,6 +71,23 @@ import pfLogoSmall from './pf-logo-small.svg';
 ```ts file='./CardSelectable.tsx'
 ```
 
+### Selectable accessibility highlight
+
+This example demonstrates how the `hasSelectableInput` and `onSelectableInputChange` props improve accessibility for selectable cards.
+
+The first card sets `hasSelectableInput` to true, which renders a checkbox input that is only visible to, and navigable by, screen readers. This input communicates to assistive technology users that a card is selectable, and if so, it communicates the current selection state as well.
+
+By default this input will have an aria-label that corresponds to the title given to the card if using the card title component. If you don't use the card title component in your selectable card, you must pass a custom aria-label for this input using the `selectableInputAriaLabel` prop.
+
+The first card also (by passing an onchange callback to `onSelectableInputChange`) enables the selection/deselection of the associated card by checking/unchecking the checkbox input.
+
+The second card does not set `hasSelectableInput` to true, so the input is not rendered. It does not communicate to screen reader users that it is selectable or if it is currently selected.
+
+To best understand this example it is encouraged that you navigate both of these cards using a screen reader.
+
+```ts file='./CardSelectableA11yHighlight.tsx'
+```
+
 ### With heading element
 
 ```ts file='./CardWithHeadingElement.tsx'

package/src/components/Card/examples/CardLegacySelectable.tsx

@@ -31,6 +31,11 @@ export const CardLegacySelectable: 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: any) => {
     event.stopPropagation();
     setIsKebabOpen(isOpen);
@@ -65,8 +70,10 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
         id="legacy-first-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
+        onSelectableInputChange={onChange}
         isSelectable
         isSelected={selected === 'legacy-first-card'}
+        hasSelectableInput
       >
         <CardHeader>
           <CardActions>
@@ -80,7 +87,7 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
             />
           </CardActions>
         </CardHeader>
-        <CardTitle>First card</CardTitle>
+        <CardTitle>First legacy selectable card</CardTitle>
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>
       <br />
@@ -88,10 +95,12 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
         id="legacy-second-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
+        onSelectableInputChange={onChange}
         isSelectable
         isSelected={selected === 'legacy-second-card'}
+        hasSelectableInput
       >
-        <CardTitle>Second card</CardTitle>
+        <CardTitle>Second legacy selectable card</CardTitle>
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>
     </>

package/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}
+        hasSelectableInput
+        onSelectableInputChange={onChange}
         isSelectableRaised
         isSelected={selected === 'selectable-first-card'}
       >
@@ -91,6 +98,8 @@ export const CardSelectable: React.FunctionComponent = () => {
         id="selectable-second-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
+        hasSelectableInput
+        onSelectableInputChange={onChange}
         isSelectableRaised
         isSelected={selected === 'selectable-second-card'}
       >
@@ -98,7 +107,7 @@ export const CardSelectable: React.FunctionComponent = () => {
         <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 hasSelectableInput>
         <CardTitle>Third card</CardTitle>
         <CardBody>This is a raised but disabled card.</CardBody>
       </Card>

package/src/components/Card/examples/CardSelectableA11yHighlight.tsx

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

package/src/demos/Card/Card.md

@@ -197,7 +197,7 @@ class CardViewBasic extends React.Component {
         });
       }
     };
-    
+
     this.onKeyDown = (event, productId) => {
       console.log(productId);
       if (event.target !== event.currentTarget) {
@@ -206,28 +206,30 @@ class CardViewBasic extends React.Component {
       if ([' ', 'Enter'].includes(event.key)) {
         event.preventDefault();
         this.setState(prevState => {
-          return prevState.selectedItems.includes(productId*1) ? 
-          {
-            selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
-            areAllSelected: false
-          } : {
-            selectedItems: [...prevState.selectedItems, productId * 1],
-            areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
-          };
+          return prevState.selectedItems.includes(productId * 1)
+            ? {
+                selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
+                areAllSelected: false
+              }
+            : {
+                selectedItems: [...prevState.selectedItems, productId * 1],
+                areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
+              };
         });
       }
     };
-    
+
     this.onClick = productId => {
       this.setState(prevState => {
-        return prevState.selectedItems.includes(productId*1) ? 
-        {
-          selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
-          areAllSelected: false
-        } : {
-          selectedItems: [...prevState.selectedItems, productId * 1],
-          areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
-        };
+        return prevState.selectedItems.includes(productId * 1)
+          ? {
+              selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
+              areAllSelected: false
+            }
+          : {
+              selectedItems: [...prevState.selectedItems, productId * 1],
+              areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
+            };
       });
     };
   }
@@ -559,12 +561,8 @@ class CardViewBasic extends React.Component {
             </Toolbar>
           </PageSection>
           <PageSection isFilled>
-            <Gallery hasGutter>
-              <Card 
-                isSelectable 
-                selectableVariant="raised" 
-                isCompact
-              >
+            <Gallery hasGutter aria-label="Selectable card container">
+              <Card isSelectableRaised isCompact>
                 <Bullseye>
                   <EmptyState variant={EmptyStateVariant.xs}>
                     <EmptyStateIcon icon={PlusCircleIcon} />
@@ -578,13 +576,15 @@ class CardViewBasic extends React.Component {
                 </Bullseye>
               </Card>
               {filtered.map((product, key) => (
-                <Card 
-                  isSelectable 
-                  selectableVariant="raised" 
-                  isCompact 
+                <Card
+                  isSelectableRaised
+                  hasSelectableInput
+                  isCompact
                   key={product.name}
-                  onKeyDown={(e) => this.onKeyDown(e, product.id)}
+                  id={product.name.replace(/ /g, '-')}
+                  onKeyDown={e => this.onKeyDown(e, product.id)}
                   onClick={() => this.onClick(product.id)}
+                  onSelectableInputChange={() => this.onClick(product.id)}
                   isSelected={selectedItems.includes(product.id)}
                 >
                   <CardHeader>

package/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 });
     };
@@ -1262,7 +1274,7 @@ class PrimaryDetailCardView extends React.Component {
     };
 
     const drawerContent = (
-      <Gallery hasGutter>
+      <Gallery hasGutter aria-label="Selectable card container">
         {filtered.map((product, key) => (
           <React.Fragment>
             <Card
@@ -1271,8 +1283,10 @@ class PrimaryDetailCardView extends React.Component {
               id={'card-view-' + key}
               onKeyDown={this.onKeyDown}
               onClick={this.onCardClick}
+              onSelectableInputChange={this.onChange}
               isSelectable
-              isSelected={activeCard === key}
+              isSelected={activeCard === 'card-view-' + key}
+              hasSelectableInput
             >
               <CardHeader>
                 <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -89,14 +89,17 @@ export const ModalTabs: React.FunctionComponent = () => {
           </TextContent>
         </PageSection>
         <PageSection isFilled>
-          <Gallery hasGutter>
+          <Gallery hasGutter aria-label="Selectable card container">
             {products.map(product => (
               <Card
                 isSelectable
                 isSelectableRaised
+                hasSelectableInput
                 isCompact
                 key={product.id}
+                id={product.name.replace(/ /g, '-')}
                 onClick={onCardClick(product)}
+                onSelectableInputChange={() => onCardClick(product)()}
                 onKeyPress={onCardKeyPress(product)}
               >
                 <CardTitle>{product.name}</CardTitle>