feat: Improving the accessibility

- Add some tab indexes - Add spacebar shortcuts
leonardokl · Aug 10, 2017 · 14e93a1 · 14e93a1
1 parent d659c5f
commit 14e93a1
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 12 deletions.
diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "GitLab Manager β",
   "description": "Manage your GitLab projects and todos",
-  "version": "0.15.0",
+  "version": "0.16.0",
 
   "browser_action": {
    "default_icon": "public/images/logo.png",

diff --git a/src/components/Projects/IssueButton.jsx b/src/components/Projects/IssueButton.jsx
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import { Button,  Dropdown} from 'semantic-ui-react'
 import { stopPropagation } from 'utils'
-import { PROJECT_DROPDOWN_OPTIONS } from 'constants'
+import { PROJECT_DROPDOWN_OPTIONS, KEY_CODE } from 'constants'
 
 const IssueButton = ({ onAction }) => (
   <Button.Group positive size='mini'>
@@ -10,6 +10,10 @@ const IssueButton = ({ onAction }) => (
       content='Issue'
       icon='plus'
       size='mini'
+      aria-label="create issue"
+      onKeyDown={stopPropagation((evt) => {
+        if (evt.keyCode === KEY_CODE.SPACE) onAction('newIssue')
+      })}
       onClick={stopPropagation(() => onAction('newIssue'))}
     />
     <Dropdown floating button>
@@ -18,7 +22,7 @@ const IssueButton = ({ onAction }) => (
             <Dropdown.Item
               {...opt}
               key={i}
-              onClick={stopPropagation(() => onAction(opt.id))}
+              onClick={stopPropagation(() => onAction(opt.value))}
             />
           )}
         </Dropdown.Menu>

diff --git a/src/components/Projects/Item.jsx b/src/components/Projects/Item.jsx
@@ -1,9 +1,9 @@
 import React, { PropTypes, PureComponent } from 'react'
 import { Button, Dropdown, List, Icon } from 'semantic-ui-react'
-import { PROJECT_DROPDOWN_OPTIONS } from 'constants'
+import { stopPropagation } from 'utils'
+import { PROJECT_DROPDOWN_OPTIONS, KEY_CODE } from 'constants'
 import PinIcon from './PinIcon'
 import IssueButton from './IssueButton'
-import { stopPropagation } from 'utils'
 import './Item.styl'
 
 class Item extends PureComponent {
@@ -19,7 +19,18 @@ class Item extends PureComponent {
     const { name, group, pinned, style, onActionClick, onClick } = this.props
 
     return (
-      <List.Item style={style} className='App__Projects_Item' onClick={stopPropagation(onClick)}>
+      <List.Item
+        tabIndex="0"
+        style={style}
+        className='App__Projects_Item'
+        onKeyDown={(evt) => {
+          if (evt.keyCode === KEY_CODE.SPACE) {
+            evt.stopPropagation(evt)
+            onClick(evt)
+          }
+        }}
+        onClick={stopPropagation(onClick)}
+      >
          <List.Content className='App__Projects_Item_Actions' floated='right'>
           <IssueButton onAction={onActionClick}/>
         </List.Content>

diff --git a/src/components/Projects/Item.styl b/src/components/Projects/Item.styl
@@ -21,9 +21,15 @@
   .header > .PinIcon
       display none
 
+  &:focus,
   &:hover
+    outline: 0
     .App__Projects_Item_Actions
       display block
     .header > .PinIcon
       display inline-block!important
 
+.ui.selection.list.list>.item:focus, .ui.selection.list>.item:focus {
+    background: rgba(0,0,0,.03);
+    color: rgba(0,0,0,.8);
+}
diff --git a/src/components/Search.jsx b/src/components/Search.jsx
@@ -38,9 +38,11 @@ class Search extends PureComponent {
         value={value}
         autoFocus
         fluid
+        role="search"
         icon={value ? CloseIcon : SearchIcon}
         loading={loading}
-        placeholder='Filter by name...'
+        aria-label="search for projects"
+        placeholder='Filter by name'
         onChange={this.handleChange}
         onKeyPress={this.handleOnKeyPress}
       />

diff --git a/src/components/TodosCounter.jsx b/src/components/TodosCounter.jsx
@@ -3,6 +3,8 @@ import { Icon } from 'semantic-ui-react'
 import './TodosCounter.styl'
 import { toBadge } from 'utils'
 
+const SPACE = 32;
+
 const TodosCounter = ({ count, onClick }) => (
   <Icon.Group
     className='App__TopBar_Todos'
@@ -13,6 +15,10 @@ const TodosCounter = ({ count, onClick }) => (
       name='bell outline'
       size='large'
       link
+      role="button"
+      tabIndex="0"
+      aria-label="see your todos"
+      onKeyDown={(evt) => evt.keyCode === SPACE ? onClick(evt) : null}
       onClick={onClick}
     />
     {!!count &&

diff --git a/src/components/TopBar.jsx b/src/components/TopBar.jsx
@@ -1,9 +1,12 @@
 import React, { PropTypes, PureComponent } from 'react'
 import { Dropdown, Icon, Image, Input } from 'semantic-ui-react'
+import { KEY_CODE } from 'constants';
 import Search from './Search'
 import TodosCounter from './TodosCounter'
 import './TopBar.styl'
 
+const ESCAPE = 27;
+
 class TopBar extends PureComponent {
   render () {
     const {
@@ -23,6 +26,7 @@ class TopBar extends PureComponent {
       <span>
         <Image
           avatar
+          alt="your picture"
           src={imageUrl}
         />
       </span>
@@ -33,13 +37,29 @@ class TopBar extends PureComponent {
     ]
 
     return (
-      <div className='App__TopBar'>
+      <div
+        className='App__TopBar'
+        onKeyDown={(evt) => {
+          if (evt.keyCode === KEY_CODE.ESCAPE && back) {
+            evt.preventDefault();
+            onBack(evt);
+          }
+        }}
+      >
         <div className='App__TopBar_Content'>
           {back &&
             <Icon
               name='chevron left'
               link
               style={{ marginRight: 10 }}
+              tabIndex="0"
+              aria-label="back to projects list"
+              onKeyDown={(evt) => {
+                if (evt.keyCode === KEY_CODE.SPACE) {
+                  evt.preventDefault();
+                  onBack(evt);
+                }
+              }}
               onClick={onBack}
             />
           }
@@ -63,6 +83,15 @@ class TopBar extends PureComponent {
             size='large'
             title='New project'
             link
+            aria-label="New project"
+            role="button"
+            tabIndex="0"
+            onKeyDown={(evt) => {
+              if (evt.keyCode === KEY_CODE.SPACE) {
+                evt.preventDefault();
+                onNewProjectClick(evt);
+              }
+            }}
             onClick={onNewProjectClick}
           />
           <Dropdown trigger={DropdownTrigger}>

diff --git a/src/constants.js b/src/constants.js
@@ -17,9 +17,10 @@ export const Gitlab = {
 
 export const GITLAB_URL = 'https://gitlab.com'
 export const PROJECT_DROPDOWN_OPTIONS = [
-  { id: 'code', text: 'Code', icon: 'code' },
-  { id: 'branches', text: 'Branches', icon: 'fork' },
-  { id: 'issues', text: 'Issues', icon: 'warning circle' }
+  { value: 'code', text: 'Code', icon: 'code' },
+  { value: 'branches', text: 'Branches', icon: 'fork' },
+  { value: 'issues', text: 'Issues', icon: 'warning circle' },
+  // { value: 'pipelines', text: 'Pipelines', icon: 'tasks' }
 ]
 
 export const GITLAB_TODO_ACTIONS = {
@@ -37,6 +38,10 @@ export const GITLAB_TODO_TYPES = {
 
 export const NOTIFICATION_IMAGE = '/public/images/logo-and-name.png'
 
+export const KEY_CODE = {
+  SPACE: 32, ESCAPE: 27
+}
+
 export default {
   Pages,
   Gitlab

diff --git a/src/containers/Project.jsx b/src/containers/Project.jsx
@@ -25,7 +25,8 @@ class ProjectContainer extends PureComponent {
         return onOpenTab(`${web_url}/branches`)
       case 'issues':
         return onOpenTab(`${web_url}/issues`)
-
+      // case 'pipelines':
+      //   return onOpenTab(`${web_url}/pipelines`)
       default:
         console.error(`Unhandled action ${action}`)
     }