feat: Add aria-label prop to Loading component (#472)

Doist · Mar 18, 2021 · 61f91ca · 61f91ca
1 parent 4166c5a
commit 61f91ca
Show file tree

Hide file tree

Showing 18 changed files with 53 additions and 51 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+## 9.1.0
+
+-   [Feature] Adds support for `aria-label` to the `Loading` component
+-   [Docs] This also fixes our gh-pages-hosted Storybook to load the proper stylesheets again
+
 ## 9.0.0
 
 -   [Build] The project now requires node v14.5.5+ and npm v6.14.11+ to install and run.

diff --git a/docs/iframe.html b/docs/iframe.html
@@ -71,4 +71,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.4e86b87c85885a48d329.bundle.js"></script><script src="vendors~main.4e86b87c85885a48d329.bundle.js"></script><script src="main.4e86b87c85885a48d329.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.1e5fbad572a296bec277.bundle.js"></script><script src="vendors~main.1e5fbad572a296bec277.bundle.js"></script><script src="main.1e5fbad572a296bec277.bundle.js"></script></body></html>
diff --git a/docs/main.4e86b87c85885a48d329.bundle.js → docs/main.1e5fbad572a296bec277.bundle.js b/docs/main.4e86b87c85885a48d329.bundle.js → docs/main.1e5fbad572a296bec277.bundle.js
diff --git a/docs/main.1e5fbad572a296bec277.bundle.js.map b/docs/main.1e5fbad572a296bec277.bundle.js.map
diff --git a/docs/main.4e86b87c85885a48d329.bundle.js.map b/docs/main.4e86b87c85885a48d329.bundle.js.map
diff --git a/...ntime~main.4e86b87c85885a48d329.bundle.js → ...ntime~main.1e5fbad572a296bec277.bundle.js b/...ntime~main.4e86b87c85885a48d329.bundle.js → ...ntime~main.1e5fbad572a296bec277.bundle.js
diff --git a/docs/runtime~main.1e5fbad572a296bec277.bundle.js.map b/docs/runtime~main.1e5fbad572a296bec277.bundle.js.map
diff --git a/docs/runtime~main.4e86b87c85885a48d329.bundle.js.map b/docs/runtime~main.4e86b87c85885a48d329.bundle.js.map
diff --git a/...ndors~main.4e86b87c85885a48d329.bundle.js → ...ndors~main.1e5fbad572a296bec277.bundle.js b/...ndors~main.4e86b87c85885a48d329.bundle.js → ...ndors~main.1e5fbad572a296bec277.bundle.js
diff --git a/...e86b87c85885a48d329.bundle.js.LICENSE.txt → ...e5fbad572a296bec277.bundle.js.LICENSE.txt b/...e86b87c85885a48d329.bundle.js.LICENSE.txt → ...e5fbad572a296bec277.bundle.js.LICENSE.txt
diff --git a/docs/vendors~main.1e5fbad572a296bec277.bundle.js.map b/docs/vendors~main.1e5fbad572a296bec277.bundle.js.map
diff --git a/docs/vendors~main.4e86b87c85885a48d329.bundle.js.map b/docs/vendors~main.4e86b87c85885a48d329.bundle.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
     "author": "Henning Muszynski <[email protected]> (http://doist.com)",
-    "version": "9.0.0",
+    "version": "9.1.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",

diff --git a/src/components/loading/Loading.test.tsx b/src/components/loading/Loading.test.tsx
@@ -1,17 +1,31 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { render, screen } from '@testing-library/react'
 
 import { Loading } from './loading'
 
 describe('Loading', () => {
     it('renders a loading indicator', () => {
-        const loading = shallow(<Loading />)
-        expect(loading).toMatchSnapshot()
+        render(<Loading />)
+        expect(screen.getByRole('alert', { name: 'Loading' })).toBeVisible()
+    })
+
+    it('adds accessibility attributes', () => {
+        render(<Loading />)
+
+        const loading = screen.getByRole('alert', { name: 'Loading' })
+        expect(loading).toHaveAttribute('aria-live', 'assertive')
+    })
+
+    it('allows for custom aria labels', () => {
+        render(<Loading aria-label="Your content is now loading" />)
+
+        expect(screen.getByRole('alert', { name: 'Your content is now loading' })).toBeVisible()
     })
 
     it('adds additionally supplied className', () => {
-        const loading = shallow(<Loading className="additional className" />)
-        expect(loading.hasClass('additional')).toBe(true)
-        expect(loading.hasClass('className')).toBe(true)
+        render(<Loading className="additional className" />)
+
+        const loading = screen.getByRole('alert', { name: 'Loading' })
+        expect(loading).toHaveClass('additional', 'className')
     })
 })
diff --git a/src/components/loading/__snapshots__/Loading.test.tsx.snap b/src/components/loading/__snapshots__/Loading.test.tsx.snap
diff --git a/src/components/loading/loading.tsx b/src/components/loading/loading.tsx
@@ -12,11 +12,24 @@ type Props = {
     bgColor?: string
     /** Circle diameter in pixels. */
     size?: string | number
+
+    'aria-label'?: string
 }
 
-function Loading({ className, spinnerColor = '#3F82EF', bgColor = '#D9E6FB', size = 24 }: Props) {
+function Loading({
+    className,
+    spinnerColor = '#3F82EF',
+    bgColor = '#D9E6FB',
+    size = 24,
+    'aria-label': ariaLabel = 'Loading',
+}: Props) {
     return (
-        <div className={classNames('reactist_loading', className)}>
+        <div
+            className={classNames('reactist_loading', className)}
+            aria-label={ariaLabel}
+            aria-live="assertive"
+            role="alert"
+        >
             <span className="reactist_loading--spinner">
                 <svg width={size} height={size} viewBox={'0 0 24 24'}>
                     <g fill="none" fillRule="nonzero">

diff --git a/stories/components/LoadingStory.tsx b/stories/components/LoadingStory.tsx
@@ -17,7 +17,7 @@ const LoadingPropTypesChapter = {
 
 const LoadingStory = () => (
     <section className="story loading">
-        <Loading />
+        <Loading aria-label="Loading…" />
     </section>
 )
 const LoadingChapter = {
@@ -28,6 +28,7 @@ const LoadingChapter = {
 const LoadingPlaygroundStory = () => (
     <section className="story">
         <Loading
+            aria-label={text('aria-label:', 'Loading…')}
             size={number('size:', 24)}
             spinnerColor={text('Spinner Color:', '#3F82EF')}
             bgColor={text('Background Color:', '#D9E6FB')}