fix(inventoryList): consistent hide, aria-hidden attributes (#555)

* inventoryList, subsInventoryList, consistent hide, aria-hidden * pagination, consistent hide, aria-hidden
RedHatInsights · Jan 20, 2021 · 6c20f9e · 6c20f9e
1 parent 8ab3b56
commit 6c20f9e
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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/...onents/inventorySubscriptions/__tests__/__snapshots__/inventorySubscriptions.test.js.snap b/...onents/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
@@ -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
@@ -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
@@ -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
@@ -41,7 +41,6 @@ const Pagination = ({
   variant
 }) => (
   <PfPagination
-    className={(!itemCount && 'hidden') || ''}
     dropDirection={dropDirection}
     isCompact={isCompact}
     isDisabled={isDisabled || !itemCount}