fix(www): Improve accessibility of showcase page (#20236)

* fix(www): Improve accessibility of showcase page * fix: fixing linting errors
gatsbyjs · Dec 20, 2019 · 84139bf · 84139bf
1 parent c484c04
commit 84139bf
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/www/src/views/shared/collapsible.js b/www/src/views/shared/collapsible.js
@@ -38,7 +38,7 @@ class Collapsible extends Component {
             width: `100%`,
           }}
         >
-          <h4
+          <button
             sx={{
               alignItems: `center`,
               color: `textMuted`,
@@ -47,22 +47,26 @@ class Collapsible extends Component {
               flexShrink: 0,
               fontWeight: `body`,
               fontSize: 1,
-              mt: 6,
-              mr: 7,
+              my: 6,
+              mr: 4,
+              p: 0,
               letterSpacing: `tracked`,
               textTransform: `uppercase`,
+              background: `none`,
+              border: `none`,
               "&:hover": {
                 color: `gatsby`,
               },
             }}
+            aria-expanded={!collapsed}
             onClick={this.handleClick}
           >
             {heading}
             {` `}
             <span sx={{ ml: `auto` }} css={{ display: `flex` }}>
               {collapsed ? <FaAngleDown /> : <FaAngleUp />}
             </span>
-          </h4>
+          </button>
           <div
             css={{
               display: collapsed ? `none` : `block`,

diff --git a/www/src/views/showcase/showcase-list.js b/www/src/views/showcase/showcase-list.js
@@ -60,6 +60,7 @@ const ShowcaseList = ({ items, count, filters, onCategoryClick }) => {
                         href={node.source_url}
                         target="_blank"
                         rel="noopener noreferrer"
+                        aria-label={`Open source code for ${node.title}`}
                       >
                         <GithubIcon style={{ verticalAlign: `text-top` }} />
                       </a>
@@ -71,6 +72,7 @@ const ShowcaseList = ({ items, count, filters, onCategoryClick }) => {
                     href={node.main_url}
                     target="_blank"
                     rel="noopener noreferrer"
+                    aria-label={`Open website for ${node.title}`}
                   >
                     <LaunchSiteIcon style={{ verticalAlign: `text-top` }} />
                   </a>

diff --git a/www/src/views/starter-library/starter-list.js b/www/src/views/starter-library/starter-list.js
@@ -180,6 +180,7 @@ const StartersList = ({ urlState, starters, count, sortRecent }) => {
                           ...shortcutIcon,
                           svg: { verticalAlign: `text-top !important` },
                         }}
+                        aria-label={`Open source code for ${name}`}
                       >
                         <GithubIcon />
                       </a>
@@ -192,6 +193,7 @@ const StartersList = ({ urlState, starters, count, sortRecent }) => {
                           ...shortcutIcon,
                           svg: { verticalAlign: `text-top !important` },
                         }}
+                        aria-label={`Open demo for ${name}`}
                       >
                         <LaunchDemoIcon />
                       </a>