[a11y] my libs: added 'keyboard access' for 'star/unstar', op menu & ops

frontend/src/pages/my-libs/mylib-repo-list-item.js

@@ -78,7 +78,7 @@ class MylibRepoListItem extends React.Component {
     switch(item) {
       case 'Star':
       case 'Unstar':
-        this.onStarRepo();
+        this.onToggleStarRepo();
         break;
       case 'Share':
         this.onShareToggle();
@@ -131,7 +131,8 @@ class MylibRepoListItem extends React.Component {
     this.props.onRepoClick(this.props.repo);
   }
 
-  onStarRepo = () => {
+  onToggleStarRepo = (e) => {
+    e.preventDefault();
     const repoName = this.props.repo.repo_name;
     if (this.state.isStarred) {
       seafileAPI.unstarItem(this.props.repo.repo_id, '/').then(() => {
@@ -278,8 +279,9 @@ class MylibRepoListItem extends React.Component {
     return (
       <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.onRepoClick}>
         <td className="text-center">
-          {!this.state.isStarred && <i className="far fa-star star-empty cursor-pointer" onClick={this.onStarRepo}></i>}
-          {this.state.isStarred && <i className="fas fa-star cursor-pointer" onClick={this.onStarRepo}></i>}
+          <a href="#" role="button" aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')} onClick={this.onToggleStarRepo}>
+            <i className={`fa-star ${this.state.isStarred ? 'fas' : 'far star-empty'}`}></i>
+          </a>
         </td>
         <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
         <td>

frontend/src/pages/my-libs/mylib-repo-menu.js

@@ -27,10 +27,22 @@ class MylibRepoMenu extends React.Component {
     this.props.onMenuItemClick(operation);
   }
 
+  onMenuItemKeyDown = (e) => {
+    if (e.key == 'Enter' || e.key == 'Space') {
+      this.onMenuItemClick(e);
+    }
+  }
+
   onDropdownToggleClick = (e) => {
     this.toggleOperationMenu(e);
   }
 
+  onDropdownToggleKeyDown = (e) => {
+    if (e.key == 'Enter' || e.key == 'Space') {
+      this.onDropdownToggleClick(e);
+    }
+  }
+
   toggleOperationMenu = (e) => {
     let dataset = e.target ? e.target.dataset : null;
     if (dataset && dataset.toggle && dataset.toggle === 'Rename') {
@@ -134,19 +146,20 @@ class MylibRepoMenu extends React.Component {
       return (
         <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
           <DropdownToggle
-            tag="i"
-            className="sf-dropdown-toggle sf2-icon-caret-down"
+            className="sf-dropdown-toggle sf2-icon-caret-down border-0 p-0"
             title={gettext('More Operations')}
-            // onClick={this.clickOperationMenuToggle}
+            onClick={this.onDropdownToggleClick}
+            onKeyDown={this.onDropdownToggleKeyDown}
             data-toggle="dropdown"
-            aria-expanded={this.state.isItemMenuShow}
+            aria-haspopup={true}
+            style={{'minWidth': '0'}}
           />
           <DropdownMenu>
             {operations.map((item, index)=> {
               if (item == 'Divider') {
                 return <DropdownItem key={index} divider />;
               } else {
-                return (<DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick}>{this.translateOperations(item)}</DropdownItem>);
+                return (<DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick} onKeyDown={this.onMenuItemKeyDown}>{this.translateOperations(item)}</DropdownItem>);
               }
             })}
           </DropdownMenu>