fix(a11y): improve keyboard accessibility for sidebar and external links (#8014)

Author: hagemaruwu

src/components/Link/Link.jsx

@@ -8,7 +8,10 @@ const Link = ({ to = "", url, ...props }) => {
 
   if (to.startsWith("http") || to.startsWith("//")) {
     return (
-      <a href={to} target="_blank" rel="noopener noreferrer" {...others} />
+      <a href={to} target="_blank" rel="noopener noreferrer" {...others}>
+        {others.children}
+        <span className="screen-reader-only">(opens in a new tab)</span>
+      </a>
     );
   }
 

src/components/SidebarItem/SidebarItem.jsx

@@ -64,13 +64,19 @@ export default class SidebarItem extends Component {
     return (
       <div className={`${block} ${openMod} ${disabledMod}`}>
         {anchors.length > 0 ? (
-          <ChevronRightIcon
-            width={15}
-            height={17}
-            fill="#175d96"
-            className={`${block}__toggle`}
+          <button
+            className={`${block}__toggle-button`}
             onClick={this._toggle.bind(this)}
-          />
+            aria-label={`Toggle ${title} section`}
+            aria-expanded={this.state.open}
+          >
+            <ChevronRightIcon
+              width={15}
+              height={17}
+              fill="#175d96"
+              className={`${block}__toggle`}
+            />
+          </button>
         ) : (
           <BarIcon
             className={`${block}__toggle`}

src/components/SidebarItem/SidebarItem.scss

@@ -21,6 +21,14 @@
     }
   }
 
+  &__toggle-button {
+    background: none;
+    border: none;
+    padding: 0;
+    display: flex;
+    align-items: center;
+  }
+
   &__title {
     flex: 1 1 auto;
     color: getColor(elephant);

src/components/SidebarMobile/SidebarMobile.jsx

@@ -40,13 +40,13 @@ export default class SidebarMobile extends Component {
         />
 
         <div className="sidebar-mobile__content">
-          <span
-            role="button"
+          <button
             className="sidebar-mobile__close"
             onClick={toggle.bind(null, false)}
+            aria-label="Close navigation menu"
           >
             <CloseIcon fill="#fff" width={20} />
-          </span>
+          </button>
 
           {this._getSections()}
         </div>

src/components/SidebarMobile/SidebarMobile.scss

@@ -53,6 +53,7 @@
 .sidebar-mobile__close {
   position: absolute;
   cursor: pointer;
+  border: none;
   right: 22px;
   top: 10px;
   font-size: 1.3em;

src/styles/index.scss

@@ -66,3 +66,15 @@ body {
     }
   }
 }
+
+.screen-reader-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}