@patternfly/react-core 4.221.17 → 4.222.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.221.17",
+  "version": "4.222.0",
   "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.17",
-    "@patternfly/react-styles": "^4.71.17",
-    "@patternfly/react-tokens": "^4.73.17",
+    "@patternfly/react-icons": "^4.73.0",
+    "@patternfly/react-styles": "^4.72.0",
+    "@patternfly/react-tokens": "^4.74.0",
     "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": "836df9bc9e7e1288ea3ee9e7681da5447a4c30a5"
+  "gitHead": "9c5a0c99d957bafa3548e1fd4db410a74f7f7ad8"
 }

package/src/components/Form/FormGroup.tsx

@@ -41,6 +41,10 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
   helperTextInvalidIcon?: React.ReactNode;
   /** ID of the included field. It has to be the same for proper working. */
   fieldId: string;
+  /** Sets the role of the form group. Pass in "radiogroup" when the form group contains multiple
+   * radio inputs, or pass in "group" when the form group contains multiple of any other input type.
+   */
+  role?: string;
 }
 
 export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
@@ -60,6 +64,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   helperTextIcon,
   helperTextInvalidIcon,
   fieldId,
+  role,
   ...props
 }: FormGroupProps) => {
   const validHelperText =
@@ -96,9 +101,12 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   const helperTextToDisplay =
     validated === ValidatedOptions.error && helperTextInvalid ? inValidHelperText : showValidHelperTxt(validated);
 
+  const isGroupOrRadioGroup = role === 'group' || role === 'radiogroup';
+  const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label';
+
   const labelContent = (
     <React.Fragment>
-      <label className={css(styles.formLabel)} htmlFor={fieldId}>
+      <LabelComponent className={css(styles.formLabel)} {...(!isGroupOrRadioGroup && { htmlFor: fieldId })}>
         <span className={css(styles.formLabelText)}>{label}</span>
         {isRequired && (
           <span className={css(styles.formLabelRequired)} aria-hidden="true">
@@ -106,13 +114,18 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
             {ASTERISK}
           </span>
         )}
-      </label>{' '}
+      </LabelComponent>{' '}
       {React.isValidElement(labelIcon) && labelIcon}
     </React.Fragment>
   );
 
   return (
-    <div {...props} className={css(styles.formGroup, className)}>
+    <div
+      className={css(styles.formGroup, className)}
+      {...(role && { role })}
+      {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId}-legend` })}
+      {...props}
+    >
       {label && (
         <div
           className={css(
@@ -120,6 +133,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
             labelInfo && styles.modifiers.info,
             hasNoPaddingTop && styles.modifiers.noPaddingTop
           )}
+          {...(isGroupOrRadioGroup && { id: `${fieldId}-legend` })}
         >
           {labelInfo && (
             <React.Fragment>

package/src/components/Form/FormSection.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface FormSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
   /** Content rendered inside the section */
@@ -20,9 +21,22 @@ export const FormSection: React.FunctionComponent<FormSectionProps> = ({
   titleElement: TitleElement = 'div',
   ...props
 }: FormSectionProps) => (
-  <section {...props} className={css(styles.formSection, className)}>
-    {title && <TitleElement className={css(styles.formSectionTitle, className)}>{title}</TitleElement>}
-    {children}
-  </section>
+  <GenerateId prefix="pf-form-section-title">
+    {sectionId => (
+      <section
+        className={css(styles.formSection, className)}
+        role="group"
+        {...(title && { 'aria-labelledby': sectionId })}
+        {...props}
+      >
+        {title && (
+          <TitleElement id={sectionId} className={css(styles.formSectionTitle, className)}>
+            {title}
+          </TitleElement>
+        )}
+        {children}
+      </section>
+    )}
+  </GenerateId>
 );
 FormSection.displayName = 'FormSection';

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -42,6 +42,8 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
   return (
     <div
       className={css(styles.formFieldGroup, isExpanded && isExpandable && styles.modifiers.expanded, className)}
+      role="group"
+      {...(headerTitleText && { 'aria-labelledby': `${header.props.titleText.id}` })}
       {...props}
     >
       {isExpandable && (

package/src/components/Form/__tests__/FormFieldGroup.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { FormFieldGroup } from '../FormFieldGroup';
 import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
@@ -53,3 +53,25 @@ test('Verify console error logged when there is no aria-label or title', () => {
   const { asFragment } = render(FieldGroup);
   expect(consoleErrorMock).toHaveBeenCalled();
 });
+
+test('Verify field group has accessible name when header is passed in', () => {
+  render(
+    <FormFieldGroup
+      header={
+        <FormFieldGroupHeader
+          titleText={{ text: 'Field group 4 (non-expandable)', id: 'title-text-id1' }}
+          titleDescription="Field group 4 description text."
+          actions={<Button />}
+        />
+      }
+    />
+  );
+
+  expect(screen.getByRole('group')).toHaveAccessibleName('Field group 4 (non-expandable)');
+});
+
+test('Verify field group does not have accessible name when header is not passed in', () => {
+  render(<FormFieldGroup data-testid="field-group-test-id" />);
+
+  expect(screen.getByRole('group')).not.toHaveAccessibleName();
+});

package/src/components/Form/__tests__/FormGroup.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 { ValidatedOptions } from '../../../helpers/constants';
 import { FormGroup } from '../FormGroup';
@@ -203,4 +204,92 @@ describe('FormGroup', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('should render without group or radiogroup role when role is not passed in', () => {
+    render(
+      <FormGroup label="label" fieldId="no-group-role">
+        <input />
+      </FormGroup>
+    );
+
+    expect(screen.queryByRole('group')).not.toBeInTheDocument();
+    expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+  });
+
+  test('input should receive focus when clicking text label', () => {
+    render(
+      <FormGroup label="label" fieldId="native-label-element">
+        <input id="native-label-element" />
+      </FormGroup>
+    );
+
+    const labelElement = screen.getByText('label');
+    const input = screen.getByRole('textbox');
+
+    userEvent.click(labelElement);
+    expect(input).toHaveFocus();
+  });
+
+  describe('With multiple inputs per group', () => {
+    test('inputs should not receive focus when clicking text label', () => {
+      render(
+        <FormGroup label="label" fieldId="span-label-element" role="group">
+          <input id="span-label-element" />
+          <input />
+        </FormGroup>
+      );
+
+      const labelElement = screen.getByText('label');
+      const inputs = screen.getAllByRole('textbox');
+
+      userEvent.click(labelElement);
+      inputs.forEach(input => {
+        expect(input).not.toHaveFocus();
+      });
+    });
+
+    test('should render with group role', () => {
+      render(
+        <FormGroup label="label" fieldId="group-role" role="group">
+          <input />
+          <input />
+        </FormGroup>
+      );
+
+      expect(screen.getByRole('group')).toBeInTheDocument();
+    });
+
+    test('should render with radiogroup role', () => {
+      render(
+        <FormGroup label="label" fieldId="radiogroup-role" role="radiogroup">
+          <input />
+          <input />
+        </FormGroup>
+      );
+
+      expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+    });
+
+    test('should have accessible name when group role is passed in', () => {
+      render(
+        <FormGroup label="label" fieldId="accessible-name" role="group">
+          <input />
+          <input />
+        </FormGroup>
+      );
+
+      expect(screen.getByRole('group')).toHaveAccessibleName('label');
+    });
+
+    test('should have accessible name when radiogroup role is passed in', () => {
+      render(
+        <FormGroup label="label" fieldId="accessible-name" role="radiogroup">
+          <input />
+          <input />
+        </FormGroup>
+      );
+
+      expect(screen.getByRole('radiogroup')).toHaveAccessibleName('label');
+    });
+  });
 });

package/src/components/Form/__tests__/FormSection.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormSection } from '../FormSection';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 test('Check form section example against snapshot', () => {
   const Section = <FormSection />;
@@ -13,3 +13,15 @@ test('Check form section example with title', () => {
   const { asFragment } = render(Section);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Verify form section has accessible name when title is passed in', () => {
+  render(<FormSection title="Form title" />);
+
+  expect(screen.getByRole('group')).toHaveAccessibleName('Form title');
+});
+
+test('Verify form section does not have accessible name when title is not passed in', () => {
+  render(<FormSection />);
+
+  expect(screen.getByRole('group')).not.toHaveAccessibleName();
+});

package/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap

@@ -3,7 +3,9 @@
 exports[`Check expandable form field group example against snapshot 1`] = `
 <DocumentFragment>
   <div
+    aria-labelledby="title-text-id2"
     class="pf-c-form__field-group pf-m-expanded"
+    role="group"
   >
     <div
       class="pf-c-form__field-group-toggle"
@@ -88,7 +90,9 @@ exports[`Check expandable form field group example against snapshot 1`] = `
 exports[`Check form field group example against snapshot 1`] = `
 <DocumentFragment>
   <div
+    aria-labelledby="title-text-id1"
     class="pf-c-form__field-group"
+    role="group"
   >
     <div
       class="pf-c-form__field-group-header"

package/src/components/Form/__tests__/__snapshots__/FormSection.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Check form section example against snapshot 1`] = `
 <DocumentFragment>
   <section
     class="pf-c-form__section"
+    role="group"
   />
 </DocumentFragment>
 `;
@@ -11,10 +12,13 @@ exports[`Check form section example against snapshot 1`] = `
 exports[`Check form section example with title 1`] = `
 <DocumentFragment>
   <section
+    aria-labelledby="pf-form-section-title1"
     class="pf-c-form__section"
+    role="group"
   >
     <h4
       class="pf-c-form__section-title"
+      id="pf-form-section-title1"
     >
       Title
     </h4>

package/src/components/Form/examples/Form.md

@@ -44,7 +44,7 @@ import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 
 ```js
 import React from 'react';
-import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button } from '@patternfly/react-core';
+import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button, Radio } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 class SimpleForm extends React.Component {
@@ -147,10 +147,15 @@ class SimpleForm extends React.Component {
             onChange={this.handleTextInputChange3}
           />
         </FormGroup>
-        <FormGroup isInline fieldId="simple-form-checkbox-group" label="How can we contact you?" isRequired>
+        <FormGroup role="group" isInline fieldId="basic-form-checkbox-group" label="How can we contact you?">
           <Checkbox label="Email" aria-label="Email" id="inlinecheck01" />
           <Checkbox label="Phone" aria-label="Phone" id="inlinecheck02" />
-          <Checkbox label="Please don't contact me." aria-label="Please don't contact me." id="inlinecheck03" />
+          <Checkbox label="Mail" aria-label="Mail" id="inlinecheck03" />
+        </FormGroup>
+        <FormGroup role="radiogroup" isInline fieldId="simple-form-radio-group" label="Time zone">
+          <Radio name="basic-inline-radio" label="Eastern" id="basic-inline-radio-01" />
+          <Radio name="basic-inline-radio" label="Central" id="basic-inline-radio-02" />
+          <Radio name="basic-inline-radio" label="Pacific" id="basic-inline-radio-03" />
         </FormGroup>
         <FormGroup label="Additional note" fieldId="simple-form-note-01">
           <TextInput isDisabled type="text" id="simple-form-note-01" name="simple-form-number" value="disabled" />
@@ -186,7 +191,8 @@ import {
   FormSelectOption,
   Checkbox,
   ActionGroup,
-  Button
+  Button,
+  Radio
 } from '@patternfly/react-core';
 
 class HorizontalForm extends React.Component {
@@ -226,7 +232,12 @@ class HorizontalForm extends React.Component {
 
     return (
       <Form isHorizontal>
-        <FormGroup label="Full name" isRequired fieldId="horizontal-form-name" helperText="Include your middle name if you have one.">
+        <FormGroup
+          label="Full name"
+          isRequired
+          fieldId="horizontal-form-name"
+          helperText="Include your middle name if you have one."
+        >
           <TextInput
             value={value1}
             isRequired
@@ -268,10 +279,21 @@ class HorizontalForm extends React.Component {
             id="horizontal-form-exp"
           />
         </FormGroup>
-        <FormGroup label="How can we contact you?" isRequired isStack hasNoPaddingTop>
+        <FormGroup
+          label="How can we contact you?"
+          isStack
+          hasNoPaddingTop
+          role="group"
+          fieldId="horizontal-form-checkbox-group"
+        >
           <Checkbox label="Email" id="alt-form-checkbox-1" name="alt-form-checkbox-1" />
           <Checkbox label="Phone" id="alt-form-checkbox-2" name="alt-form-checkbox-2" />
-          <Checkbox label="Please don't contact me." id="alt-form-checkbox-3" name="alt-form-checkbox-3" />
+          <Checkbox label="Mail" id="alt-form-checkbox-3" name="alt-form-checkbox-3" />
+        </FormGroup>
+        <FormGroup role="radiogroup" isStack hasNoPaddingTop fieldId="horizontal-form-radio-group" label="Time zone">
+          <Radio name="horizontal-inline-radio" label="Eastern" id="horizontal-inline-radio-01" />
+          <Radio name="horizontal-inline-radio" label="Central" id="horizontal-inline-radio-02" />
+          <Radio name="horizontal-inline-radio" label="Pacific" id="horizontal-inline-radio-03" />
         </FormGroup>
         <ActionGroup>
           <Button variant="primary">Submit</Button>
@@ -287,7 +309,7 @@ class HorizontalForm extends React.Component {
 
 ```js
 import React from 'react';
-import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button } from '@patternfly/react-core';
+import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button, Radio } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 class SimpleForm extends React.Component {
@@ -390,10 +412,15 @@ class SimpleForm extends React.Component {
             onChange={this.handleTextInputChange3}
           />
         </FormGroup>
-        <FormGroup isInline label="How can we contact you?" isRequired>
+        <FormGroup fieldId="limit-width-form-checkbox-group" role="group" isInline label="How can we contact you?">
           <Checkbox label="Email" aria-label="Email" id="inlinecheck04" />
           <Checkbox label="Phone" aria-label="Phone" id="inlinecheck05" />
-          <Checkbox label="Please don't contact me." aria-label="Please don't contact me." id="inlinecheck06" />
+          <Checkbox label="Mail" aria-label="Mail" id="inlinecheck06" />
+        </FormGroup>
+        <FormGroup role="radiogroup" isInline fieldId="limit-width-form-radio-group" label="Time zone">
+          <Radio name="limit-width-radio" label="Eastern" id="limit-width-inline-radio-01" />
+          <Radio name="limit-width-radio" label="Central" id="limit-width-inline-radio-02" />
+          <Radio name="limit-width-radio" label="Pacific" id="limit-width-inline-radio-03" />
         </FormGroup>
         <FormGroup label="Additional note" fieldId="simple-form-note-02">
           <TextInput isDisabled type="text" id="simple-form-note-02" name="simple-form-number" value="disabled" />
@@ -605,7 +632,7 @@ class HorizontalForm extends React.Component {
   render() {
     return (
       <Form isHorizontal>
-        <FormGroup label="Label" hasNoPaddingTop fieldId="options" isStack>
+        <FormGroup role="group" label="Label" hasNoPaddingTop fieldId="options" isStack>
           <Checkbox label="option 1" id="option-01" />
           <Checkbox label="option 2" id="option-02" />
         </FormGroup>
@@ -639,6 +666,7 @@ class HorizontalFormHelperTextOnTop extends React.Component {
           hasNoPaddingTop
           fieldId="options"
           isStack
+          role="group"
         >
           <Checkbox label="Option 1" id="option-03" />
           <Checkbox label="Option 2" id="option-04" />
@@ -823,7 +851,12 @@ class SimpleForm extends React.Component {
       <Form>
         <Grid hasGutter md={6}>
           <GridItem span={12}>
-            <FormGroup label="Full name" isRequired fieldId="grid-form-name-01" helperText="Include your middle name if you have one.">
+            <FormGroup
+              label="Full name"
+              isRequired
+              fieldId="grid-form-name-01"
+              helperText="Include your middle name if you have one."
+            >
               <TextInput
                 isRequired
                 type="text"