fix: a11y issues in files page

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
   parser: "babel-eslint",
-  extends: ['react-app', 'standard']
+  extends: ['react-app', 'standard', "plugin:jsx-a11y/recommended"],
+  plugins: ["jsx-a11y"]
 }

package.json

@@ -34,6 +34,7 @@
     "d3": "^5.14.2",
     "datatransfer-files-promise": "^1.3.1",
     "details-polyfill": "^1.1.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
     "file-extension": "^4.0.5",
     "filesize": "^6.0.1",
     "hashlru": "^2.3.0",

public/locales/en/app.json

@@ -6,5 +6,7 @@
     "next": "Next",
     "skip": "Skip",
     "tooltip": "Click this button any time for a guided tour on the current page."
-  }
+  },
+  "startTourHelper": "Start tour",
+  "collapseNavbar": "Collapse navbar"
 }

public/locales/en/files.json

@@ -5,6 +5,8 @@
   "finished": "Finished!",
   "totalSize": "Total size: {size}",
   "filesSelected": "{count, plural, one {File selected} other {Files selected}}",
+  "menuOptions": "Options for selected item",
+  "selectedAllEntries": "Select all table entries",
   "individualFilesOnly": "Only available for individual files",
   "itemName": "Name",
   "size": "Size",
@@ -72,6 +74,7 @@
     "paragraph5": "<0><0>Review the settings</0> for your IPFS node, and update them to better suit your needs.</0>",
     "paragraph6": "<0>If you want to help push the Web UI forward, <1>check out its code</1> or <3>report a bug</3>!</0>"
   },
+  "filesListLabel": "Files list",
   "filesList": {
     "noFiles": "<0>No files in this directory. Click the “Add” button to add some.</0>"
   },
@@ -116,11 +119,15 @@
     "browse": "Browse",
     "inspect": "Inspect"
   },
+  "previousFolder": "Go back to previous folder",
+  "fileLabel": "Select {type} {name} with size: {size}", 
   "hashUnavailable": "hash unavailable",
+  "checkboxLabel": "View more options for {name}",
   "pins": "Pins",
   "pinned": "Pinned",
   "blocks": "Blocks",
   "more": "More",
   "files": "Files",
-  "cidNotFileNorDir": "The current link isn't a file, nor a directory. Try to <0>inspect</0> it instead."
+  "cidNotFileNorDir": "The current link isn't a file, nor a directory. Try to <0>inspect</0> it instead.",
+  "sortBy": "Sort items by {name}"
 }

src/App.js

