fix(config): ent-3230 unlimited quantity, use aria-label (#924)

* chartIcon, pass any props * config, rhel, openshift, rhosak use aria-label
RedHatInsights · Apr 19, 2022 · 07092e7 · 07092e7
1 parent d061078
commit 07092e7
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 16 deletions.
diff --git a/src/components/chart/__tests__/__snapshots__/chartIcon.test.js.snap b/src/components/chart/__tests__/__snapshots__/chartIcon.test.js.snap
@@ -49,6 +49,7 @@ exports[`ChartIcon Component should handle basic icons, variations in settings:
   className="curiosity-chartarea__icon curiosity-chartarea__icon-eye"
 >
   <EyeIcon
+    aria-label="hello world"
     color="currentColor"
     noVerticalAlign={false}
     size="md"
@@ -75,7 +76,6 @@ exports[`ChartIcon Component should handle basic icons, variations in settings:
   className="curiosity-chartarea__icon curiosity-chartarea__icon-infinity"
 >
   <span
-    aria-label="lorem ipsum infinity"
     className="curiosity-icon__f-infinity"
     style={
       Object {

diff --git a/src/components/chart/__tests__/chartIcon.test.js b/src/components/chart/__tests__/chartIcon.test.js
@@ -15,7 +15,8 @@ describe('ChartIcon Component', () => {
       {
         size: 'md',
         symbol: 'eye',
-        title: 'lorem ipsum eye'
+        title: 'lorem ipsum eye',
+        'aria-label': 'hello world'
       },
       {
         size: 'md',

diff --git a/src/components/chart/chartIcon.js b/src/components/chart/chartIcon.js
@@ -34,12 +34,12 @@ const getSize = size => {
  * @param {string} props.symbol
  * @param {string} props.size
  * @param {string} props.title
- * @returns {Node}
+ * @returns {React.ReactNode}
  */
-const ChartIcon = ({ fill, symbol, size, title }) => {
-  const svgProps = {};
-  const iconProps = { size, title };
-  const fontProps = { style: { fontSize: getSize(size) }, title, 'aria-label': title };
+const ChartIcon = ({ fill, symbol, size, title, ...props }) => {
+  const svgProps = { ...props };
+  const iconProps = { size, title, ...props };
+  const fontProps = { style: { fontSize: getSize(size) }, title, ...props };
   const emSvgSize = getSize(size);
 
   if (title) {
@@ -106,13 +106,23 @@ const ChartIcon = ({ fill, symbol, size, title }) => {
   return <span className={`curiosity-chartarea__icon curiosity-chartarea__icon-${symbol}`}>{setIcon()}</span>;
 };
 
+/**
+ * Prop types.
+ *
+ * @type {{symbol: string, size: string, fill: string, title: string}}
+ */
 ChartIcon.propTypes = {
   fill: PropTypes.string,
   size: PropTypes.oneOf([...Object.keys(IconSize)]),
   symbol: PropTypes.oneOf(['dash', 'eye', 'eyeSlash', 'infinity', 'square', 'threshold']),
   title: PropTypes.string
 };
 
+/**
+ * Default props.
+ *
+ * @type {{symbol: string, size: string, fill: null, title: null}}
+ */
 ChartIcon.defaultProps = {
   fill: null,
   size: 'sm',

diff --git a/src/config/__tests__/__snapshots__/product.openshiftContainer.test.js.snap b/src/config/__tests__/__snapshots__/product.openshiftContainer.test.js.snap
@@ -298,10 +298,11 @@ Object {
         position="top"
       >
         <ChartIcon
+          aria-label="t(curiosity-inventory.label, {\\"context\\":\\"hasInfiniteQuantity\\"})"
           fill={null}
           size="sm"
           symbol="infinity"
-          title="t(curiosity-inventory.label, {\\"context\\":\\"hasInfiniteQuantity\\"})"
+          title={null}
         />
       </Tooltip>,
     },
@@ -387,10 +388,11 @@ Object {
         position="top"
       >
         <ChartIcon
+          aria-label="t(curiosity-inventory.label, {\\"context\\":\\"hasInfiniteQuantity\\"})"
           fill={null}
           size="sm"
           symbol="infinity"
-          title="t(curiosity-inventory.label, {\\"context\\":\\"hasInfiniteQuantity\\"})"
+          title={null}
         />
       </Tooltip>,
     },

diff --git a/src/config/__tests__/__snapshots__/product.rhel.test.js.snap b/src/config/__tests__/__snapshots__/product.rhel.test.js.snap
@@ -330,10 +330,11 @@ Object {
         position="top"
       >
         <ChartIcon
+          aria-label="t(curiosity-inventory.label, {\\"context\\":\\"hasInfiniteQuantity\\"})"
           fill={null}
           size="sm"
           symbol="infinity"
-          title="t(curiosity-inventory.label, {\\"context\\":\\"hasInfiniteQuantity\\"})"
+          title={null}
         />
       </Tooltip>,
     },
@@ -419,10 +420,11 @@ Object {
         position="top"
       >
         <ChartIcon
+          aria-label="t(curiosity-inventory.label, {\\"context\\":\\"hasInfiniteQuantity\\"})"
           fill={null}
           size="sm"
           symbol="infinity"
-          title="t(curiosity-inventory.label, {\\"context\\":\\"hasInfiniteQuantity\\"})"
+          title={null}
         />
       </Tooltip>,
     },

diff --git a/src/config/__tests__/__snapshots__/product.rhosak.test.js.snap b/src/config/__tests__/__snapshots__/product.rhosak.test.js.snap
@@ -278,10 +278,11 @@ Object {
         position="top"
       >
         <ChartIcon
+          aria-label="t(curiosity-inventory.label, {\\"context\\":\\"hasInfiniteQuantity\\"})"
           fill={null}
           size="sm"
           symbol="infinity"
-          title="t(curiosity-inventory.label, {\\"context\\":\\"hasInfiniteQuantity\\"})"
+          title={null}
         />
       </Tooltip>,
     },
@@ -367,10 +368,11 @@ Object {
         position="top"
       >
         <ChartIcon
+          aria-label="t(curiosity-inventory.label, {\\"context\\":\\"hasInfiniteQuantity\\"})"
           fill={null}
           size="sm"
           symbol="infinity"
-          title="t(curiosity-inventory.label, {\\"context\\":\\"hasInfiniteQuantity\\"})"
+          title={null}
         />
       </Tooltip>,
     },

diff --git a/src/config/product.openshiftContainer.js b/src/config/product.openshiftContainer.js
@@ -203,7 +203,7 @@ const config = {
           const content = translate('curiosity-inventory.label', { context: ['hasInfiniteQuantity', uom?.value] });
           return (
             <Tooltip content={content}>
-              <ChartIcon symbol="infinity" title={content} />
+              <ChartIcon symbol="infinity" aria-label={content} />
             </Tooltip>
           );
         }

diff --git a/src/config/product.rhel.js b/src/config/product.rhel.js
@@ -219,7 +219,7 @@ const config = {
           const content = translate('curiosity-inventory.label', { context: ['hasInfiniteQuantity', uom?.value] });
           return (
             <Tooltip content={content}>
-              <ChartIcon symbol="infinity" title={content} />
+              <ChartIcon symbol="infinity" aria-label={content} />
             </Tooltip>
           );
         }

diff --git a/src/config/product.rhosak.js b/src/config/product.rhosak.js
@@ -221,7 +221,7 @@ const config = {
           const content = translate('curiosity-inventory.label', { context: ['hasInfiniteQuantity', uom?.value] });
           return (
             <Tooltip content={content}>
-              <ChartIcon symbol="infinity" title={content} />
+              <ChartIcon symbol="infinity" aria-label={content} />
             </Tooltip>
           );
         }