fix: a11y issues in other pages

public/locales/en/app.json

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

src/files/FilesPage.js

@@ -155,7 +155,7 @@ class FilesPage extends React.Component {
       return (
         <div>
           <Trans i18nKey='cidNotFileNorDir'>
-            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>
       )

src/files/explore-form/FilesExploreForm.js

@@ -81,7 +81,7 @@ class FilesExploreForm extends React.Component {
       <div data-id='FilesExploreForm' className='sans-serif black-80 flex'>
         <div className='flex-auto'>
           <div className='relative'>
-            <input id='ipfs-path' className={`input-reset bn pa2 mb2 db w-100 f6 br-0 placeholder-light ${this.inputClass}`} style={{ borderRadius: '3px 0 0 3px' }} type='text' placeholder='QmHash' aria-describedby='name-desc' onChange={this.onChange} onKeyDown={this.onKeyDown} value={this.state.path} />
+            <input id='ipfs-path' className={`input-reset bn pa2 mb2 db w-100 f6 br-0 placeholder-light ${this.inputClass}`} style={{ borderRadius: '3px 0 0 3px' }} type='text' placeholder='QmHash' aria-describedby='ipfs-path-desc' onChange={this.onChange} onKeyDown={this.onKeyDown} value={this.state.path} />
             <small id='ipfs-path-desc' className='o-0 absolute f6 black-60 db mb2'>Paste in a CID or IPFS path</small>
           </div>
         </div>

src/files/file-preview/FilePreview.js

@@ -27,6 +27,7 @@ class Preview extends React.Component {
     switch (type) {
       case 'audio':
         return (
+          // eslint-disable-next-line jsx-a11y/media-has-caption
           <audio width='100%' controls>
             <source src={src} />
           </audio>
@@ -40,6 +41,7 @@ class Preview extends React.Component {
         )
       case 'video':
         return (
+          // eslint-disable-next-line jsx-a11y/media-has-caption
           <video controls className={className}>
             <source src={src} />
           </video>

src/files/modals/share-modal/ShareModal.js

@@ -15,7 +15,6 @@ const ShareModal = ({ t, tReady, onLeave, link, className, ...props }) => (
         <input
           value={link}
           readOnly
-          autoFocus
           className={'input-reset flex-grow-1 charcoal-muted ba b--black-20 br1 pa2 mr2 focus-outline'}
           type='text' />
       </div>

src/navigation/NavBar.js

@@ -59,17 +59,17 @@ export const NavBar = ({ t, width, open, onToggle }) => {
   return (
     <div className='h-100 fixed-l flex flex-column justify-between' style={{ overflowY: 'auto', width: 'inherit' }}>
       <div className='flex flex-column'>
-        <div className='pointer navy pv3 pv4-l' onClick={onToggle}>
+        <button className='pointer navy pv3 pv4-l' onClick={onToggle} aria-label={t('collapseNavbar')}>
           <img className='center' style={{ height: 70, display: open ? 'block' : 'none' }} src={ipfsLogoText} alt='IPFS' title='Toggle navbar' />
           <img className='center' style={{ height: 70, display: open ? 'none' : 'block' }} src={ipfsLogo} alt='IPFS' title='Toggle navbar' />
-        </div>
-        <nav className='db overflow-x-scroll overflow-x-hidden-l nowrap tc' role='menubar'>
+        </button>
+        <div className='db overflow-x-scroll overflow-x-hidden-l nowrap tc' role='menubar'>
           <NavLink to='/' exact icon={StrokeMarketing} open={open}>{t('status:title')}</NavLink>
           <NavLink to='/files' icon={StrokeWeb} open={open}>{t('files:title')}</NavLink>
           <NavLink to='/explore' icon={StrokeIpld} open={open}>{t('explore:tabName')}</NavLink>
           <NavLink to='/peers' icon={StrokeCube} open={open}>{t('peers:title')}</NavLink>
           <NavLink to='/settings' icon={StrokeSettings} open={open}>{t('settings:title')}</NavLink>
-        </nav>
+        </div>
       </div>
       { open &&
         <div className='dn db-l navbar-footer mb3 center'>

src/status/PeerBandwidthTable.js

@@ -79,7 +79,7 @@ export class PeerBandwidthTable extends Component {
           </tbody>
         </table>
         {!showAll && hiddenPeers.length ? (
-          <p className='sans-serif f5 ma0 pv3 ph2 tc pointer underline-hover navy-muted' onClick={this.onShowAllClick}>{t('more', { count: hiddenPeers.length })}</p>
+          <button className='sans-serif f5 ma0 buttonv3 ph2 tc pointer underline-hover navy-muted' onClick={this.onShowAllClick}>{t('more', { count: hiddenPeers.length })}</button>
         ) : null}
       </Box>
     )