@@ -62,13 +62,11 @@ export class App extends Component {
     const { t, route: Page, ipfsReady, doFilesNavigateTo, doExploreUserProvidedPath, routeInfo: { url }, navbarIsOpen, connectDropTarget, canDrop, isOver, showTooltip } = this.props
 
     return connectDropTarget(
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       <div className='sans-serif h-100' onClick={getNavHelper(this.props.doUpdateUrl)}>
         {/* Tinted overlay that appears when dragging and dropping an item */}
         { canDrop && isOver && <div className='w-100 h-100 top-0 left-0 absolute' style={{ background: 'rgba(99, 202, 210, 0.2)' }} /> }
-        <div className='flex-l' style={{ minHeight: '100vh' }}>
-          <div className={`flex-none-l bg-navy ${navbarIsOpen ? 'w5-l' : 'w4-l'}`}>
-            <NavBar />
-          </div>
+        <div className='flex flex-row-reverse-l flex-column-reverse' style={{ minHeight: '100vh' }}>
           <div className='flex-auto-l'>
             <div className='flex items-center ph3 ph4-l' style={{ WebkitAppRegion: 'drag', height: 75, background: '#F0F6FA', paddingTop: '20px', paddingBottom: '15px' }}>
               <div className='joyride-app-explore' style={{ width: 560 }}>
@@ -86,6 +84,9 @@ export class App extends Component {
               }
             </main>
           </div>
+          <div className={`flex-none-l bg-navy ${navbarIsOpen ? 'w5-l' : 'w4-l'}`}>
+            <NavBar />
+          </div>
         </div>
 
         <ReactJoyride

src/components/analytics-toggle/AnalyticsToggle.js

@@ -38,7 +38,7 @@ const AnalyticType = ({ children, onChange, enabled, label, summary, exampleRequ
           <span className='fw5 f6'>{label}</span>
         } />
         <div className='truncate fw4 f6 flex-auto charcoal-muted'>&ndash; {summary}</div>
-        <button className='focus-outline bg-transparent pa3 bn link blue pointer flex-none' onClick={() => setOpen(!isOpen)} style={{ minWidth: 100 }}>
+        <button className='focus-outline bg-transparent pa3 bn link blue flex-none' onClick={() => setOpen(!isOpen)} style={{ minWidth: 100 }}>
           {isOpen ? 'Close' : 'Show me' }
         </button>
       </div>

src/components/ask/AskToEnable.js

@@ -13,8 +13,8 @@ const AskToEnable = ({ className, label, yesLabel, noLabel, onYes, onNo, details
         )}
       </span>
       <span className='dib'>
-        <Button className='ml3 mv1' bg={'bg-green'} onClick={onYes}>{yesLabel}</Button>
-        <Button className='ml3 mv1' color='charcoal' bg={'bg-snow-muted'} onClick={onNo}>{noLabel}</Button>
+        <Button className='ml3 mv1 tc' bg={'bg-green'} onClick={onYes}>{yesLabel}</Button>
+        <Button className='ml3 mv1 tc' color='charcoal' bg={'bg-snow-muted'} onClick={onNo}>{noLabel}</Button>
       </span>
     </div>
   )

src/components/button/Button.js

@@ -5,7 +5,7 @@ const Button = ({ bg = 'bg-teal', color = 'white', fill = 'white', className = '
   const bgClass = danger ? 'bg-red' : disabled ? 'bg-gray-muted' : bg
   const fillClass = danger ? 'fill-white' : disabled ? 'fill-snow' : fill
   const colorClass = danger ? 'white' : disabled ? 'light-gray' : color
-  const cls = `Button transition-all sans-serif dib v-mid fw5 nowrap lh-copy bn br1 pa2 pointer focus-outline ${fillClass} ${bgClass} ${colorClass} ${className}`
+  const cls = `Button transition-all sans-serif dib v-mid fw5 nowrap lh-copy bn br1 pa2 focus-outline ${fillClass} ${bgClass} ${colorClass} ${className}`
   return (
     <button className={cls} disabled={disabled} style={{ minWidth, ...style }} {...props}>
       {children}

src/components/checkbox/Checkbox.css

@@ -6,11 +6,15 @@
   left: -99999px;
 }
 
-.Checkbox input:checked ~ span:first-of-type svg {
+.Checkbox input:checked + span svg {
   opacity: 1;
 }
 
-.Checkbox > input:disabled ~ span:first-of-type {
+.Checkbox > input:disabled + span {
   cursor: not-allowed;
   opacity: 0.5;
 }
+
+.Checkbox input:focus + span {
+  outline: 1px solid #bbb;
+}

src/components/connected/Connected.js

@@ -21,7 +21,7 @@ export const Connected = ({ t, ipfsReady, ipfsConnected, className, size = 28 })
 
   return (
     <a title={title} className={`dib ${className}`} href='#/welcome'>
-      <svg className={`${fill} ${opacity} fill-current-color transition-all glow`} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width={size} height={size}>
+      <svg className={`${fill} ${opacity} fill-current-color transition-all glow`} viewBox='0 0 24 24' width={size} height={size} aria-hidden="true">
         <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM6.5 9L10 5.5 13.5 9H11v4H9V9H6.5zm11 6L14 18.5 10.5 15H13v-4h2v4h2.5z ' />
       </svg>
     </a>

src/components/language-selector/LanguageSelector.js

@@ -22,7 +22,7 @@ class LanguageSelector extends Component {
           <div className='ph4 flex items-center bg-white lh-copy charcoal f6 fw5' style={{ height: 40 }}>
             {getCurrentLanguage()}
           </div>
-          <Button minWidth={100} onClick={this.onLanguageEditOpen}>
+          <Button className="tc" minWidth={100} onClick={this.onLanguageEditOpen}>
             {t('actions.edit')}
           </Button>
         </div>

src/components/language-selector/language-modal/LanguageModal.js

@@ -22,7 +22,7 @@ const LanguageModal = ({ t, tReady, onLeave, link, className, ...props }) => {
           { localesList.map((lang) =>
             <button
               key={`lang-${lang}`}
-              className='pa2 w-33 flex nowrap bg-transparent bn outline-0 blue pointer'
+              className='pa2 w-33 flex nowrap bg-transparent bn outline-0 blue justify-center'
               onClick={() => handleClick(lang)}>
               { getLanguage(lang) }
             </button>
@@ -35,7 +35,7 @@ const LanguageModal = ({ t, tReady, onLeave, link, className, ...props }) => {
       </ModalBody>
 
       <ModalActions>
-        <Button className='ma2' bg='bg-gray' onClick={onLeave}>{t('actions.close')}</Button>
+        <Button className='ma2 tc' bg='bg-gray' onClick={onLeave}>{t('actions.close')}</Button>
       </ModalActions>
     </Modal>
   )

src/components/text-input-modal/TextInputModal.js

@@ -109,14 +109,13 @@ class TextInputModal extends React.Component {
             onKeyPress={this.onKeyPress}
             value={this.state.value}
             required
-            autoFocus
             className={`input-reset charcoal ba b--black-20 br1 pa2 mb2 db w-75 center focus-outline ${this.inputClass}`}
             type='text' />
         </ModalBody>
 
         <ModalActions>
-          <Button className='ma2' bg='bg-gray' onClick={onCancel}>Cancel</Button>
-          <Button className='ma2' bg='bg-teal' disabled={this.isDisabled} onClick={this.onSubmit}>{submitText}</Button>
+          <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>Cancel</Button>
+          <Button className='ma2 tc' bg='bg-teal' disabled={this.isDisabled} onClick={this.onSubmit}>{submitText}</Button>
         </ModalActions>
       </Modal>
     )

src/components/tooltip/Tooltip.js

@@ -41,7 +41,7 @@ export default class Tool extends React.Component {
 
     return (
       <div className='relative' {...props}>
-        <div onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className='overflow-hidden'>
+        <div onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseOver} onBlur={this.onMouseLeave} className='overflow-hidden'>
           {React.Children.map(children, c => React.cloneElement(c, { ref: (n) => { this.el = n } }))}
         </div>
 

src/components/tour/TourHelper.js

@@ -1,21 +1,22 @@
 import React from 'react'
 import { connect } from 'redux-bundler-react'
+import { withTranslation } from 'react-i18next'
 
-export const TourHelper = ({ doEnableTours, className = '', size = 23 }) => {
+export const TourHelper = ({ doEnableTours, className = '', size = 23, t }) => {
   const handleClick = () => {
     doEnableTours()
   }
 
   return (
-    <span className={`dib mr1 ml4-m pointer ${className}`} onClick={handleClick}>
-      <svg className='fill-teal o-60 glow' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' width={size} height={size}>
+    <button className={`dib mr1 ml4-m pointer ${className}`} onClick={handleClick} aria-label={ t('startTourHelper')}>
+      <svg className='fill-teal o-60 glow' viewBox='0 0 44 44' width={size} height={size} aria-hidden="true">
         <path d='m22,0c-12.2,0-22,9.8-22,22s9.8,22 22,22 22-9.8 22-22-9.8-22-22-22zm2,34c0,0.6-0.4,1-1,1h-2c-0.6,0-1-0.4-1-1v-2c0-0.6 0.4-1 1-1h2c0.6,0 1,0.4 1,1v2zm2.7-8.9c-1.4,1.2-2.4,2-2.7,3.1-0.1,0.5-0.5,0.8-1,0.8h-2c-0.6,0-1.1-0.5-1-1.1 0.4-2.9 2.5-4.5 4.2-5.9 1.8-1.4 2.8-2.3 2.8-4 0-2.8-2.2-5-5-5s-5,2.2-5,5c0,0.2 0,0.4 0,0.6 0.1,0.5-0.2,1-0.7,1.1l-1.9,.6c-0.6,0.2-1.2-0.2-1.3-0.8-0.1-0.5-0.1-1-0.1-1.5 0-5 4-9 9-9s9,4 9,9c0,3.7-2.4,5.6-4.3,7.1z' />
       </svg>
-    </span>
+    </button>
   )
 }
 
 export default connect(
   'doEnableTours',
-  TourHelper
+  withTranslation('app')(TourHelper)
 )

src/files/FilesPage.js

@@ -155,7 +155,7 @@ class FilesPage extends React.Component {
       return (
         <div>
           <Trans i18nKey='cidNotFileNorDir' t={t}>
-            The current link isn't a file, nor a directory. Try to <span className='link blue pointer' onClick={() => doExploreUserProvidedPath(path)}>inspect</span> it instead.
+            The current link isn't a file, nor a directory. Try to <button className='link blue pointer' onClick={() => doExploreUserProvidedPath(path)}>inspect</button> it instead.
           </Trans>
         </div>
       )
@@ -216,16 +216,16 @@ class FilesPage extends React.Component {
         </Helmet>
 
         <ContextMenu
+          autofocus
           ref={this.contextMenuRef}
           isOpen={contextMenu.isOpen}
           translateX={contextMenu.translateX}
           translateY={contextMenu.translateY}
           handleClick={this.handleContextMenu}
           isUpperDir={contextMenu.file && contextMenu.file.name === '..'}
           isMfs={filesPathInfo ? filesPathInfo.isMfs : false}
-          isUnknown={contextMenu.file && contextMenu.file.type === 'unknown'}
+          isUnknown={!!(contextMenu.file && contextMenu.file.type === 'unknown')}
           pinned={contextMenu.file && contextMenu.file.pinned}
-          showDots={false}
           hash={contextMenu.file && contextMenu.file.hash}
           onShare={() => this.showModal(SHARE, [contextMenu.file])}
           onDelete={() => this.showModal(DELETE, [contextMenu.file])}

src/files/breadcrumbs/Breadcrumbs.js

@@ -64,10 +64,9 @@ class Breadcrumbs extends React.Component {
       <span key={`${index}link`} className='dib pv1 pr1' style={{ direction: 'ltr' }}>
         { link.disabled
           ? <span title={link.realName} className='gray'>{link.name}</span>
-          /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
-          : <a title={link.realName} className={`pointer navy ${link.last ? 'b' : ''}`} onClick={() => onClick(link.path)}>
+          : <button title={link.realName} className={`pointer navy ${link.last ? 'b' : ''}`} onClick={() => onClick(link.path)}>
             {link.name}
-          </a>
+          </button>
         }
       </span>,
       /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
@@ -85,12 +84,12 @@ class Breadcrumbs extends React.Component {
       <nav aria-label={t('breadcrumbs')} className={cls} {...props}>
         { (root.name === 'files' || root.name === 'pins') &&
         /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
-        <a key={`${root.name}-label`}
+        <button key={`${root.name}-label`}
           title={root.realName}
           onClick={() => onClick(root.path)}
           className='f7 pointer pa1 bg-navy br2 mr2 white'>
           {t(root.name)}
-        </a>
+        </button>
         }
 
         <div className='nowrap overflow-hidden relative' ref={(el) => { this.anchors = el }} style={{ direction: 'rtl' }}>