Add skip link for better keyboard accessibility Fix-#3084

client/components/SkipLink.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
+const SkipLink = ({ targetId, text }) => {
+  const [focus, setFocus] = useState(false);
+  const { t } = useTranslation();
+  const handleFocus = () => {
+    setFocus(true);
+  };
+
+  const handleBlur = () => {
+    setFocus(false);
+  };
+  const linkClasses = classNames('skip_link', { focus });
+
+  return (
+    <a
+      href={`#${targetId}`}
+      className={linkClasses}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    >
+      {t(`SkipLink.${text}`)}
+    </a>
+  );
+};
+
+SkipLink.propTypes = {
+  targetId: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired
+};
+
+export default SkipLink;

client/index.jsx

@@ -9,6 +9,7 @@ import Routing from './routes';
 import ThemeProvider from './modules/App/components/ThemeProvider';
 import Loader from './modules/App/components/loader';
 import './i18n';
+import SkipLink from './components/SkipLink';
 
 require('./styles/main.scss');
 
@@ -23,6 +24,7 @@ const App = () => (
   <Provider store={store}>
     <ThemeProvider>
       <Router history={browserHistory}>
+        <SkipLink targetId="play-sketch" text="PlaySketch" />
         <Routing />
       </Router>
     </ThemeProvider>

client/modules/IDE/components/Header/Toolbar.jsx

@@ -61,6 +61,7 @@ const Toolbar = (props) => {
       </button>
       <button
         className={playButtonClass}
+        id="play-sketch"
         onClick={() => {
           props.syncFileContent();
           dispatch(startSketch());

client/styles/components/_skip-link.scss

@@ -0,0 +1,29 @@
+@use "sass:math";
+
+.skip_link {
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1%;
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+  position: absolute;
+  border-radius: 3px;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: transparent;
+  font-size: #{math.div(12, $base-font-size)}rem;
+  line-height: #{math.div(50, $base-font-size)}rem;line-height: 11px;
+  padding: #{math.div(10, $base-font-size)}rem #{math.div(10, $base-font-size)}rem;
+  background: #fff;
+  display: inline-block;
+  text-transform: uppercase;
+  transition: none;
+  z-index: 5;
+}
+
+.skip_link:focus {
+  clip: auto;
+  overflow: visible;
+  width: auto;
+  height: auto;
+}

client/styles/main.scss

@@ -54,6 +54,7 @@
 @import 'components/collection';
 @import 'components/collection-create';
 @import 'components/quick-add';
+@import 'components/skip-link';
 
 @import 'layout/dashboard';
 @import 'layout/ide';

translations/locales/en-US/translations.json

@@ -621,5 +621,8 @@
     "PrivacyPolicy": "Privacy Policy",
     "TermsOfUse": "Terms of Use",
     "CodeOfConduct": "Code of Conduct"
+  },
+  "SkipLink": {
+    "PlaySketch": "Skip to Play Sketch"
   }
 }