fix(tableEmpty): sw-1537 aria-label attribute format (RedHatInsights#…

…1196)
cdcabrera · Sep 22, 2023 · dfb0460 · dfb0460
1 parent ec7c9dd
commit dfb0460
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/src/components/README.md b/src/components/README.md
@@ -5748,6 +5748,8 @@ Render an empty table.
 <tr>
     <td>props</td><td><code>object</code></td>
     </tr><tr>
+    <td>props.ariaLabel</td><td><code>string</code></td>
+    </tr><tr>
     <td>props.icon</td><td><code>React.ReactNode</code> | <code>function</code></td>
     </tr><tr>
     <td>props.message</td><td><code>React.ReactNode</code></td>

diff --git a/src/components/table/__tests__/__snapshots__/tableEmpty.test.js.snap b/src/components/table/__tests__/__snapshots__/tableEmpty.test.js.snap
@@ -2,7 +2,9 @@
 
 exports[`TableEmpty Component should have fallback checks for certain props: fallback display 1`] = `
 <EmptyTable>
-  <table />
+  <table
+    aria-label={null}
+  />
   <EmptyState
     variant="small"
   >
@@ -24,7 +26,9 @@ exports[`TableEmpty Component should have fallback checks for certain props: fal
 
 exports[`TableEmpty Component should render a basic component: basic 1`] = `
 <EmptyTable>
-  <table />
+  <table
+    aria-label={null}
+  />
   <EmptyState
     variant="small"
   >

diff --git a/src/components/table/tableEmpty.js b/src/components/table/tableEmpty.js
@@ -13,16 +13,17 @@ import { EmptyTable as PlatformEmptyTableWrapper } from '@redhat-cloud-services/
  * Render an empty table.
  *
  * @param {object} props
+ * @param {string} props.ariaLabel
  * @param {React.ReactNode|Function} props.icon
  * @param {React.ReactNode} props.message
  * @param {string} props.tableHeading
  * @param {React.ReactNode} props.title
  * @param {string} props.variant
  * @returns {React.ReactNode}
  */
-const TableEmpty = ({ icon, message, tableHeading, title, variant, ...props }) => (
+const TableEmpty = ({ ariaLabel, icon, message, tableHeading, title, variant, ...props }) => (
   <PlatformEmptyTableWrapper>
-    <table {...props} />
+    <table aria-label={ariaLabel} {...props} />
     <EmptyState variant={variant}>
       {icon && <EmptyStateIcon icon={icon} />}
       <Title headingLevel={tableHeading} size="lg">
@@ -37,9 +38,10 @@ const TableEmpty = ({ icon, message, tableHeading, title, variant, ...props }) =
  * Prop types.
  *
  * @type {{icon: React.ReactNode|Function, variant: string, message: React.ReactNode, title: React.ReactNode,
- *     tableHeading: string}}
+ *     tableHeading: string, ariaLabel: string}}
  */
 TableEmpty.propTypes = {
+  ariaLabel: PropTypes.string,
   icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   message: PropTypes.node.isRequired,
   tableHeading: PropTypes.string,
@@ -50,9 +52,10 @@ TableEmpty.propTypes = {
 /**
  * Default props.
  *
- * @type {{icon: null, variant: EmptyStateVariant.small, tableHeading: string}}
+ * @type {{icon: null, variant: EmptyStateVariant.small, tableHeading: string, ariaLabel: null}}
  */
 TableEmpty.defaultProps = {
+  ariaLabel: null,
   icon: SearchIcon,
   tableHeading: 'h2',
   variant: EmptyStateVariant.small