@patternfly/react-core 4.221.1 → 4.221.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.221.1",
+  "version": "4.221.2",
   "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.72.1",
-    "@patternfly/react-styles": "^4.71.1",
-    "@patternfly/react-tokens": "^4.73.1",
+    "@patternfly/react-icons": "^4.72.2",
+    "@patternfly/react-styles": "^4.71.2",
+    "@patternfly/react-tokens": "^4.73.2",
     "focus-trap": "6.9.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": "185f5001db15c2ef7690bb60e9876dfbd758c4d9"
+  "gitHead": "eeeefa74fca5d5c4739cc6113028a2cca51f0fb7"
 }

package/src/components/DataList/DataList.tsx

@@ -20,6 +20,13 @@ export enum DataListWrapModifier {
   breakWord = 'breakWord'
 }
 
+export interface SelectableRowObject {
+  /** Determines if only one of the selectable rows should be selectable at a time */
+  type: 'multiple' | 'single';
+  /** Callback that executes when the screen reader accessible element receives a change event */
+  onChange: (id: string, event: React.FormEvent<HTMLInputElement>) => void;
+}
+
 export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, 'onDragStart' | 'ref'> {
   /** Content rendered inside the DataList list */
   children?: React.ReactNode;
@@ -47,6 +54,8 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
   wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';
   /** @deprecated Order of items in a draggable DataList */
   itemOrder?: string[];
+  /** @beta Object that causes the data list to render hidden inputs which improve selectable item a11y */
+  selectableRow?: SelectableRowObject;
 }
 
 interface DataListState {
@@ -60,6 +69,7 @@ interface DataListContextProps {
   isSelectable: boolean;
   selectedDataListItemId: string;
   updateSelectedDataListItem: (id: string) => void;
+  selectableRow?: SelectableRowObject;
   isDraggable: boolean;
   dragStart: (e: React.DragEvent) => void;
   dragEnd: (e: React.DragEvent) => void;
@@ -308,6 +318,7 @@ export class DataList extends React.Component<DataListProps, DataListState> {
       onDragFinish,
       gridBreakpoint,
       itemOrder,
+      selectableRow,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
@@ -330,6 +341,7 @@ export class DataList extends React.Component<DataListProps, DataListState> {
           isSelectable,
           selectedDataListItemId,
           updateSelectedDataListItem,
+          selectableRow,
           isDraggable: this.html5DragDrop,
           dragStart: this.dragStart,
           dragEnd: this.dragEnd,

package/src/components/DataList/DataListItem.tsx

@@ -16,6 +16,8 @@ export interface DataListItemProps extends Omit<React.HTMLProps<HTMLLIElement>,
   'aria-labelledby': string;
   /** Unique id for the DataList item */
   id?: string;
+  /** @beta Aria label to apply to the selectable input if one is rendered */
+  selectableInputAriaLabel?: string;
 }
 
 export interface DataListItemChildProps {
@@ -52,13 +54,22 @@ export class DataListItem extends React.Component<DataListItemProps> {
     'aria-labelledby': ''
   };
   render() {
-    const { children, isExpanded, className, id, 'aria-labelledby': ariaLabelledBy, ...props } = this.props;
+    const {
+      children,
+      isExpanded,
+      className,
+      id,
+      'aria-labelledby': ariaLabelledBy,
+      selectableInputAriaLabel,
+      ...props
+    } = this.props;
     return (
       <DataListContext.Consumer>
         {({
           isSelectable,
           selectedDataListItemId,
           updateSelectedDataListItem,
+          selectableRow,
           isDraggable,
           dragStart,
           dragEnd,
@@ -98,6 +109,14 @@ export class DataListItem extends React.Component<DataListItemProps> {
             onDragStart: dragStart
           };
 
+          const isSelected = selectedDataListItemId === id;
+
+          const selectableInputAriaProps = selectableInputAriaLabel
+            ? { 'aria-label': selectableInputAriaLabel }
+            : { 'aria-labelledby': ariaLabelledBy };
+
+          const selectableInputType = selectableRow?.type === 'multiple' ? 'checkbox' : 'radio';
+
           return (
             <li
               id={id}
@@ -105,15 +124,25 @@ export class DataListItem extends React.Component<DataListItemProps> {
                 styles.dataListItem,
                 isExpanded && styles.modifiers.expanded,
                 isSelectable && styles.modifiers.selectable,
-                selectedDataListItemId && selectedDataListItemId === id && styles.modifiers.selected,
+                selectedDataListItemId && isSelected && styles.modifiers.selected,
                 className
               )}
               aria-labelledby={ariaLabelledBy}
               {...(isSelectable && { tabIndex: 0, onClick: selectDataListItem, onKeyDown })}
-              {...(isSelectable && selectedDataListItemId === id && { 'aria-selected': true })}
+              {...(isSelectable && isSelected && { 'aria-selected': true })}
               {...props}
               {...dragProps}
             >
+              {selectableRow && (
+                <input
+                  className="pf-screen-reader"
+                  type={selectableInputType}
+                  checked={isSelected}
+                  onChange={event => selectableRow.onChange(id, event)}
+                  tabIndex={-1}
+                  {...selectableInputAriaProps}
+                />
+              )}
               {React.Children.map(
                 children,
                 child =>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { DataList } from '../DataList';
 import { DataListItem } from '../DataListItem';
@@ -47,6 +48,135 @@ describe('DataList', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('List renders with a hidden input to improve a11y when selectableRow is passed', () => {
+    render(
+      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+        <DataListItem>
+          <DataListItemRow aria-labelledby="test-id">
+            <p id="test-id">Test</p>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toBeInTheDocument();
+  });
+
+  test('List does not render with a hidden input to improve a11y when selectableRow is not passed', () => {
+    render(
+      <DataList aria-label="this is a simple list">
+        <DataListItem>
+          <DataListItemRow aria-labelledby="test-id">
+            <p id="test-id">Test</p>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    );
+
+    const selectableInput = screen.queryByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).not.toBeInTheDocument();
+  });
+
+  test('List hidden input renders as a radio when selectableRow.type is radio', () => {
+    render(
+      <DataList aria-label="this is a simple list" selectableRow={{ type: 'single', onChange: () => {} }}>
+        <DataListItem>
+          <DataListItemRow aria-labelledby="test-id">
+            <p id="test-id">Test</p>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    );
+
+    const selectableRadioInput = screen.getByRole('radio', { hidden: true });
+    const selectableCheckboxInput = screen.queryByRole('checkbox', { hidden: true });
+
+    expect(selectableRadioInput).toBeInTheDocument();
+    expect(selectableCheckboxInput).not.toBeInTheDocument();
+  });
+
+  test('List calls selectableRow.onChange when the selectable input changes', () => {
+    const mock = jest.fn();
+
+    render(
+      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: mock }}>
+        <DataListItem>
+          <DataListItemRow aria-labelledby="test-id">
+            <p id="test-id">Test</p>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+    userEvent.click(selectableInput);
+
+    expect(mock).toHaveBeenCalled();
+  });
+
+  test('List does not call selectableRow.onChange when the selectable input is not changed', () => {
+    const mock = jest.fn();
+
+    render(
+      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: mock }}>
+        <DataListItem>
+          <DataListItemRow aria-labelledby="test-id">
+            <p id="test-id">Test</p>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    );
+
+    expect(mock).not.toHaveBeenCalled();
+  });
+
+  test('Item applies selectableInputAriaLabel to the hidden input', () => {
+    render(
+      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+        <DataListItem selectableInputAriaLabel="Data list item label test">
+          <DataListItemRow aria-labelledby="test-id">
+            <p id="test-id">Test</p>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Data list item label test');
+  });
+
+  test('Item defaults to labelling its input using its aria-labelledby prop', () => {
+    render(
+      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+        <DataListItem aria-labelledby="test-id">
+          <p id="test-id">Test cell content</p>
+        </DataListItem>
+      </DataList>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Test cell content');
+  });
+
+  test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () => {
+    render(
+      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+        <DataListItem aria-labelledby="test-id" selectableInputAriaLabel="Data list item label test">
+          <p id="test-id">Test cell content</p>
+        </DataListItem>
+      </DataList>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Data list item label test');
+  });
+
   test('Item default', () => {
     const { asFragment } = render(
       <DataListItem key="item-id-1" aria-labelledby="item-1">

package/src/components/DataList/examples/DataList.md

@@ -5,6 +5,7 @@ cssPrefix: pf-c-data-list
 propComponents:
   [
     'DataList',
+    'SelectableRowObject',
     'DataListAction',
     'DataListCell',
     'DataListCheck',

package/src/components/DataList/examples/DataListSelectableRows.tsx

@@ -37,12 +37,17 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
     setSelectedDataListItemId(id);
   };
 
+  const handleInputChange = (id: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setSelectedDataListItemId(id);
+  };
+
   return (
     <React.Fragment>
       <DataList
         aria-label="selectable data list example"
         selectedDataListItemId={selectedDataListItemId}
         onSelectDataListItem={onSelectDataListItem}
+        selectableRow={{ type: 'single', onChange: handleInputChange }}
       >
         <DataListItem aria-labelledby="selectable-action-item1" id="item1">
           <DataListItemRow>

package/src/components/Select/Select.tsx

@@ -103,6 +103,8 @@ export interface SelectProps
   'aria-invalid'?: boolean;
   /** Label for input field of type ahead select variants */
   typeAheadAriaLabel?: string;
+  /** Id of div for input field of type ahead select variants */
+  typeAheadAriaDescribedby?: string;
   /** Label for clear selection button of type ahead select variants */
   clearSelectionsAriaLabel?: string;
   /** Label for toggle of type ahead select variants */
@@ -222,6 +224,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     'aria-describedby': '',
     'aria-invalid': false,
     typeAheadAriaLabel: '',
+    typeAheadAriaDescribedby: '',
     clearSelectionsAriaLabel: 'Clear all',
     toggleAriaLabel: 'Options menu',
     removeSelectionAriaLabel: 'Remove',
@@ -943,6 +946,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       validated,
       selections: selectionsProp,
       typeAheadAriaLabel,
+      typeAheadAriaDescribedby,
       clearSelectionsAriaLabel,
       toggleAriaLabel,
       removeSelectionAriaLabel,
@@ -1247,7 +1251,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           className
         )}
         {...(width && { style: { width } })}
-        {...(validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby })}
+        {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}
         {...(validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })}
       >
         {isOpen && menuContainer}
@@ -1268,7 +1272,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         ref={this.parentRef}
         {...getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
         {...(width && { style: { width } })}
-        {...(validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby })}
+        {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}
         {...(validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })}
       >
         <SelectToggle
@@ -1337,6 +1341,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                   aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
                   id={`${selectToggleId}-select-typeahead`}
                   aria-label={typeAheadAriaLabel}
+                  {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
                   placeholder={placeholderText as string}
                   value={
                     typeaheadInputValue !== null
@@ -1365,6 +1370,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                   id={`${selectToggleId}-select-multi-typeahead-typeahead`}
                   aria-label={typeAheadAriaLabel}
                   aria-invalid={validated === ValidatedOptions.error}
+                  {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
                   placeholder={placeholderText as string}
                   value={typeaheadInputValue !== null ? typeaheadInputValue : ''}
                   type="text"

package/src/demos/PrimaryDetail.md

@@ -1274,7 +1274,7 @@ class PrimaryDetailCardView extends React.Component {
     };
 
     const drawerContent = (
-      <Gallery hasGutter aria-label="Selectable card container">
+      <Gallery hasGutter role='region' aria-label="Selectable card container">
         {filtered.map((product, key) => (
           <React.Fragment>
             <Card