fix(a11y): accessibility improvements (#98)

Various accessibility improvements

Author: Carlo Bernardini

src/components/Alert/Alert.js

@@ -16,7 +16,7 @@ const Alert = props => {
 
     return (
         <div {...rest} {...block(props)}>
-            <div {...elem('content', props)}>
+            <div {...elem('content', props)} role="alert">
                 {!!title && <strong {...elem('title', props)}>{title}</strong>}
                 {children}
             </div>

src/components/Alert/__tests__/__snapshots__/Alert.spec.js.snap

@@ -6,6 +6,7 @@ exports[`<Alert> that renders an alert should add classes when props are changed
 >
   <div
     className="Alert__content Alert__content--context Alert__content--context_bad"
+    role="alert"
   >
     <strong
       className="Alert__title Alert__title--context Alert__title--context_bad"
@@ -33,6 +34,7 @@ exports[`<Alert> that renders an alert should have a button that works 1`] = `
   >
     <div
       className="Alert__content Alert__content--context Alert__content--context_brand"
+      role="alert"
     >
       <strong
         className="Alert__title Alert__title--context Alert__title--context_brand"
@@ -75,6 +77,7 @@ exports[`<Alert> that renders an alert should render default alert correctly 1`]
 >
   <div
     className="Alert__content Alert__content--context Alert__content--context_brand"
+    role="alert"
   >
     This is a basic alert without title or action
   </div>

src/components/ButtonGroup/ButtonGroup.js

@@ -14,7 +14,7 @@ const ButtonGroup = props => {
     const { children, size, isBlock, isInline, ...rest } = props;
 
     return (
-        <div {...rest} {...block(props)}>
+        <div {...rest} {...block(props)} role="group">
             {React.Children.map(children, button =>
                 React.cloneElement(button, {
                     ...button.props,

src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.spec.js.snap

@@ -8,6 +8,7 @@ exports[`<ButtonGroup> that renders a button should add classes when props are c
 >
   <div
     className="ButtonGroup ButtonGroup--size ButtonGroup--size_large ButtonGroup--isBlock"
+    role="group"
   >
     <Button
       className="ButtonGroup__button ButtonGroup__button--size ButtonGroup__button--size_large ButtonGroup__button--isBlock"
@@ -61,6 +62,7 @@ exports[`<ButtonGroup> that renders a button should render default button correc
 >
   <div
     className="ButtonGroup ButtonGroup--size ButtonGroup--size_normal"
+    role="group"
   >
     <Button
       className="ButtonGroup__button ButtonGroup__button--size ButtonGroup__button--size_normal"

src/components/LoadingSpinner/LoadingSpinner.js

@@ -14,7 +14,7 @@ const { block, elem } = bem({
 const LoadingSpinner = props => {
     const { centerIn, children, context, hidden, size, ...rest } = props;
     return (
-        <div {...rest} {...block(props)}>
+        <div {...rest} {...block(props)} role="status" aria-busy={!hidden} aria-hidden={hidden}>
             <svg
                 viewBox={[0, 0, 44, 44]}
                 style={(s => {

src/components/LoadingSpinner/__tests__/__snapshots__/LoadingSpinner.spec.js.snap

@@ -2,7 +2,10 @@
 
 exports[`<LoadingSpinner> that renders a circular loading spinner should add classes when props are changed 1`] = `
 <div
+  aria-busy={false}
+  aria-hidden={true}
   className="LoadingSpinner LoadingSpinner--centerIn LoadingSpinner--centerIn_viewport LoadingSpinner--context LoadingSpinner--context_primary LoadingSpinner--hidden"
+  role="status"
 >
   <svg
     className="LoadingSpinner__svg LoadingSpinner__svg--centerIn LoadingSpinner__svg--centerIn_viewport LoadingSpinner__svg--context LoadingSpinner__svg--context_primary LoadingSpinner__svg--hidden"
@@ -35,7 +38,10 @@ exports[`<LoadingSpinner> that renders a circular loading spinner should add cla
 
 exports[`<LoadingSpinner> that renders a circular loading spinner should render a default spinner correctly 1`] = `
 <div
+  aria-busy={true}
+  aria-hidden={false}
   className="LoadingSpinner LoadingSpinner--context LoadingSpinner--context_brand"
+  role="status"
 >
   <svg
     className="LoadingSpinner__svg LoadingSpinner__svg--context LoadingSpinner__svg--context_brand"
@@ -63,7 +69,10 @@ exports[`<LoadingSpinner> that renders a circular loading spinner should render
 
 exports[`<LoadingSpinner> that renders a circular loading spinner should render a spinner with label 1`] = `
 <div
+  aria-busy={true}
+  aria-hidden={false}
   className="LoadingSpinner LoadingSpinner--context LoadingSpinner--context_brand"
+  role="status"
 >
   <svg
     className="LoadingSpinner__svg LoadingSpinner__svg--context LoadingSpinner__svg--context_brand"

src/components/ProgressBar/ProgressBar.js

@@ -15,7 +15,15 @@ const ProgressBar = props => {
     const percentageAdjusted = Math.max(0, Math.min(percentage, 100));
 
     return (
-        <div {...rest} {...block(props)}>
+        <div
+            {...rest}
+            {...block(props)}
+            role="progressbar"
+            aria-hidden={hidden}
+            aria-valuenow={percentageAdjusted}
+            aria-valuemin="0"
+            aria-valuemax="100"
+        >
             <div
                 {...elem('fill', props)}
                 style={{

src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.spec.js.snap

@@ -2,7 +2,12 @@
 
 exports[`<ProgressBar> that renders a horizontal progress bar should render a default progress bar correctly 1`] = `
 <div
+  aria-hidden={false}
+  aria-valuemax="100"
+  aria-valuemin="0"
+  aria-valuenow={25}
   className="ProgressBar ProgressBar--context ProgressBar--context_brand"
+  role="progressbar"
 >
   <div
     className="ProgressBar__fill ProgressBar__fill--context ProgressBar__fill--context_brand"

src/components/Tabs/TabContent/TabContent.js

@@ -12,7 +12,7 @@ const { block } = bem({
 const TabContent = props => {
     const { children, ...rest } = props;
     return (
-        <div {...rest} {...block(props)}>
+        <div {...rest} {...block(props)} role="tabpanel">
             {children}
         </div>
     );

src/components/Tabs/TabContent/__tests__/__snapshots__/TabContent.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`<TabContent> should render tab content correctly 1`] = `
 <div
   className="TabContent"
+  role="tabpanel"
 >
   <h1>
     Tab content