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' }}>