@patternfly/react-core 4.224.9 → 4.224.12

package/src/components/DualListSelector/DualListSelectorList.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { DualListSelectorListContext } from './DualListSelectorContext';
 
 export interface DualListSelectorListProps extends React.HTMLProps<HTMLUListElement> {
+  /** Content rendered inside the dual list selector list */
   children?: React.ReactNode;
 }
 
@@ -31,13 +32,18 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
     onOptionSelect(e, index, id);
   };
 
+  const hasOptions = () =>
+    options.length !== 0 || (children !== undefined && (children as React.ReactNode[]).length !== 0);
+
   return (
     <ul
       className={css(styles.dualListSelectorList)}
-      role={isTree ? 'tree' : 'listbox'}
-      aria-multiselectable="true"
-      aria-labelledby={ariaLabelledBy}
-      aria-activedescendant={focusedOption}
+      {...(hasOptions() && {
+        role: isTree ? 'tree' : 'listbox',
+        'aria-multiselectable': true,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-activedescendant': focusedOption
+      })}
       aria-disabled={isDisabled ? 'true' : undefined}
       {...props}
     >

package/src/components/DualListSelector/DualListSelectorTree.tsx

@@ -35,7 +35,7 @@ export interface DualListSelectorTreeItemData {
   isDisabled?: boolean;
 }
 
-export interface DualListSelectorTreeProps {
+export interface DualListSelectorTreeProps extends Omit<React.HTMLProps<HTMLUListElement>, 'data'> {
   /** Data of the tree view */
   data: DualListSelectorTreeItemData[] | (() => DualListSelectorTreeItemData[]);
   /** ID of the tree view */
@@ -46,8 +46,9 @@ export interface DualListSelectorTreeProps {
   hasBadges?: boolean;
   /** Sets the default expanded behavior */
   defaultAllExpanded?: boolean;
-  /** Callback fired when an option is checked */
+  /** Flag indicating if the dual list selector tree is in the disabled state */
   isDisabled?: boolean;
+  /** Callback fired when an option is checked */
   onOptionCheck?: (
     event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     isChecked: boolean,

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

@@ -99,6 +99,7 @@ exports[`DualListSelector basic 1`] = `
     <div
       aria-label="Selector controls"
       class="pf-c-dual-list-selector__controls"
+      role="group"
       tabindex="0"
     >
       <div
@@ -248,11 +249,7 @@ exports[`DualListSelector basic 1`] = `
         tabindex="0"
       >
         <ul
-          aria-activedescendant=""
-          aria-labelledby="firstTest-chosen-pane-status"
-          aria-multiselectable="true"
           class="pf-c-dual-list-selector__list"
-          role="listbox"
         />
       </div>
     </div>
@@ -360,6 +357,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
     <div
       aria-label="Selector controls"
       class="pf-c-dual-list-selector__controls"
+      role="group"
       tabindex="0"
     >
       <div
@@ -510,12 +508,8 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         tabindex="0"
       >
         <ul
-          aria-activedescendant=""
           aria-disabled="true"
-          aria-labelledby="disabledTest-chosen-pane-status"
-          aria-multiselectable="true"
           class="pf-c-dual-list-selector__list"
-          role="listbox"
         />
       </div>
     </div>
@@ -633,6 +627,7 @@ exports[`DualListSelector with actions 1`] = `
     <div
       aria-label="Selector controls"
       class="pf-c-dual-list-selector__controls"
+      role="group"
       tabindex="0"
     >
       <div
@@ -954,6 +949,7 @@ exports[`DualListSelector with custom status 1`] = `
     <div
       aria-label="Selector controls"
       class="pf-c-dual-list-selector__controls"
+      role="group"
       tabindex="0"
     >
       <div
@@ -1103,11 +1099,7 @@ exports[`DualListSelector with custom status 1`] = `
         tabindex="0"
       >
         <ul
-          aria-activedescendant=""
-          aria-labelledby="thirdTest-chosen-pane-status"
-          aria-multiselectable="true"
           class="pf-c-dual-list-selector__list"
-          role="listbox"
         />
       </div>
     </div>
@@ -1227,6 +1219,7 @@ exports[`DualListSelector with search inputs 1`] = `
     <div
       aria-label="Selector controls"
       class="pf-c-dual-list-selector__controls"
+      role="group"
       tabindex="0"
     >
       <div
@@ -1389,11 +1382,7 @@ exports[`DualListSelector with search inputs 1`] = `
         tabindex="0"
       >
         <ul
-          aria-activedescendant=""
-          aria-labelledby="secondTest-chosen-pane-status"
-          aria-multiselectable="true"
           class="pf-c-dual-list-selector__list"
-          role="listbox"
         />
       </div>
     </div>
@@ -1577,6 +1566,7 @@ exports[`DualListSelector with tree 1`] = `
     <div
       aria-label="Selector controls"
       class="pf-c-dual-list-selector__controls"
+      role="group"
       tabindex="0"
     >
       <div
@@ -1726,11 +1716,7 @@ exports[`DualListSelector with tree 1`] = `
         tabindex="0"
       >
         <ul
-          aria-activedescendant=""
-          aria-labelledby="tree-test-chosen-pane-status"
-          aria-multiselectable="true"
           class="pf-c-dual-list-selector__list"
-          role="tree"
         />
       </div>
     </div>

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -8,6 +8,8 @@ propComponents:
     'DualListSelectorPane',
     'DualListSelectorControl',
     'DualListSelectorControlsWrapper',
+    'DualListSelectorList',
+    'DualListSelectorListItem',
     'DualListSelectorTree',
     'DualListSelectorTreeItemData',
   ]
@@ -44,7 +46,7 @@ import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pfic
 
 ### With tree
 
-```ts file="./DualListSelectorTree.tsx"
+```ts file="./DualListSelectorTreeExample.tsx"
 ```
 
 ### Composable dual list selector

package/src/components/DualListSelector/examples/DualListSelectorComposable.tsx

@@ -151,7 +151,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
           )}
         </DualListSelectorList>
       </DualListSelectorPane>
-      <DualListSelectorControlsWrapper aria-label="Selector controls">
+      <DualListSelectorControlsWrapper>
         <DualListSelectorControl
           isDisabled={!availableOptions.some(option => option.selected)}
           onClick={() => moveSelected(true)}

package/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx

@@ -121,7 +121,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
           )}
         </DualListSelectorList>
       </DualListSelectorPane>
-      <DualListSelectorControlsWrapper aria-label="Selector controls">
+      <DualListSelectorControlsWrapper>
         <DualListSelectorControl
           isDisabled={!availableOptions.some(option => option.selected)}
           onClick={() => moveSelected(true)}

package/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx

@@ -255,7 +255,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
   return (
     <DualListSelector isTree>
       {buildPane(false)}
-      <DualListSelectorControlsWrapper aria-label="Selector controls">
+      <DualListSelectorControlsWrapper>
         <DualListSelectorControl
           isDisabled={!checkedLeafIds.filter(x => !chosenLeafIds.includes(x)).length}
           onClick={() => moveChecked(true)}

package/src/components/DualListSelector/examples/{DualListSelectorTree.tsx → DualListSelectorTreeExample.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DualListSelector } from '@patternfly/react-core';
 
-export const DualListSelectorTree: React.FunctionComponent = () => {
+export const DualListSelectorTreeExample: React.FunctionComponent = () => {
   const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
     {
       id: 'F1',

package/src/components/FileUpload/examples/FileUploadCustomUpload.tsx

@@ -94,7 +94,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
       ))}
       <br />
       <FileUploadField
-        id="custom-file-upload"
+        id="custom-file-upload-example"
         type="text"
         value={value}
         filename={filename ? 'example-filename.txt' : ''}

package/src/components/FileUpload/examples/FileUploadSimpleText.tsx

@@ -32,7 +32,7 @@ export const SimpleTextFileUpload: React.FunctionComponent = () => {
 
   return (
     <FileUpload
-      id="text-file-with-edits-allowed"
+      id="text-file-simple"
       type="text"
       value={value}
       filename={filename}

package/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx

@@ -32,7 +32,7 @@ export const TextFileWithEditsAllowed: React.FunctionComponent = () => {
 
   return (
     <FileUpload
-      id="text-file-with-edits-allowed"
+      id="text-file-with-edits-allowed-example"
       type="text"
       value={value}
       filename={filename}

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -39,13 +39,13 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   return (
     <Form>
       <FormGroup
-        fieldId="text-file-with-restrictions"
+        fieldId="text-file-with-restrictions-example"
         helperText="Upload a CSV file"
         helperTextInvalid="Must be a CSV file no larger than 1 KB"
         validated={isRejected ? 'error' : 'default'}
       >
         <FileUpload
-          id="text-file-with-restrictions"
+          id="text-file-with-restrictions-example"
           type="text"
           value={value}
           filename={filename}

package/src/components/InputGroup/examples/InputGroupBasic.tsx

@@ -5,7 +5,7 @@ import { InputGroup, InputGroupText, InputGroupTextVariant, TextInput, Validated
 export const InputGroupBasic: React.FunctionComponent = () => (
   <React.Fragment>
     <InputGroup>
-      <TextInput id="textInput6" type="email" aria-label="email input field" />
+      <TextInput id="textInput-basic-1" type="email" aria-label="email input field" />
       <InputGroupText id="email-example">@example.com</InputGroupText>
     </InputGroup>
     <br />
@@ -15,14 +15,14 @@ export const InputGroupBasic: React.FunctionComponent = () => (
       </InputGroupText>
       <TextInput
         validated={ValidatedOptions.error}
-        id="textInput7"
+        id="textInput-basic-2"
         type="email"
         aria-label="Error state username example"
       />
     </InputGroup>
     <br />
     <InputGroup>
-      <TextInput name="textIndex12" id="textInput12" type="text" aria-label="percentage" />
+      <TextInput name="textInput-basic-3" id="textInput-basic-3" type="text" aria-label="percentage" />
       <InputGroupText id="plain-example" variant={InputGroupTextVariant.plain}>
         %
       </InputGroupText>

package/src/components/InputGroup/examples/InputGroupWithDropdown.tsx

@@ -33,7 +33,7 @@ export const InputGroupWithDropdown: React.FunctionComponent = () => {
           isOpen={isOpen}
           dropdownItems={dropdownItems}
         />
-        <TextInput id="textInput3" aria-label="input with dropdown and button" />
+        <TextInput id="textInput-with-dropdown" aria-label="input with dropdown and button" />
         <Button id="inputDropdownButton1" variant="control">
           Button
         </Button>

package/src/components/InputGroup/examples/InputGroupWithPopover.tsx

@@ -5,7 +5,12 @@ import { Button, InputGroup, TextInput, Popover, PopoverPosition } from '@patter
 export const InputGroupWithPopover: React.FunctionComponent = () => (
   <React.Fragment>
     <InputGroup>
-      <TextInput name="textInput10" id="textInput10" type="text" aria-label="input example with popover" />
+      <TextInput
+        name="textInput-with-popover-1"
+        id="textInput-with-popover-1"
+        type="text"
+        aria-label="first input example with popover"
+      />
       <Popover
         aria-label="popover example"
         position={PopoverPosition.top}
@@ -18,7 +23,12 @@ export const InputGroupWithPopover: React.FunctionComponent = () => (
     </InputGroup>
     <br />
     <InputGroup>
-      <TextInput name="textInput12" id="textInput12" type="text" aria-label="input example with popover" />
+      <TextInput
+        name="textInput-with-popover-2"
+        id="textInput-with-popover-2"
+        type="text"
+        aria-label="second input example with popover"
+      />
       <Popover
         aria-label="popover example"
         position={PopoverPosition.top}

package/src/components/InputGroup/examples/InputGroupWithSiblings.tsx

@@ -17,7 +17,7 @@ export const InputGroupWithSiblings: React.FunctionComponent = () => (
         Button
       </Button>
       <Button variant="control">Button</Button>
-      <TextArea name="textarea3" id="textarea3" aria-label="textarea with 3 buttons" />
+      <TextArea name="textarea2" id="textarea2" aria-label="textarea with 3 buttons" />
       <Button variant="control">Button</Button>
     </InputGroup>
     <br />
@@ -25,7 +25,12 @@ export const InputGroupWithSiblings: React.FunctionComponent = () => (
       <InputGroupText>
         <DollarSignIcon />
       </InputGroupText>
-      <TextInput id="textInput5" type="number" aria-label="Dollar amount input example" />
+      <TextInput
+        id="textInput-with-siblings"
+        name="textInput-with-siblings"
+        type="number"
+        aria-label="Dollar amount input example"
+      />
       <InputGroupText>.00</InputGroupText>
     </InputGroup>
   </React.Fragment>

package/src/components/InputGroup/examples/InputGroupWithTextarea.tsx

@@ -4,7 +4,7 @@ import { Button, TextArea, InputGroup } from '@patternfly/react-core';
 export const InputGroupWithTextarea: React.FunctionComponent = () => (
   <React.Fragment>
     <InputGroup>
-      <TextArea name="textarea2" id="textarea2" aria-label="textarea with button" />
+      <TextArea name="inputGroup-with-textarea" id="inputGroup-with-textarea" aria-label="textarea with button" />
       <Button id="textAreaButton2" variant="control">
         Button
       </Button>