[a11y] dir view - file tag: improvements & added support for 'keyboard access'

frontend/src/components/dialog/list-tag-dialog.js

@@ -54,11 +54,11 @@ class TagListItem extends React.Component {
         <div className="tag-demo" style={{backgroundColor:color}} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
           <span className={`${this.state.showSelectedTag ? 'show-tag-selected': ''}`} style={{backgroundColor: drakColor}}></span>
           <span className="tag-name">{this.props.item.name}</span>
-          <span className="tag-files" onClick={this.onListTaggedFiles}>
+          <button className="tag-files border-0 bg-transparent" onClick={this.onListTaggedFiles}>
             {fileCount}{' '}{fileTranslation}
-          </span>
+          </button>
         </div>
-        <i className="tag-edit fa fa-pencil-alt" onClick={this.onTagUpdate}></i>
+        <button className="tag-edit fa fa-pencil-alt border-0" onClick={this.onTagUpdate} aria-label={gettext('Edit')} title={gettext('Edit')}></button>
       </li>
     );
   }

frontend/src/components/dialog/list-taggedfiles-dialog.js

@@ -135,24 +135,29 @@ class TaggedFile extends React.Component {
     });
   }
 
+  deleteFile = (e) => {
+    e.preventDefault();
+    this.props.onDeleteTaggedFile(this.props.taggedFile);
+  }
+
   render() {
     const taggedFile = this.props.taggedFile;
     let className = this.state.active ? 'action-icon sf2-icon-x3' : 'action-icon vh sf2-icon-x3';
     let path = taggedFile.parent_path ? Utils.joinPath(taggedFile.parent_path, taggedFile.filename) : '';
     let href = siteRoot + 'lib/' + this.props.repoID + '/file' + Utils.encodePath(path);
     return ( taggedFile.file_deleted ?
-      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
         <td colSpan='3' className="name">{taggedFile.filename}{' '}
           <span style={{color:'red'}}>{gettext('deleted')}</span>
         </td>
-        <td><i className={className} onClick={this.props.onDeleteTaggedFile.bind(this, taggedFile)}></i></td>
+        <td><a href="#" role="button" aria-label={gettext('Delete')} title={gettext('Delete')} className={className} onClick={this.deleteFile}></a></td>
       </tr>
       :
-      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
         <td className="name"><a href={href} target='_blank'>{taggedFile.filename}</a></td>
         <td>{Utils.bytesToSize(taggedFile.size)}</td>
         <td>{moment.unix(taggedFile.mtime).fromNow()}</td>
-        <td><i className={className} onClick={this.props.onDeleteTaggedFile.bind(this, taggedFile)}></i></td>
+        <td><a href="#" role="button" aria-label={gettext('Delete')} title={gettext('Delete')} className={className} onClick={this.deleteFile}></a></td>
       </tr>
     );
   }

frontend/src/components/repo-info-bar.js

@@ -69,9 +69,9 @@ class RepoInfoBar extends React.Component {
                 <li key={usedRepoTag.id} className="used-tag-item">
                   <span className="used-tag" style={{backgroundColor:usedRepoTag.color}}></span>
                   <span className="used-tag-name" title={usedRepoTag.name}>{usedRepoTag.name}</span>
-                  <span className="used-tag-files" onClick={this.onListTaggedFiles.bind(this, usedRepoTag)}>
+                  <button type="button" className="used-tag-files border-0 bg-transparent" onClick={this.onListTaggedFiles.bind(this, usedRepoTag)}>
                     {usedRepoTag.fileCount > 1 ? usedRepoTag.fileCount + ' files' : usedRepoTag.fileCount + ' file'}
-                  </span>
+                  </button>
                 </li>
               );
             })}
@@ -94,9 +94,9 @@ class RepoInfoBar extends React.Component {
             <span className="file-info">
               <span className="info-icon sf2-icon-drafts"></span>
               <span className="used-tag-name">{gettext('draft')}</span>
-              <span className="used-tag-files" onClick={this.toggleDrafts}>
+              <button type="button" className="used-tag-files border-0 bg-transparent" onClick={this.toggleDrafts}>
                 {this.props.draftCounts > 1 ? this.props.draftCounts + ' files' : this.props.draftCounts + ' file'}
-              </span>
+              </button>
             </span>
           }
         </div>

frontend/src/css/repo-tag.css

@@ -45,8 +45,9 @@
 
 .tag-demo .tag-files {
   margin-right: 0.5rem;
+  color: #fff;
   cursor: pointer;
-  border-bottom: 1px solid;
+  text-decoration: underline;
 }
 
 .tag-list-item .tag-edit {
@@ -58,6 +59,8 @@
   height: 2.25rem;
   border-radius: 0.25rem;
   color: #798d99;
+  cursor: pointer;
+  background: transparent;
 }
 
 .tag-list-item .tag-edit:hover {