@patternfly/react-core 5.0.0-alpha.2 → 5.0.0-alpha.20

package/src/components/Select/examples/Select.md

@@ -31,6 +31,8 @@ class SingleSelectInput extends React.Component {
       <SelectOption key={7} value="Other" />
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isToggleIcon: false,
       isOpen: false,
@@ -39,7 +41,7 @@ class SingleSelectInput extends React.Component {
       direction: SelectDirection.down
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -53,6 +55,7 @@ class SingleSelectInput extends React.Component {
           isOpen: false
         });
         console.log('selected:', selection);
+        this.toggleRef.current.focus();
       }
     };
 
@@ -97,6 +100,7 @@ class SingleSelectInput extends React.Component {
           Title
         </span>
         <Select
+          toggleRef={this.toggleRef}
           toggleIcon={isToggleIcon && <CubeIcon />}
           variant={SelectVariant.single}
           aria-label="Select Input"
@@ -113,7 +117,7 @@ class SingleSelectInput extends React.Component {
         <Checkbox
           label="isDisabled"
           isChecked={this.state.isDisabled}
-          onChange={this.toggleDisabled}
+          onChange={(_event, checked) => this.toggleDisabled(checked)} 
           aria-label="disabled checkbox"
           id="toggle-disabled"
           name="toggle-disabled"
@@ -129,7 +133,7 @@ class SingleSelectInput extends React.Component {
         <Checkbox
           label="Show icon"
           isChecked={isToggleIcon}
-          onChange={this.setIcon}
+          onChange={(_event, checked) => this.setIcon(checked)} 
           aria-label="show icon checkbox"
           id="toggle-icon"
           name="toggle-icon"
@@ -158,13 +162,15 @@ class SingleSelectDescription extends React.Component {
       { value: 'Other', disabled: false }
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isOpen: false,
       selected: null,
       isDisabled: false
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -178,6 +184,7 @@ class SingleSelectDescription extends React.Component {
           isOpen: false
         });
         console.log('selected:', selection);
+        this.toggleRef.current.focus();
       }
     };
 
@@ -202,6 +209,7 @@ class SingleSelectDescription extends React.Component {
           placeholderText="Select an option"
           aria-label="Select Input with descriptions"
           onToggle={this.onToggle}
+          toggleRef={this.toggleRef}
           onSelect={this.onSelect}
           selections={selected}
           isOpen={isOpen}
@@ -238,7 +246,9 @@ class GroupedSingleSelectInput extends React.Component {
       selected: null
     };
 
-    this.onToggle = isOpen => {
+    this.toggleRef = React.createRef();
+
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -249,6 +259,7 @@ class GroupedSingleSelectInput extends React.Component {
         selected: selection,
         isOpen: false
       });
+      this.toggleRef.current.focus();
     };
 
     this.clearSelection = () => {
@@ -284,6 +295,7 @@ class GroupedSingleSelectInput extends React.Component {
         </span>
         <Select
           variant={SelectVariant.single}
+          toggleRef={this.toggleRef}
           onToggle={this.onToggle}
           onSelect={this.onSelect}
           selections={selected}
@@ -319,6 +331,8 @@ class ValidatedSelect extends React.Component {
       <SelectOption key={6} value="Other" />
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isOpen: false,
       selected: null,
@@ -326,7 +340,7 @@ class ValidatedSelect extends React.Component {
       validated: 'default'
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -352,6 +366,7 @@ class ValidatedSelect extends React.Component {
       this.setState({
         validated: validatedState
       });
+      this.toggleRef.current.focus();
     };
 
     this.clearSelection = () => {
@@ -372,6 +387,7 @@ class ValidatedSelect extends React.Component {
         </span>
         <Select
           variant={SelectVariant.single}
+          toggleRef={this.toggleRef}
           placeholderText="Select an option"
           aria-label="Select Input with validation"
           onToggle={this.onToggle}
@@ -410,7 +426,7 @@ class CheckboxSelectInput extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -488,7 +504,7 @@ class CheckboxSelectWithCounts extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -565,7 +581,7 @@ class CheckboxSelectInputNoBadge extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -641,7 +657,7 @@ class GroupedCheckboxSelectInput extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -728,6 +744,8 @@ class FilteringSingleSelectInput extends React.Component {
       isInputFilterPersisted: false
     };
 
+    this.toggleRef = React.createRef();
+
     this.options = [
       <SelectGroup label="Status" key="group1">
         <SelectOption key={0} value="Running" />
@@ -743,12 +761,13 @@ class FilteringSingleSelectInput extends React.Component {
       </SelectGroup>
     ];
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({ isOpen });
     };
 
     this.onSelect = (event, selection) => {
       this.setState({ selected: selection, isOpen: false }), console.log('selected: ', selection);
+      this.toggleRef.current.focus();
     };
 
     this.onFilter = (_, textInput) => {
@@ -805,6 +824,7 @@ class FilteringSingleSelectInput extends React.Component {
         </span>
         <Select
           variant={SelectVariant.single}
+          toggleRef={this.toggleRef}
           onToggle={this.onToggle}
           onSelect={this.onSelect}
           selections={selected}
@@ -823,7 +843,7 @@ class FilteringSingleSelectInput extends React.Component {
         <Checkbox
           label="isInputValuePersisted"
           isChecked={isInputValuePersisted}
-          onChange={this.toggleInputValuePersisted}
+          onChange={(_event, checked) => this.toggleInputValuePersisted(checked)} 
           aria-label="toggle input value persisted"
           id="toggle-inline-filter-input-value-persisted"
           name="toggle-inline-filter-input-value-persisted"
@@ -831,7 +851,7 @@ class FilteringSingleSelectInput extends React.Component {
         <Checkbox
           label="isInputFilterPersisted"
           isChecked={isInputFilterPersisted}
-          onChange={this.toggleInputFilterPersisted}
+          onChange={(_event, checked) => this.toggleInputFilterPersisted(checked)} 
           aria-label="toggle input filter persisted"
           id="toggle-inline-filter-input-filter-persisted"
           name="toggle-inline-filter-input-filter-persisted"
@@ -839,7 +859,7 @@ class FilteringSingleSelectInput extends React.Component {
         <Checkbox
           label="isCreatable"
           isChecked={this.state.isCreatable}
-          onChange={this.toggleCreatable}
+          onChange={(_event, checked) => this.toggleCreatable(checked)} 
           aria-label="toggle creatable checkbox"
           id="toggle-inline-filter-creatable-typeahead"
           name="toggle-inline-filter-creatable-typeahead"
@@ -880,7 +900,7 @@ class FilteringCheckboxSelectInput extends React.Component {
       </SelectGroup>
     ];
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -985,7 +1005,7 @@ class FilteringCheckboxSelectInputWithPlaceholder extends React.Component {
       </SelectGroup>
     ];
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1092,7 +1112,7 @@ class FilteringCheckboxSelectInputWithBadging extends React.Component {
       </SelectGroup>
     ];
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1216,7 +1236,7 @@ class TypeaheadSelectInput extends React.Component {
       resetOnSelect: true
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1339,7 +1359,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isDisabled"
           isChecked={this.state.isDisabled}
-          onChange={this.toggleDisabled}
+          onChange={(_event, checked) => this.toggleDisabled(checked)} 
           aria-label="toggle disabled checkbox"
           id="toggle-disabled-typeahead"
           name="toggle-disabled-typeahead"
@@ -1347,7 +1367,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isCreatable"
           isChecked={this.state.isCreatable}
-          onChange={this.toggleCreatable}
+          onChange={(_event, checked) => this.toggleCreatable(checked)} 
           aria-label="toggle creatable checkbox"
           id="toggle-creatable-typeahead"
           name="toggle-creatable-typeahead"
@@ -1355,7 +1375,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isCreateOptionOnTop"
           isChecked={this.state.isCreateOptionOnTop}
-          onChange={this.toggleCreateOptionOnTop}
+          onChange={(_event, checked) => this.toggleCreateOptionOnTop(checked)} 
           aria-label="toggle createOptionOnTop checkbox"
           id="toggle-create-option-on-top-typeahead"
           name="toggle-create-option-on-top-typeahead"
@@ -1363,7 +1383,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="onCreateOption"
           isChecked={this.state.hasOnCreateOption}
-          onChange={this.toggleCreateNew}
+          onChange={(_event, checked) => this.toggleCreateNew(checked)} 
           aria-label="toggle new checkbox"
           id="toggle-new-typeahead"
           name="toggle-new-typeahead"
@@ -1371,7 +1391,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isInputValuePersisted"
           isChecked={isInputValuePersisted}
-          onChange={this.toggleInputValuePersisted}
+          onChange={(_event, checked) => this.toggleInputValuePersisted(checked)} 
           aria-label="toggle input value persisted"
           id="toggle-input-value-persisted"
           name="toggle-input-value-persisted"
@@ -1379,7 +1399,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isInputFilterPersisted"
           isChecked={isInputFilterPersisted}
-          onChange={this.toggleInputFilterPersisted}
+          onChange={(_event, checked) => this.toggleInputFilterPersisted(checked)} 
           aria-label="toggle input filter persisted"
           id="toggle-input-filter-persisted"
           name="toggle-input-filter-persisted"
@@ -1387,7 +1407,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="shouldResetOnSelect"
           isChecked={this.state.resetOnSelect}
-          onChange={this.toggleResetOnSelect}
+          onChange={(_event, checked) => this.toggleResetOnSelect(checked)} 
           aria-label="toggle reset checkbox"
           id="toggle-reset-typeahead"
           name="toggle-reset-typeahead"
@@ -1431,7 +1451,7 @@ class GroupedTypeaheadSelectInput extends React.Component {
       hasOnCreateOption: false
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1509,7 +1529,7 @@ class GroupedTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isCreatable"
           isChecked={this.state.isCreatable}
-          onChange={this.toggleCreatable}
+          onChange={(_event, checked) => this.toggleCreatable(checked)} 
           aria-label="toggle creatable checkbox"
           id="toggle-creatable-grouped-typeahead"
           name="toggle-creatable-grouped-typeahead"
@@ -1517,7 +1537,7 @@ class GroupedTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="onCreateOption"
           isChecked={this.state.hasOnCreateOption}
-          onChange={this.toggleCreateNew}
+          onChange={(_event, checked) => this.toggleCreateNew(checked)} 
           aria-label="toggle new checkbox"
           id="toggle-new-grouped-typeahead"
           name="toggle-new-grouped-typeahead"
@@ -1550,7 +1570,7 @@ class TypeaheadSelectInput extends React.Component {
       selected: null
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1645,7 +1665,7 @@ class MultiTypeaheadSelectInput extends React.Component {
       });
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1736,7 +1756,7 @@ class MultiTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isCreatable"
           isChecked={this.state.isCreatable}
-          onChange={this.toggleCreatable}
+          onChange={(_event, checked) => this.toggleCreatable(checked)} 
           aria-label="toggle creatable checkbox"
           id="toggle-creatable-typeahead-multi"
           name="toggle-creatable-typeahead-multi"
@@ -1744,7 +1764,7 @@ class MultiTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="onCreateOption"
           isChecked={this.state.hasOnCreateOption}
-          onChange={this.toggleCreateNew}
+          onChange={(_event, checked) => this.toggleCreateNew(checked)} 
           aria-label="toggle new checkbox"
           id="toggle-new-typeahead-multi"
           name="toggle-new-typeahead-multi"
@@ -1760,7 +1780,7 @@ class MultiTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="shouldResetOnSelect"
           isChecked={this.state.resetOnSelect}
-          onChange={this.toggleResetOnSelect}
+          onChange={(_event, checked) => this.toggleResetOnSelect(checked)} 
           aria-label="toggle multi reset checkbox"
           id="toggle-reset-multi-typeahead"
           name="toggle-reset-multi-typeahead"
@@ -1794,7 +1814,7 @@ class MultiTypeaheadSelectInputWithChipGroupProps extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -1882,7 +1902,7 @@ class MultiTypeaheadSelectInputWithChipGroupProps extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2004,7 +2024,7 @@ class MultiTypeaheadSelectInputCustomObjects extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2086,7 +2106,7 @@ class PlainSelectInput extends React.Component {
       selected: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2162,7 +2182,7 @@ class SingleSelectInput extends React.Component {
       direction: SelectDirection.down
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2208,7 +2228,7 @@ class SingleSelectInput extends React.Component {
         <Checkbox
           label="isDisabled"
           isChecked={this.state.isDisabled}
-          onChange={this.toggleDisabled}
+          onChange={(_event, checked) => this.toggleDisabled(checked)} 
           aria-label="disabled checkbox panel"
           id="toggle-disabled-panel"
           name="toggle-disabled-panel"
@@ -2271,13 +2291,13 @@ class SelectDocumentBodyVsParent extends React.Component {
       parentSelected: null
     };
 
-    this.onBodyToggle = isBodyOpen => {
+    this.onBodyToggle = (_event, isBodyOpen) => {
       this.setState({
         isBodyOpen
       });
     };
 
-    this.onParentToggle = isParentOpen => {
+    this.onParentToggle = (_event, isParentOpen) => {
       this.setState({
         isParentOpen
       });
@@ -2363,7 +2383,7 @@ class FavoritesSelect extends React.Component {
       favorites: []
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2460,6 +2480,8 @@ class SelectWithFooter extends React.Component {
       <SelectOption key={7} value="Other" />
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isToggleIcon: false,
       isOpen: false,
@@ -2468,7 +2490,7 @@ class SelectWithFooter extends React.Component {
       direction: SelectDirection.down
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2482,6 +2504,7 @@ class SelectWithFooter extends React.Component {
           isOpen: false
         });
         console.log('selected:', selection);
+        this.toggleRef.current.focus();
       }
     };
 
@@ -2503,6 +2526,7 @@ class SelectWithFooter extends React.Component {
         </span>
         <Select
           toggleIcon={isToggleIcon && <CubeIcon />}
+          toggleRef={this.toggleRef}
           variant={SelectVariant.single}
           aria-label="Select Input"
           onToggle={this.onToggle}
@@ -2552,7 +2576,7 @@ class SelectWithFooterCheckbox extends React.Component {
       <SelectOption key={5} value="Restarted" />
     ];
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2630,6 +2654,8 @@ class SelectViewMore extends React.Component {
       <SelectOption key={6} value="Other" />
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isOpen: false,
       selected: null,
@@ -2637,7 +2663,7 @@ class SelectViewMore extends React.Component {
       isLoading: false
     };
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2651,6 +2677,7 @@ class SelectViewMore extends React.Component {
           isOpen: false
         });
         console.log('selected:', selection);
+        this.toggleRef.current.focus();
       }
     };
 
@@ -2686,6 +2713,7 @@ class SelectViewMore extends React.Component {
         </span>
         <Select
           variant={SelectVariant.single}
+          toggleRef={this.toggleRef}
           aria-label="Select Input"
           onToggle={this.onToggle}
           onSelect={this.onSelect}
@@ -2735,7 +2763,7 @@ class SelectViewMoreCheckbox extends React.Component {
       <SelectOption key={9} value="Degraded " />
     ];
 
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -2824,7 +2852,7 @@ function SelectWithPlaceholderStyle() {
     <SelectOption key={2} value="Paused" />
   ];
 
-  const onToggle = isOpen => setIsOpen(isOpen);
+  const onToggle = (_event, isOpen) => setIsOpen(isOpen);
 
   const onSelect = (event, selection, isPlaceholder) => {
     setSelected(selection);
@@ -2879,7 +2907,7 @@ function SelectWithPlaceholderStyle() {
     <SelectOption key={3} value="Paused" />
   ];
 
-  const onToggle = isOpen => setIsOpen(isOpen);
+  const onToggle = (_event, isOpen) => setIsOpen(isOpen);
 
   const onSelect = (event, selection, isPlaceholder) => {
     setSelected(selection);

package/src/components/SimpleList/SimpleList.tsx

@@ -16,6 +16,8 @@ export interface SimpleListProps extends Omit<React.HTMLProps<HTMLDivElement>, '
   ) => void;
   /** Indicates whether component is controlled by its internal state */
   isControlled?: boolean;
+  /** aria-label for the <ul> element that wraps the SimpleList items. */
+  'aria-label'?: string;
 }
 
 export interface SimpleListState {
@@ -57,7 +59,7 @@ export class SimpleList extends React.Component<SimpleListProps, SimpleListState
 
   render() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, className, onSelect, isControlled, ...props } = this.props;
+    const { children, className, onSelect, isControlled, 'aria-label': ariaLabel, ...props } = this.props;
 
     let isGrouped = false;
     if (children) {
@@ -74,7 +76,7 @@ export class SimpleList extends React.Component<SimpleListProps, SimpleListState
       >
         <div className={css(styles.simpleList, className)} {...props}>
           {isGrouped && children}
-          {!isGrouped && <ul>{children}</ul>}
+          {!isGrouped && <ul aria-label={ariaLabel}>{children}</ul>}
         </div>
       </SimpleListContext.Provider>
     );

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

@@ -31,6 +31,11 @@ describe('SimpleList', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('renders aria-labelled content', () => {
+    const { asFragment } = render(<SimpleList aria-label="This is a simple list">{items}</SimpleList>);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('renders grouped content', () => {
     const { asFragment } = render(
       <SimpleList>

package/src/components/SimpleList/__tests__/__snapshots__/SimpleList.test.tsx.snap

@@ -1,5 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SimpleList renders aria-labelled content 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-simple-list"
+  >
+    <ul
+      aria-label="This is a simple list"
+    >
+      <li
+        class=""
+      >
+        <button
+          class="pf-c-simple-list__item-link"
+          type="button"
+        >
+          Item 1
+        </button>
+      </li>
+      <li
+        class=""
+      >
+        <button
+          class="pf-c-simple-list__item-link"
+          type="button"
+        >
+          Item 2
+        </button>
+      </li>
+      <li
+        class=""
+      >
+        <button
+          class="pf-c-simple-list__item-link"
+          type="button"
+        >
+          Item 3
+        </button>
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`SimpleList renders content 1`] = `
 <DocumentFragment>
   <div