[terra-icon] accessibility upgrade (#3598)

cerner · May 11, 2022 · 9bf69dc · 9bf69dc
1 parent b7b9abb
commit 9bf69dc
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 13 deletions.
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/IconThemeable.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/IconThemeable.jsx
@@ -2030,8 +2030,7 @@ const IconAll = () => (
         </td>
       </tr>
       <tr style={{ backgroundColor: '#EEEEEE' }}>
-<<<<<<< HEAD
-        <td style={cellStyle}><IconVolumeSetDefault height='2em' width='2em' /></td>
+        <td style={cellStyle}><IconVolumeSetDefault a11yLabel="icon" height='2em' width='2em' /></td>
         <td style={cellStyle}>volumeSet_default</td>
         <td style={{ fontWeight: 'bold', padding: '0.5rem' }}>
           <code>
@@ -2040,7 +2039,7 @@ const IconAll = () => (
         </td>
       </tr>
       <tr style={{ backgroundColor: '#EEEEEE' }}>
-        <td style={cellStyle}><IconVolumeSetDecrease height='2em' width='2em' /></td>
+        <td style={cellStyle}><IconVolumeSetDecrease a11yLabel="icon" height='2em' width='2em' /></td>
         <td style={cellStyle}>volumeSet_decrease</td>
         <td style={{ fontWeight: 'bold', padding: '0.5rem' }}>
           <code>
@@ -2058,7 +2057,7 @@ const IconAll = () => (
         </td>
       </tr>
       <tr style={{ backgroundColor: '#EEEEEE' }}>
-        <td style={cellStyle}><IconVolumeSetMute height='2em' width='2em' /></td>
+        <td style={cellStyle}><IconVolumeSetMute a11yLabel="icon" height='2em' width='2em' /></td>
         <td style={cellStyle}>volumeSet_mute</td>
         <td style={{ fontWeight: 'bold', padding: '0.5rem' }}>
           <code>
@@ -2067,7 +2066,7 @@ const IconAll = () => (
         </td>
       </tr>
       <tr style={{ backgroundColor: '#EEEEEE' }}>
-        <td style={cellStyle}><IconPersonConnection height='2em' width='2em' /></td>
+        <td style={cellStyle}><IconPersonConnection a11yLabel="icon" height='2em' width='2em' /></td>
         <td style={cellStyle}>personConnection</td>
         <td style={{ fontWeight: 'bold', padding: '0.5rem' }}>
           <code>
@@ -2076,7 +2075,7 @@ const IconAll = () => (
         </td>
       </tr>
       <tr style={{ backgroundColor: '#EEEEEE' }}>
-        <td style={cellStyle}><IconTrendingUp height='2em' width='2em' /></td>
+        <td style={cellStyle}><IconTrendingUp a11yLabel="icon" height='2em' width='2em' /></td>
         <td style={cellStyle}>trendingUp</td>
         <td style={{ fontWeight: 'bold', padding: '0.5rem' }}>
           <code>
@@ -2085,7 +2084,7 @@ const IconAll = () => (
         </td>
       </tr>
       <tr style={{ backgroundColor: '#EEEEEE' }}>
-        <td style={cellStyle}><IconTrendingDown height='2em' width='2em' /></td>
+        <td style={cellStyle}><IconTrendingDown a11yLabel="icon" height='2em' width='2em' /></td>
         <td style={cellStyle}>trendingDown</td>
         <td style={{ fontWeight: 'bold', padding: '0.5rem' }}>
           <code>
@@ -2094,10 +2093,7 @@ const IconAll = () => (
         </td>
       </tr>
       <tr style={{ backgroundColor: '#EEEEEE' }}>
-        <td style={cellStyle}><IconCircleSymbol height='2em' width='2em' /></td>
-=======
         <td style={cellStyle}><IconCircleSymbol a11yLabel="icon" height='2em' width='2em' /></td>
->>>>>>> [terra-icon] accessibility upgrade (#3598)
         <td style={cellStyle}>circle_symbol</td>
         <td style={{ fontWeight: 'bold', padding: '0.5rem' }}>
           <code>

diff --git a/packages/terra-core-docs/src/terra-dev-site/test/icon/IconAll.module.scss b/packages/terra-core-docs/src/terra-dev-site/test/icon/IconAll.module.scss
@@ -1,8 +1,8 @@
 :local {
   .icon {
     height: 40px;
-    margin: 5px;
     width: 40px;
+    margin: 5px;
   }
 
   .icon-inverse {

diff --git a/packages/terra-icon/CHANGELOG.md b/packages/terra-icon/CHANGELOG.md
@@ -1,6 +1,8 @@
 # Changelog
 
 ## Unreleased
+  * Breaking changes
+    * Updated terra-icon to meet accessibility standards.
 
   * Breaking changes
     * Updated terra-icon to meet accessibility standards.

diff --git a/packages/terra-icon/scripts/src/generate-icons/parseSvg.js b/packages/terra-icon/scripts/src/generate-icons/parseSvg.js
@@ -8,7 +8,7 @@ import Icon from './Icon';
 const parseSvg = filepath => new Promise((resolve) => {
   const source = fs.readFileSync(filepath, 'utf-8');
   const { name } = path.parse(filepath);
-
+  
   const { document } = new JSDOM(source).window;
   const icon = new Icon(name, document.querySelector('svg'));
 

diff --git a/packages/terra-icon/src/IconBase.jsx b/packages/terra-icon/src/IconBase.jsx
@@ -78,7 +78,7 @@ const IconBase = ({
   attributes.height = height;
   attributes.width = width;
   attributes.focusable = focusable;
-
+  
   const svgA11yLabel = React.createElement('title', {}, a11yLabel);
   const svgChildren = new Array(svgA11yLabel).concat(children);
 

diff --git a/packages/terra-icon/src/IconBaseDec.jsx b/packages/terra-icon/src/IconBaseDec.jsx
@@ -50,6 +50,7 @@ const IconBase = ({
   children,
   height,
   width,
+  title,
   focusable,
   ...customProps
 }) => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,6 +50,7 @@ const IconBase = ({ @@
       children,
       height,
       width,
+      title,
       focusable,
       ...customProps
     }) => {
@@ Expand Down @@