fix(Radio): Modify examples and aria-label/label (patternfly#1269)

Removed Custom Label Radio, fixed examples so only one radio button can be selected at a time, and
modified aria-labeling so that it's only present if there is no label.
Also updated the relevant snapshot.

Fixes patternfly#1007

packages/patternfly-4/react-core/src/components/Radio/Radio.d.ts

@@ -7,7 +7,7 @@ export interface RadioProps extends Omit<HTMLProps<HTMLInputElement>, 'type' | '
   isChecked?: boolean;
   onChange?(checked: boolean, event: FormEvent<HTMLInputElement>): void;
   id: string;
-  'aria-label': string;
+  'aria-label'?: string;
   label?: ReactNode;
   name: string;
 }

packages/patternfly-4/react-core/src/components/Radio/Radio.docs.js

@@ -1,7 +1,6 @@
 import Controlled from './examples/ControlledRadio';
 import Uncontrolled from './examples/UncontrolledRadio';
 import Disabled from './examples/DisabledRadio';
-import Custom from './examples/CustomLabelRadio';
 import { Radio } from '@patternfly/react-core';
 import getContainerProps from './examples/common/getContainerProps';
 
@@ -14,6 +13,5 @@ export default {
     { component: Controlled, title: 'Controlled Radio' },
     { component: Uncontrolled, title: 'Uncontrolled Radio' },
     { component: Disabled, title: 'Disabled Radio' },
-    { component: Custom, title: 'Custom label Radio', getContainerProps }
   ]
 };

packages/patternfly-4/react-core/src/components/Radio/Radio.js

@@ -20,7 +20,7 @@ const propTypes = {
   id: PropTypes.string.isRequired,
   /** Aria-label of the Radio. */
   'aria-label': props => {
-    if (!props['aria-label']) {
+    if (!props.label && !props['aria-label']) {
       return new Error('Radio requires an aria-label to be specified');
     }
     return null;
@@ -37,8 +37,7 @@ const defaultProps = {
   isDisabled: false,
   isChecked: null,
   onChange: () => undefined,
-  label: undefined,
-  'aria-label': null
+  label: undefined
 };
 
 class Radio extends React.Component {
@@ -47,11 +46,12 @@ class Radio extends React.Component {
   };
 
   render() {
-    const { className, onChange, isValid, isDisabled, isChecked, label, checked, ...props } = this.props;
+    const { 'aria-label': ariaLabel, className, onChange, isValid, isDisabled, isChecked, label, checked, ...props } = this.props;
     return (
       <div className={css(styles.check, className)}>
         <input
           {...props}
+          aria-label={label ? null : ariaLabel}
           className={css(styles.checkInput)}
           type="radio"
           onChange={this.handleChange}

packages/patternfly-4/react-core/src/components/Radio/__snapshots__/Radio.test.js.snap

@@ -85,7 +85,7 @@ exports[`Radio check component label is function 1`] = `
 >
   <input
     aria-invalid={false}
-    aria-label="check"
+    aria-label={null}
     checked={true}
     className="pf-c-check__input"
     disabled={false}
@@ -131,7 +131,7 @@ exports[`Radio check component label is node 1`] = `
 >
   <input
     aria-invalid={false}
-    aria-label="check"
+    aria-label={null}
     checked={true}
     className="pf-c-check__input"
     disabled={false}
@@ -177,7 +177,7 @@ exports[`Radio check component label is string 1`] = `
 >
   <input
     aria-invalid={false}
-    aria-label="check"
+    aria-label={null}
     checked={true}
     className="pf-c-check__input"
     disabled={false}
@@ -221,7 +221,7 @@ exports[`Radio check component passing HTML attribute 1`] = `
 >
   <input
     aria-invalid={false}
-    aria-label="check"
+    aria-label={null}
     aria-labelledby="labelId"
     checked={true}
     className="pf-c-check__input"
@@ -266,7 +266,7 @@ exports[`Radio check component passing class 1`] = `
 >
   <input
     aria-invalid={false}
-    aria-label="check"
+    aria-label={null}
     checked={true}
     className="pf-c-check__input"
     disabled={false}

packages/patternfly-4/react-core/src/components/Radio/examples/ControlledRadio.js

@@ -19,16 +19,14 @@ class ControlledRadio extends React.Component {
           isChecked={this.state.value === '3'}
           name="pf-version"
           onChange={this.handleChange}
-          aria-label="Controlled radio 1"
           label="Controlled radio 1"
           id="radio-1"
         />{' '}
         <Radio
           value="4"
           isChecked={this.state.value === '4'}
-          name="pf-version2"
+          name="pf-version"
           onChange={this.handleChange}
-          aria-label="Controlled radio 2"
           label="Controlled radio 2"
           id="radio-2"
         />

packages/patternfly-4/react-core/src/components/Radio/examples/DisabledRadio.js

@@ -7,7 +7,6 @@ class DisabledRadio extends React.Component {
       <React.Fragment>
         <Radio
           label="Disabled checked radio example"
-          aria-label="disabled checked radio example"
           defaultChecked
           isDisabled
           name="group-1"
@@ -16,7 +15,6 @@ class DisabledRadio extends React.Component {
         <Radio
           id="radio-disabled-2"
           label="Disabled radio example"
-          aria-label="disabled radio example"
           isDisabled
           name="group-2"
         />

packages/patternfly-4/react-core/src/components/Radio/examples/UncontrolledRadio.js

@@ -3,9 +3,10 @@ import { Radio } from '@patternfly/react-core';
 
 class UncontrolledRadio extends React.Component {
   render() {
-    return (
-      <Radio label="Uncontrolled radio example" id="radio-4" name="radio-4" aria-label="uncontrolled radio example" />
-    );
+    return <React.Fragment>
+      <Radio label="Uncontrolled radio example" id="radio-4" name="radio-4" />
+      <Radio label="Uncontrolled radio example" id="radio-5" name="radio-4" />
+    </React.Fragment>;
   }
 }