Lighthouse improve homepage accessibility (codesandbox#2034)

dutiyesh · SaraVieira · commit f72c8475e9c2 · 2019-06-11T13:36:14.000-06:00
* Provide discernible name to links

* Add label to dependency search input field

* Add alt attribute to images

* Remove duplicate ids

* Minify Embed svg icon

* Remove duplicate ids from Code deployment Cube animation
diff --git a/packages/homepage/src/components/Companies.js b/packages/homepage/src/components/Companies.js
@@ -20,7 +20,12 @@ export default ({ companies }) => (
   <Grid>
     {shuffleArray(companies).map(({ node: company }) => (
       <div>
-        <a href={company.link} target="_blank" rel="noopener noreferrer">
+        <a
+          href={company.link}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={`${company.name} is using CodeSandbox`}
+        >
           <img height="150" src={company.logoURL} alt={company.name} />
         </a>
       </div>
diff --git a/packages/homepage/src/screens/home/CycleFeature/Cube.js b/packages/homepage/src/screens/home/CycleFeature/Cube.js
@@ -55,37 +55,37 @@ export default class GlowCube extends React.Component<Props> {
             style={{ boxShadow: `0px 0px 100px ${color.clearer(0.3)()}` }}
             rotate="rotateX(90deg)"
             size={size}
-            id={`${id}-side`}
+            className={`${id}-side`}
           />
           <Side
             style={{ boxShadow: `0px 0px 150px ${color.clearer(0.3)()}` }}
             rotate="rotateX(-90deg)"
             size={size}
-            id={`${id}-side`}
+            className={`${id}-side`}
           />
           <Side
             style={{ boxShadow: `0px 0px 150px ${color.clearer(0.3)()}` }}
             rotate="rotateY(0deg)"
             size={size}
-            id={`${id}-side`}
+            className={`${id}-side`}
           />
           <Side
             style={{ boxShadow: `0px 0px 150px ${color.clearer(0.3)()}` }}
             rotate="rotateY(-180deg)"
             size={size}
-            id={`${id}-side`}
+            className={`${id}-side`}
           />
           <Side
             style={{ boxShadow: `0px 0px 150px ${color.clearer(0.3)()}` }}
             rotate="rotateY(-90deg)"
             size={size}
-            id={`${id}-side`}
+            className={`${id}-side`}
           />
           <Side
             style={{ boxShadow: `0px 0px 150px ${color.clearer(0.3)()}` }}
             rotate="rotateY(90deg)"
             size={size}
-            id={`${id}-side`}
+            className={`${id}-side`}
           />
         </Sides>
       </Cube>
diff --git a/packages/homepage/src/screens/home/CycleFeature/index.js b/packages/homepage/src/screens/home/CycleFeature/index.js
@@ -207,7 +207,7 @@ export default class CycleFeatures extends React.PureComponent {
         transformOrigin: '50% 50%',
         position: 'absolute',
       })
-      .set('#main-cube-side', {
+      .set('.main-cube-side', {
         backgroundColor: Theme.secondary.clearer(0.2)(),
         zIndex: 1,
         boxShadow: `0px 0px 150px ${Theme.secondary()}`,
@@ -253,7 +253,7 @@ export default class CycleFeatures extends React.PureComponent {
         },
         'step1'
       )
-      .set('#main-cube-side', { backgroundColor: Theme.primary.clearer(0.2)() })
+      .set('.main-cube-side', { backgroundColor: Theme.primary.clearer(0.2)() })
       .to('#addition-cube', 0.6, {
         ease: Power2.easeOut,
         y: -45,
@@ -268,7 +268,7 @@ export default class CycleFeatures extends React.PureComponent {
         '-=0.6'
       )
       .to(
-        '#main-cube-side',
+        '.main-cube-side',
         0.2,
         {
           boxShadow: `0px 0px 150px ${Theme.primary()}`,
@@ -311,7 +311,7 @@ export default class CycleFeatures extends React.PureComponent {
         },
         '-=0.2'
       )
-      .to('#main-cube-side', 0.7, {
+      .to('.main-cube-side', 0.7, {
         backgroundColor: Theme.secondary.clearer(0.2)(),
         boxShadow: `0px 0px 150px ${Theme.secondary()}`,
         ease: Power2.easeInOut,
@@ -441,19 +441,15 @@ export default class CycleFeatures extends React.PureComponent {
                 rel="noopener noreferrer"
               >
                 <span>github.com/</span>
-                <AddedUrl id="added-url">
-                  reduxjs/redux/tree/master/examples/todos
-                </AddedUrl>
+                <AddedUrl>reduxjs/redux/tree/master/examples/todos</AddedUrl>
               </AddressBar>
               <AddressBar
                 href="/s/github/reduxjs/redux/tree/master/examples/todos"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 <span>codesandbox.io/s/github/</span>
-                <AddedUrl id="added-url">
-                  reduxjs/redux/tree/master/examples/todos
-                </AddedUrl>
+                <AddedUrl>reduxjs/redux/tree/master/examples/todos</AddedUrl>
               </AddressBar>
             </ImportContainer>
 
@@ -463,6 +459,7 @@ export default class CycleFeatures extends React.PureComponent {
                 href="https://csb-921ywn9qrw-emlplxhibt.now.sh/"
                 target="_blank"
                 rel="noopener noreferrer"
+                aria-label="Open deployed sandbox"
               >
                 <span id="progress-text" style={{ textAlign: 'center' }}>
                   Deploying...
diff --git a/packages/homepage/src/screens/home/ExtraFeatures/VSCode.js b/packages/homepage/src/screens/home/ExtraFeatures/VSCode.js
@@ -4,14 +4,8 @@ import React from 'react';
 export default () => (
   <IconBase viewBox="0 0 435 445">
     <g>
-      <path
-        d="M82.255,191.38 L22.546,130.798 L46.776,120.414 L105.62,168.008 L208.597,66.762 L268.306,95.319 L268.306,287.428 L208.597,315.119 L106.485,216.469 L45.045,262.333 L22.546,250.218 L82.255,191.38 Z M207.731,241.563 L207.731,140.317 L145.426,190.94 L207.731,241.563 Z"
-        id="Shape"
-      />
-      <polygon
-        id="Shape"
-        points="0.046 331.56 322.823 380.885 322.823 0.995 434.454 52.051 434.454 398.193 324.554 444.922"
-      />
+      <path d="M82.255,191.38 L22.546,130.798 L46.776,120.414 L105.62,168.008 L208.597,66.762 L268.306,95.319 L268.306,287.428 L208.597,315.119 L106.485,216.469 L45.045,262.333 L22.546,250.218 L82.255,191.38 Z M207.731,241.563 L207.731,140.317 L145.426,190.94 L207.731,241.563 Z" />
+      <polygon points="0.046 331.56 322.823 380.885 322.823 0.995 434.454 52.051 434.454 398.193 324.554 444.922" />
     </g>
   </IconBase>
 );
diff --git a/packages/homepage/src/screens/home/NPMFeature/EmbedAnimation/index.js b/packages/homepage/src/screens/home/NPMFeature/EmbedAnimation/index.js
@@ -81,24 +81,28 @@ export default class EmbedAnimation extends React.PureComponent {
             this.vue = el;
           }}
           src={vueSvg}
+          alt="VueJS"
         />
         <AbsoluteImage
           ref={el => {
             this.egghead = el;
           }}
           src={eggheadSvg}
+          alt="Egghead.io"
         />
         <AbsoluteImage
           ref={el => {
             this.medium = el;
           }}
           src={mediumSvg}
+          alt="Medium"
         />
         <AbsoluteImage
           ref={el => {
             this.codesandbox = el;
           }}
           src={codesandboxSvg}
+          alt="CodeSandbox Editor"
         />
       </Relative>
     );
diff --git a/packages/homepage/src/screens/home/NPMFeature/EmbedIcon.js b/packages/homepage/src/screens/home/NPMFeature/EmbedIcon.js
@@ -4,53 +4,11 @@ import IconBase from 'react-icons/lib/IconBase';
 
 export default () => (
   <IconBase x="0px" y="0px" viewBox="0 0 379 233">
-    <g id="Page-1" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
-      <g id="Artboard" fillRule="nonzero" fill="#d3f2ff">
-        <g id="Embed">
-          <g id="Layer_2">
-            <polygon
-              id="Shape"
-              points="24.849 114.232 19.883 117.176 24.849 120.002 64.866 141.554 64.866 173.469 0.24 130.248 0.24 103.75 64.866 60.529 64.866 92.326"
-            />
-            <polygon
-              id="Shape"
-              points="318.688 93.197 318.688 63.809 378.417 103.755 378.417 128.245 318.688 168.191 318.688 138.694 355.673 118.776 360.262 116.164 355.673 113.443"
-            />
-            <g id="Group" transform="translate(90.000000, 0.000000)">
-              <polyline
-                id="Shape"
-                points="152.722 197.322 152.722 147.107 196.242 121.888 196.242 172.177 152.722 197.322"
-              />
-              <polyline
-                id="Shape"
-                points="53.573 147.961 10.786 123.156 10.786 172.766 53.573 197.696 53.573 147.961"
-              />
-              <polyline
-                id="Shape"
-                points="103.49 60.53 147 35.283 103.509 9.925 59.84 35.368 103.49 60.53"
-              />
-              <g>
-                <polygon
-                  id="Shape"
-                  points="108 225 94 225 94 112.479 190.246 56.7 197.429 70.087 108 121.403"
-                />
-                <rect
-                  id="Rectangle-path"
-                  transform="translate(57.093009, 90.321336) rotate(29.913306) translate(-57.093009, -90.321336) "
-                  x="3.68183546"
-                  y="82.5921657"
-                  width="106.822346"
-                  height="15.4583395"
-                />
-                <path
-                  d="M100.486,232.884 L0,175.181 L0,59.226 L100.491,0.749 L201,58.979 L201,174.996 L100.486,232.884 Z M16,166.233 L100.975,215.051 L186,166.061 L186,67.887 L101.009,18.625 L16,68.115 L16,166.233 Z"
-                  id="Shape"
-                />
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
+    <g fillRule="nonzero" fill="#d3f2ff">
+      <path d="M24.849 114.232l-4.966 2.944 4.966 2.826 40.017 21.552v31.915L.24 130.248V103.75l64.626-43.221v31.797zM318.688 93.197V63.809l59.729 39.946v24.49l-59.729 39.946v-29.497l36.985-19.918 4.589-2.612-4.589-2.721zM242.722 197.322v-50.215l43.52-25.219v50.289l-43.52 25.145M143.573 147.961l-42.787-24.805v49.61l42.787 24.93v-49.735M193.49 60.53L237 35.283 193.509 9.925 149.84 35.368l43.65 25.162" />
+      <path d="M198 225h-14V112.479L280.246 56.7l7.183 13.387L198 121.403z" />
+      <path d="M104.652 56.986l92.591 53.271-7.709 13.399-92.59-53.271z" />
+      <path d="M190.486 232.884L90 175.181V59.226L190.491.749 291 58.979v116.017l-100.514 57.888zM106 166.233l84.975 48.818L276 166.061V67.887l-84.991-49.262L106 68.115v98.118z" />
     </g>
   </IconBase>
 );
diff --git a/packages/homepage/src/screens/home/NPMFeature/SearchInput/Input.js b/packages/homepage/src/screens/home/NPMFeature/SearchInput/Input.js
@@ -47,6 +47,7 @@ const SearchInput = ({ searchQuery }) => {
         onChange={onChange}
         placeholder="Search for a dependency"
         value={query}
+        aria-label="Search for a dependency"
       />
 
       <Icon />
diff --git a/packages/homepage/src/screens/home/Users/index.js b/packages/homepage/src/screens/home/Users/index.js
@@ -51,6 +51,7 @@ export default () => (
               logoURL
               link
               pinned
+              name
             }
           }
         }

Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,7 @@ export default () => (`
`51`	`51`	`logoURL`
`52`	`52`	`link`
`53`	`53`	`pinned`
	`54`	`+ name`
`54`	`55`	`}`
`55`	`56`	`}`
`56`	`57`	`}`