Skip to content
This repository has been archived by the owner on Oct 19, 2021. It is now read-only.

Commit

Permalink
fix: apply correct aria label prop for radio (#2079)
Browse files Browse the repository at this point in the history 
* chore: apply correct aria label prop for radio

* feat: add hideLabel to RadioButton
  • Loading branch information
@nelsonchen90 @emyarod
nelsonchen90 authored and emyarod committed Apr 2, 2019
1 parent 261caba commit 1fb7214
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 21 deletions.
10 changes: 8 additions & 2 deletions src/components/DataTable/TableSelectRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,19 @@ const TableSelectRow = ({
name,
onClick: onSelect,
checked,
ariaLabel,
disabled,
};
const InlineInputComponent = radio ? RadioButton : InlineCheckbox;
return (
<td className={className}>
<InlineInputComponent {...selectionInputProps} />
<InlineInputComponent
{...selectionInputProps}
{...radio && {
labelText: ariaLabel,
hideLabel: true,
}}
{...!radio && { ariaLabel }}
/>
</td>
);
};
Expand Down
45 changes: 30 additions & 15 deletions src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -647,19 +647,20 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
>
<td>
<ForwardRef(RadioButton)
ariaLabel="Select row"
checked={false}
hideLabel={true}
id="data-table-11__select-row-b"
labelText="Select row"
name="select-row-b"
onClick={[Function]}
>
<RadioButton
ariaLabel="Select row"
checked={false}
hideLabel={true}
id="data-table-11__select-row-b"
innerRef={null}
labelPosition="right"
labelText=""
labelText="Select row"
name="select-row-b"
onChange={[Function]}
onClick={[Function]}
Expand All @@ -669,7 +670,6 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
className="bx--radio-button-wrapper"
>
<input
ariaLabel="Select row"
checked={false}
className="bx--radio-button"
id="data-table-11__select-row-b"
Expand All @@ -680,13 +680,18 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
value=""
/>
<label
aria-label=""
aria-label="Select row"
className="bx--radio-button__label"
htmlFor="data-table-11__select-row-b"
>
<span
className="bx--radio-button__appearance"
/>
<span
className="bx--visually-hidden"
>
Select row
</span>
</label>
</div>
</RadioButton>
Expand Down Expand Up @@ -723,19 +728,20 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
>
<td>
<ForwardRef(RadioButton)
ariaLabel="Select row"
checked={false}
hideLabel={true}
id="data-table-11__select-row-a"
labelText="Select row"
name="select-row-a"
onClick={[Function]}
>
<RadioButton
ariaLabel="Select row"
checked={false}
hideLabel={true}
id="data-table-11__select-row-a"
innerRef={null}
labelPosition="right"
labelText=""
labelText="Select row"
name="select-row-a"
onChange={[Function]}
onClick={[Function]}
Expand All @@ -745,7 +751,6 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
className="bx--radio-button-wrapper"
>
<input
ariaLabel="Select row"
checked={false}
className="bx--radio-button"
id="data-table-11__select-row-a"
Expand All @@ -756,13 +761,18 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
value=""
/>
<label
aria-label=""
aria-label="Select row"
className="bx--radio-button__label"
htmlFor="data-table-11__select-row-a"
>
<span
className="bx--radio-button__appearance"
/>
<span
className="bx--visually-hidden"
>
Select row
</span>
</label>
</div>
</RadioButton>
Expand Down Expand Up @@ -799,19 +809,20 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
>
<td>
<ForwardRef(RadioButton)
ariaLabel="Select row"
checked={false}
hideLabel={true}
id="data-table-11__select-row-c"
labelText="Select row"
name="select-row-c"
onClick={[Function]}
>
<RadioButton
ariaLabel="Select row"
checked={false}
hideLabel={true}
id="data-table-11__select-row-c"
innerRef={null}
labelPosition="right"
labelText=""
labelText="Select row"
name="select-row-c"
onChange={[Function]}
onClick={[Function]}
Expand All @@ -821,7 +832,6 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
className="bx--radio-button-wrapper"
>
<input
ariaLabel="Select row"
checked={false}
className="bx--radio-button"
id="data-table-11__select-row-c"
Expand All @@ -832,13 +842,18 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
value=""
/>
<label
aria-label=""
aria-label="Select row"
className="bx--radio-button__label"
htmlFor="data-table-11__select-row-c"
>
<span
className="bx--radio-button__appearance"
/>
<span
className="bx--visually-hidden"
>
Select row
</span>
</label>
</div>
</RadioButton>
Expand Down
20 changes: 19 additions & 1 deletion src/components/RadioButton/RadioButton-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,25 @@ describe('RadioButton', () => {

it('should render a span with the correct class', () => {
const span = label.find('span');
expect(span.hasClass('bx--radio-button__appearance')).toEqual(true);
expect(span.at(0).hasClass('bx--radio-button__appearance')).toEqual(
true
);
});

it('should render a span for the label text', () => {
const span = label.find('span');
expect(span.at(1).hasClass('')).toEqual(true);
expect(span.at(1).text()).toEqual('testlabel');
});

it('should render a span with hidden class name to hide label text', () => {
wrapper.setProps({
hideLabel: true,
});
const label = wrapper.find('span');
const span = label.find('span');
expect(span.at(1).hasClass('bx--visually-hidden')).toEqual(true);
expect(span.at(1).text()).toEqual('testlabel');
});

it('should render label text', () => {
Expand Down
11 changes: 10 additions & 1 deletion src/components/RadioButton/RadioButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@ class RadioButton extends React.Component {
*/
labelText: PropTypes.node.isRequired,

/**
* Specify whether the label should be hidden, or not
*/
hideLabel: PropTypes.bool,

/**
* Provide where label text should be placed
*/
Expand Down Expand Up @@ -94,6 +99,7 @@ class RadioButton extends React.Component {
labelText,
labelPosition,
innerRef: ref,
hideLabel,
...other
} = this.props;
if (__DEV__) {
Expand All @@ -103,6 +109,9 @@ class RadioButton extends React.Component {
'and being removed in the next release of `carbon-components-react`.'
);
}
const innerLabelClasses = classNames({
[`${prefix}--visually-hidden`]: hideLabel,
});
const wrapperClasses = classNames(
className,
`${prefix}--radio-button-wrapper`,
Expand All @@ -127,7 +136,7 @@ class RadioButton extends React.Component {
className={`${prefix}--radio-button__label`}
aria-label={labelText}>
<span className={`${prefix}--radio-button__appearance`} />
{labelText}
<span className={innerLabelClasses}>{labelText}</span>
</label>
</div>
);
Expand Down
12 changes: 10 additions & 2 deletions src/components/RadioTile/RadioTile-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,17 @@ describe('RadioButton', () => {
expect(label.props().className).toEqual('bx--radio-button__label');
});

it('should render a span with the correct class', () => {
it('should render a span with the correct class for radio style', () => {
const span = label.find('span');
expect(span.hasClass('bx--radio-button__appearance')).toEqual(true);
expect(span.at(0).hasClass('bx--radio-button__appearance')).toEqual(
true
);
});

it('should render a span for the label text', () => {
const span = label.find('span');
expect(span.at(1).hasClass('')).toEqual(true);
expect(span.at(1).text()).toEqual('testlabel');
});

it('should render label text', () => {
Expand Down

0 comments on commit 1fb7214

Please sign in to comment.