Merge pull request #104 from glorious-codes/improve_fetcher_a11y

Improve Fetcher accessibility

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glorious/taslonic",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "A glorious UI library available for React and Vue",
   "files": [
     "react/**",

src/react/components/fetcher/fetcher.js

@@ -61,7 +61,13 @@ export class Fetcher extends Component {
       <div className={fetcherService.buildCssClasses({ fetching, fetchFailed })}>
         { handleLoader(fetching) }
         { handleBanner(banner, () => this.setBanner(null)) }
-        <div className="t-fetcher-content" aria-live="polite" aria-busy={fetching} data-fetcher-content>
+        <div
+          className="t-fetcher-content"
+          aria-live="polite"
+          aria-busy={fetching}
+          aria-hidden={fetchFailed || fetching}
+          data-fetcher-content
+        >
           { this.props.children }
         </div>
       </div>

src/react/components/fetcher/fetcher.test.js

@@ -39,18 +39,21 @@ describe('Fetcher', () => {
     const onFetch = simulateFetch('success', { shouldAbort: true });
     const wrapper = mountComponent({ onFetch });
     expect(wrapper.find(Loader).length).toEqual(1);
+    expect(wrapper.find('[data-fetcher-content]').prop('aria-hidden')).toEqual(true);
   });
 
   it('should hide loader on fetch success', () => {
     const onFetch = simulateFetch('success');
     const wrapper = mountComponent({ onFetch });
     expect(wrapper.find(Loader).length).toEqual(0);
+    expect(wrapper.find('[data-fetcher-content]').prop('aria-hidden')).toEqual(undefined);
   });
 
   it('should show banner on fetch error', () => {
     const onFetch = simulateFetch('error');
     const wrapper = mountComponent({ onFetch });
     expect(wrapper.find('[data-banner-content]').text()).toEqual('Something went wrong. Please, try again.');
+    expect(wrapper.find('[data-fetcher-content]').prop('aria-hidden')).toEqual(true);
   });
 
   it('should optionally show banner with custom message on fetch error', () => {

src/vue/components/fetcher/fetcher.html

@@ -10,7 +10,13 @@
   >
     {{ banner.message }}
   </t-banner>
-  <div class="t-fetcher-content" aria-live="polite" :aria-busy="isBusy" data-fetcher-content>
+  <div
+    class="t-fetcher-content"
+    aria-live="polite"
+    :aria-busy="isBusy"
+    :aria-hidden="isContentHidden"
+    data-fetcher-content
+  >
     <slot></slot>
   </div>
 </div>

src/vue/components/fetcher/fetcher.js

@@ -67,6 +67,9 @@ export const tFetcher = {
     },
     isBusy(){
       return this.isFetching ? 'true' : 'false';
+    },
+    isContentHidden(){
+      return this.fetchFailed || this.isFetching ? 'true' : 'false';
     }
   },
   template

src/vue/components/fetcher/fetcher.test.js

@@ -29,18 +29,21 @@ describe('Fetcher', () => {
     const onFetch = simulateFetch('success', { shouldAbort: true });
     const wrapper = mountComponent({ onFetch });
     expect(wrapper.findAllComponents(tLoader).length).toEqual(1);
+    expect(wrapper.find('[data-fetcher-content]').attributes('aria-hidden')).toEqual('true');
   });
 
   it('should hide loader on fetch success', () => {
     const onFetch = simulateFetch('success');
     const wrapper = mountComponent({ onFetch });
     expect(wrapper.findAllComponents(tLoader).length).toEqual(0);
+    expect(wrapper.find('[data-fetcher-content]').attributes('aria-hidden')).toEqual('false');
   });
 
   it('should show banner on fetch error', () => {
     const onFetch = simulateFetch('error');
     const wrapper = mountComponent({ onFetch });
     expect(wrapper.find('[data-banner-content]').text()).toEqual('Something went wrong. Please, try again.');
+    expect(wrapper.find('[data-fetcher-content]').attributes('aria-hidden')).toEqual('true');
   });
 
   it('should optionally show banner with custom message on fetch error', () => {