feat(Form): add functionality for form group roles

packages/react-core/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,30 +101,39 @@ 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">
             {' '}
             {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(
             styles.formGroupLabel,
             labelInfo && styles.modifiers.info,
             hasNoPaddingTop && styles.modifiers.noPaddingTop
           )}
+          {...(isGroupOrRadioGroup && { id: `${fieldId}-legend` })}
         >
           {labelInfo && (
             <React.Fragment>

packages/react-core/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';

packages/react-core/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 && (

packages/react-core/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();
+});

packages/react-core/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');
+    });
+  });
 });

packages/react-core/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();
+});

packages/react-core/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"

packages/react-core/src/components/Form/__tests__/__snapshots__/FormSection.test.tsx.snap

@@ -4,17 +4,21 @@ exports[`Check form section example against snapshot 1`] = `
 <DocumentFragment>
   <section
     class="pf-c-form__section"
+    role="group"
   />
 </DocumentFragment>
 `;
 
 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>