Skip to content
Permalink
Browse files

UPDATE: Accessibility of ChoiceGroup (#1072)

  • Loading branch information...
filipdanisko authored and vepor committed Jun 5, 2019
1 parent 7c3406a commit 8882e0f55ecf745a897c4dde0c6131fd4785d989
@@ -2,7 +2,9 @@

exports[`RadioGroup Filters should match snapshot 1`] = `
<ChoiceGroup__StyledChoiceGroup
aria-labelledby="ChoiceGroup50000-id-50000"
data-test="test"
role="group"
theme={
Object {
"orbit": Object {
@@ -466,6 +468,7 @@ exports[`RadioGroup Filters should match snapshot 1`] = `
>
<Heading
element="h5"
id="ChoiceGroup50000-id-50000"
spaceAfter="medium"
type="title2"
>
@@ -535,7 +538,9 @@ exports[`RadioGroup Filters should match snapshot 1`] = `

exports[`RadioGroup should match snapshot 1`] = `
<ChoiceGroup__StyledChoiceGroup
aria-labelledby="ChoiceGroup50000-id-50000"
data-test="test"
role="group"
theme={
Object {
"orbit": Object {
@@ -999,6 +1004,7 @@ exports[`RadioGroup should match snapshot 1`] = `
>
<Heading
element="h5"
id="ChoiceGroup50000-id-50000"
spaceAfter="medium"
type="title2"
>
@@ -20,6 +20,11 @@ const choices = [
{ value: "three", label: "Reason three" },
];

// Mocking a random for randomID to be consistent in test.
const mockMath = Object.create(global.Math);
mockMath.random = () => 0.5;
global.Math = mockMath;

describe("RadioGroup", () => {
const dataTest = "test";
const component = shallow(
@@ -8,6 +8,7 @@ import { LABEL_SIZES, LABEL_ELEMENTS } from "./consts";
import FormFeedback, { StyledFormFeedback } from "../FormFeedback";
import defaultTheme from "../defaultTheme";
import FilterWrapper from "./components/FilterWrapper";
import randomID from "../utils/randomID";

import type { Props } from "./index";

@@ -36,6 +37,8 @@ StyledChoiceGroup.defaultProps = {
};

class ChoiceGroup extends React.PureComponent<Props> {
groupID = randomID("ChoiceGroup");

handleChange = (ev: SyntheticInputEvent<HTMLInputElement>) => {
ev.persist();
const { onChange } = this.props;
@@ -66,9 +69,14 @@ class ChoiceGroup extends React.PureComponent<Props> {
} = this.props;

return (
<StyledChoiceGroup data-test={dataTest}>
<StyledChoiceGroup data-test={dataTest} role="group" aria-labelledby={this.groupID}>
{label && (
<Heading type={getHeadingSize(labelSize)} element={labelElement} spaceAfter="medium">
<Heading
id={this.groupID}
type={getHeadingSize(labelSize)}
element={labelElement}
spaceAfter="medium"
>
{label}
</Heading>
)}
@@ -160,7 +160,7 @@ storiesOf("Heading", module)
const element = select("Element", Object.values(ELEMENT_OPTIONS), ELEMENT_OPTIONS.H2);
const type = select("Type", Object.values(TYPE_OPTIONS), TYPE_OPTIONS.DISPLAY);
const dataTest = text("dataTest", "test");

const id = text("ID", "ID-OF-A-ELEMENT");
const customTitle = text("Title", "Orbit design system");
const dataA11ySection = text("dataA11ySection", "ID-OF-SECTION");
const spaceAfter = select("spaceAfter", [null, ...Object.values(SPACINGS_AFTER)]);
@@ -171,6 +171,7 @@ storiesOf("Heading", module)
type={type}
dataTest={dataTest}
spaceAfter={spaceAfter}
id={id}
>
{customTitle}
</Heading>
@@ -16,6 +16,7 @@ Table below contains all types of the props available in Heading component.
| dataTest | `string` | | Optional prop for testing purposes.
| dataA11ySection | `string` | | ID for a `<SkipNavigation>` component.
| **element** | [`enum`](#enum) | `"h1"` | The element used for the root node.
| id | `string` | | Adds `id` HTML attribute to an element. Expects a unique ID.
| inverted | `boolean` | | The `true`, the Heading color will be white.
| spaceAfter | `enum` | | Additional `margin-bottom` after component. [See this docs](https://github.com/kiwicom/orbit-components/tree/master/src/common/getSpacingToken)
| **type** | [`enum`](#enum) | `"title1"` | The size type of Heading.
@@ -34,8 +34,13 @@ export const getHeadingToken: GetHeadingToken = name => ({ theme, type }) => {
};

export const StyledHeading = styled(
({ element: Component, className, children, dataTest, dataA11ySection }) => (
<Component className={className} data-test={dataTest} data-a11y-section={dataA11ySection}>
({ element: Component, className, children, dataTest, dataA11ySection, id }) => (
<Component
className={className}
data-test={dataTest}
data-a11y-section={dataA11ySection}
id={id}
>
{children}
</Component>
),
@@ -63,6 +68,7 @@ const Heading = ({
inverted = false,
spaceAfter,
dataA11ySection,
id,
}: Props) => (
<StyledHeading
type={type}
@@ -71,6 +77,7 @@ const Heading = ({
dataTest={dataTest}
spaceAfter={spaceAfter}
dataA11ySection={dataA11ySection}
id={id}
>
{children}
</StyledHeading>
@@ -19,6 +19,7 @@ export type Props = {|
+children: React$Node,
+inverted?: boolean,
+dataA11ySection?: string,
+id?: string,
|};

export type GetHeadingToken = (name: string) => ({ ...ThemeProps, type: Type }) => string;

0 comments on commit 8882e0f

Please sign in to comment.
You can’t perform that action at this time.