From b9a95b38085011d89a92b6331688c11058a9ee8e Mon Sep 17 00:00:00 2001
From: CD Cabrera <ccabrera@redhat.com>
Date: Tue, 19 Jan 2021 14:29:32 -0500
Subject: [PATCH] fix(inventoryList): consistent hide, aria-hidden attributes
 (#555)

* inventoryList, subsInventoryList, consistent hide, aria-hidden
* pagination, consistent hide, aria-hidden
---
 .../__snapshots__/inventoryList.test.js.snap  | 20 ++++++----
 .../__tests__/inventoryList.test.js           | 10 +++--
 src/components/inventoryList/inventoryList.js | 10 ++++-
 .../inventorySubscriptions.test.js.snap       | 40 +++++++++++--------
 .../__tests__/inventorySubscriptions.test.js  |  7 +++-
 .../inventorySubscriptions.js                 | 12 ++++--
 .../__snapshots__/pagination.test.js.snap     |  2 +-
 src/components/pagination/pagination.js       |  1 -
 8 files changed, 66 insertions(+), 36 deletions(-)

diff --git a/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap b/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap
index 1027e9b05..0b624a89b 100644
--- a/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap
+++ b/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap
@@ -226,7 +226,8 @@ exports[`InventoryList Component should handle variations in data: filtered data
     updateOnResize={true}
   >
     <CardHeader
-      className="transparent"
+      aria-hidden={false}
+      className=""
     >
       <CardHeaderMain>
         <ToolbarFieldDisplayName
@@ -240,7 +241,7 @@ exports[`InventoryList Component should handle variations in data: filtered data
           dropDirection="down"
           isCompact={true}
           isDisabled={false}
-          itemCount={0}
+          itemCount={2}
           offset={0}
           onPage={[Function]}
           onPerPage={[Function]}
@@ -307,6 +308,7 @@ exports[`InventoryList Component should handle variations in data: filtered data
     updateOnResize={true}
   >
     <CardFooter
+      aria-hidden={false}
       className=""
     >
       <TableToolbar
@@ -316,7 +318,7 @@ exports[`InventoryList Component should handle variations in data: filtered data
           dropDirection="up"
           isCompact={false}
           isDisabled={false}
-          itemCount={0}
+          itemCount={2}
           offset={0}
           onPage={[Function]}
           onPerPage={[Function]}
@@ -340,7 +342,8 @@ exports[`InventoryList Component should handle variations in data: variable data
     updateOnResize={true}
   >
     <CardHeader
-      className="transparent"
+      aria-hidden={false}
+      className=""
     >
       <CardHeaderMain>
         <ToolbarFieldDisplayName
@@ -354,7 +357,7 @@ exports[`InventoryList Component should handle variations in data: variable data
           dropDirection="down"
           isCompact={true}
           isDisabled={false}
-          itemCount={0}
+          itemCount={2}
           offset={0}
           onPage={[Function]}
           onPerPage={[Function]}
@@ -417,6 +420,7 @@ exports[`InventoryList Component should handle variations in data: variable data
     updateOnResize={true}
   >
     <CardFooter
+      aria-hidden={false}
       className=""
     >
       <TableToolbar
@@ -426,7 +430,7 @@ exports[`InventoryList Component should handle variations in data: variable data
           dropDirection="up"
           isCompact={false}
           isDisabled={false}
-          itemCount={0}
+          itemCount={2}
           offset={0}
           onPage={[Function]}
           onPerPage={[Function]}
@@ -450,6 +454,7 @@ exports[`InventoryList Component should render a non-connected component: non-co
     updateOnResize={true}
   >
     <CardHeader
+      aria-hidden={true}
       className="transparent"
     >
       <CardHeaderMain>
@@ -505,7 +510,8 @@ exports[`InventoryList Component should render a non-connected component: non-co
     updateOnResize={true}
   >
     <CardFooter
-      className=""
+      aria-hidden={true}
+      className="transparent"
     >
       <TableToolbar
         isFooter={true}
diff --git a/src/components/inventoryList/__tests__/inventoryList.test.js b/src/components/inventoryList/__tests__/inventoryList.test.js
index 245bbce99..5cc3157c1 100644
--- a/src/components/inventoryList/__tests__/inventoryList.test.js
+++ b/src/components/inventoryList/__tests__/inventoryList.test.js
@@ -41,6 +41,7 @@ describe('InventoryList Component', () => {
         { lorem: 'ipsum', dolor: 'sit' },
         { lorem: 'sit', dolor: 'amet' }
       ],
+      itemCount: 2,
       isDisabled: true
     };
     const component = shallow(<InventoryList {...props} />);
@@ -58,7 +59,8 @@ describe('InventoryList Component', () => {
       listData: [
         { lorem: 'ipsum', dolor: 'sit' },
         { lorem: 'sit', dolor: 'amet' }
-      ]
+      ],
+      itemCount: 2
     };
 
     const component = shallow(<InventoryList {...props} />);
@@ -78,7 +80,8 @@ describe('InventoryList Component', () => {
         [RHSM_API_QUERY_TYPES.OFFSET]: 0
       },
       productId: 'lorem',
-      listData: [{ lorem: 'sit', dolor: 'amet', numberOfGuests: 1 }]
+      listData: [{ lorem: 'sit', dolor: 'amet', numberOfGuests: 1 }],
+      itemCount: 1
     };
 
     const component = shallow(<InventoryList {...props} />);
@@ -115,7 +118,8 @@ describe('InventoryList Component', () => {
       listData: [
         { lorem: 'ipsum', dolor: 'sit' },
         { lorem: 'sit', dolor: 'amet' }
-      ]
+      ],
+      itemCount: 2
     };
 
     const component = shallow(<InventoryList {...props} />);
diff --git a/src/components/inventoryList/inventoryList.js b/src/components/inventoryList/inventoryList.js
index 7860a47bf..7f080f10e 100644
--- a/src/components/inventoryList/inventoryList.js
+++ b/src/components/inventoryList/inventoryList.js
@@ -222,7 +222,10 @@ class InventoryList extends React.Component {
     return (
       <Card className="curiosity-inventory-card">
         <MinHeight key="headerMinHeight" updateOnContent>
-          <CardHeader className={(error && 'hidden') || (!itemCount && 'transparent') || ''}>
+          <CardHeader
+            className={(error && 'hidden') || (!itemCount && 'transparent') || ''}
+            aria-hidden={error || !itemCount || false}
+          >
             <CardHeaderMain>
               <ToolbarFieldDisplayName viewId={viewId} />
             </CardHeaderMain>
@@ -260,7 +263,10 @@ class InventoryList extends React.Component {
           </CardBody>
         </MinHeight>
         <MinHeight key="footerMinHeight" updateOnContent>
-          <CardFooter className={(error && 'blur') || ''}>
+          <CardFooter
+            className={(error && 'hidden') || (!itemCount && 'transparent') || ''}
+            aria-hidden={error || !itemCount || false}
+          >
             <TableToolbar isFooter>
               <Pagination
                 dropDirection="up"
diff --git a/src/components/inventorySubscriptions/__tests__/__snapshots__/inventorySubscriptions.test.js.snap b/src/components/inventorySubscriptions/__tests__/__snapshots__/inventorySubscriptions.test.js.snap
index 8bc7d4916..27beba990 100644
--- a/src/components/inventorySubscriptions/__tests__/__snapshots__/inventorySubscriptions.test.js.snap
+++ b/src/components/inventorySubscriptions/__tests__/__snapshots__/inventorySubscriptions.test.js.snap
@@ -118,15 +118,16 @@ exports[`InventorySubscriptions Component should handle variations in data: filt
     updateOnContent={true}
     updateOnResize={true}
   >
-    <CardHeader>
-      <CardActions
-        className=""
-      >
+    <CardHeader
+      aria-hidden={false}
+      className=""
+    >
+      <CardActions>
         <Pagination
           dropDirection="down"
           isCompact={true}
           isDisabled={false}
-          itemCount={0}
+          itemCount={2}
           offset={0}
           onPage={[Function]}
           onPerPage={[Function]}
@@ -191,6 +192,7 @@ exports[`InventorySubscriptions Component should handle variations in data: filt
     updateOnResize={true}
   >
     <CardFooter
+      aria-hidden={false}
       className=""
     >
       <TableToolbar
@@ -200,7 +202,7 @@ exports[`InventorySubscriptions Component should handle variations in data: filt
           dropDirection="up"
           isCompact={false}
           isDisabled={false}
-          itemCount={0}
+          itemCount={2}
           offset={0}
           onPage={[Function]}
           onPerPage={[Function]}
@@ -223,15 +225,16 @@ exports[`InventorySubscriptions Component should handle variations in data: vari
     updateOnContent={true}
     updateOnResize={true}
   >
-    <CardHeader>
-      <CardActions
-        className=""
-      >
+    <CardHeader
+      aria-hidden={false}
+      className=""
+    >
+      <CardActions>
         <Pagination
           dropDirection="down"
           isCompact={true}
           isDisabled={false}
-          itemCount={0}
+          itemCount={2}
           offset={0}
           onPage={[Function]}
           onPerPage={[Function]}
@@ -292,6 +295,7 @@ exports[`InventorySubscriptions Component should handle variations in data: vari
     updateOnResize={true}
   >
     <CardFooter
+      aria-hidden={false}
       className=""
     >
       <TableToolbar
@@ -301,7 +305,7 @@ exports[`InventorySubscriptions Component should handle variations in data: vari
           dropDirection="up"
           isCompact={false}
           isDisabled={false}
-          itemCount={0}
+          itemCount={2}
           offset={0}
           onPage={[Function]}
           onPerPage={[Function]}
@@ -324,10 +328,11 @@ exports[`InventorySubscriptions Component should render a non-connected componen
     updateOnContent={true}
     updateOnResize={true}
   >
-    <CardHeader>
-      <CardActions
-        className=""
-      >
+    <CardHeader
+      aria-hidden={true}
+      className="transparent"
+    >
+      <CardActions>
         <Pagination
           dropDirection="down"
           isCompact={true}
@@ -373,7 +378,8 @@ exports[`InventorySubscriptions Component should render a non-connected componen
     updateOnResize={true}
   >
     <CardFooter
-      className=""
+      aria-hidden={true}
+      className="transparent"
     >
       <TableToolbar
         isFooter={true}
diff --git a/src/components/inventorySubscriptions/__tests__/inventorySubscriptions.test.js b/src/components/inventorySubscriptions/__tests__/inventorySubscriptions.test.js
index 4913ae76f..ab5223086 100644
--- a/src/components/inventorySubscriptions/__tests__/inventorySubscriptions.test.js
+++ b/src/components/inventorySubscriptions/__tests__/inventorySubscriptions.test.js
@@ -40,6 +40,7 @@ describe('InventorySubscriptions Component', () => {
         { lorem: 'ipsum', dolor: 'sit' },
         { lorem: 'sit', dolor: 'amet' }
       ],
+      itemCount: 2,
       isDisabled: true
     };
     const component = shallow(<InventorySubscriptions {...props} />);
@@ -57,7 +58,8 @@ describe('InventorySubscriptions Component', () => {
       listData: [
         { lorem: 'ipsum', dolor: 'sit' },
         { lorem: 'sit', dolor: 'amet' }
-      ]
+      ],
+      itemCount: 2
     };
 
     const component = shallow(<InventorySubscriptions {...props} />);
@@ -80,7 +82,8 @@ describe('InventorySubscriptions Component', () => {
       listData: [
         { lorem: 'ipsum', dolor: 'sit' },
         { lorem: 'sit', dolor: 'amet' }
-      ]
+      ],
+      itemCount: 2
     };
 
     const component = shallow(<InventorySubscriptions {...props} />);
diff --git a/src/components/inventorySubscriptions/inventorySubscriptions.js b/src/components/inventorySubscriptions/inventorySubscriptions.js
index b68e079c8..bb94b7b9b 100644
--- a/src/components/inventorySubscriptions/inventorySubscriptions.js
+++ b/src/components/inventorySubscriptions/inventorySubscriptions.js
@@ -200,8 +200,11 @@ class InventorySubscriptions extends React.Component {
     return (
       <Card className="curiosity-inventory-card">
         <MinHeight key="headerMinHeight" updateOnContent>
-          <CardHeader>
-            <CardActions className={(error && 'blur') || ''}>
+          <CardHeader
+            className={(error && 'hidden') || (!itemCount && 'transparent') || ''}
+            aria-hidden={error || !itemCount || false}
+          >
+            <CardActions>
               <Pagination
                 isCompact
                 isDisabled={pending || error}
@@ -235,7 +238,10 @@ class InventorySubscriptions extends React.Component {
           </CardBody>
         </MinHeight>
         <MinHeight key="footerMinHeight" updateOnContent>
-          <CardFooter className={(error && 'blur') || ''}>
+          <CardFooter
+            className={(error && 'hidden') || (!itemCount && 'transparent') || ''}
+            aria-hidden={error || !itemCount || false}
+          >
             <TableToolbar isFooter>
               <Pagination
                 dropDirection="up"
diff --git a/src/components/pagination/__tests__/__snapshots__/pagination.test.js.snap b/src/components/pagination/__tests__/__snapshots__/pagination.test.js.snap
index 9b7d176ce..fac5fd452 100644
--- a/src/components/pagination/__tests__/__snapshots__/pagination.test.js.snap
+++ b/src/components/pagination/__tests__/__snapshots__/pagination.test.js.snap
@@ -18,7 +18,7 @@ Object {
 
 exports[`Pagination Component should render a non-connected component: non-connected 1`] = `
 <Pagination
-  className="hidden"
+  className=""
   defaultToFullPage={false}
   dropDirection="down"
   firstPage={1}
diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
index ea117e711..f66e5633d 100644
--- a/src/components/pagination/pagination.js
+++ b/src/components/pagination/pagination.js
@@ -41,7 +41,6 @@ const Pagination = ({
   variant
 }) => (
   <PfPagination
-    className={(!itemCount && 'hidden') || ''}
     dropDirection={dropDirection}
     isCompact={isCompact}
     isDisabled={isDisabled || !itemCount}