From 6e2a296ca110da008d2c85c375003a0d9283650a Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Thu, 23 Sep 2021 15:42:45 +0800
Subject: [PATCH] [a11y] shared repos: improved 'more operations' dropdown &
 'star/unstar'

---
 .../shared-repo-list-item.js                  | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
index 91605c5336..aaf2af7789 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -85,6 +85,12 @@ class SharedRepoListItem extends React.Component {
     this.toggleOperationMenu(e);
   }
 
+  onDropdownToggleKeyDown = (e) => {
+    if (e.key == 'Enter' || e.key == 'Space') {
+      this.clickOperationMenuToggle(e);
+    }
+  }
+
   toggleOperationMenu = (e) => {
     let dataset = e.target ? e.target.dataset : null;
     if (dataset && dataset.toggle && dataset.toggle === 'Rename') {
@@ -118,6 +124,12 @@ class SharedRepoListItem extends React.Component {
     return { iconUrl, iconTitle, libPath };
   }
 
+  onMenuItemKeyDown = (e) => {
+    if (e.key == 'Enter' || e.key == 'Space') {
+      this.onMenuItemClick(e);
+    }
+  }
+
   onMenuItemClick = (e) => {
     let operation = e.target.dataset.toggle;
     switch(operation) {
@@ -403,16 +415,18 @@ class SharedRepoListItem extends React.Component {
           {deleteOperation}
           <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')}
               data-toggle="dropdown"
               aria-expanded={this.state.isItemMenuShow}
+              aria-haspopup={true}
+              style={{'minWidth': '0'}}
               onClick={this.clickOperationMenuToggle}
+              onKeyDown={this.onDropdownToggleKeyDown}
             />
             <DropdownMenu>
               {operations.map((item, index) => {
-                return <DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick}>{this.translateMenuItem(item)}</DropdownItem>;
+                return <DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick} onKeyDown={this.onMenuItemKeyDown}>{this.translateMenuItem(item)}</DropdownItem>;
               })}
             </DropdownMenu>
           </Dropdown>
@@ -440,9 +454,13 @@ class SharedRepoListItem extends React.Component {
 
   onToggleStarRepo = (e) => {
     e.preventDefault();
+    const { repo_name: repoName } = this.props.repo;
     if (this.state.isStarred) {
       seafileAPI.unstarItem(this.props.repo.repo_id, '/').then(() => {
         this.setState({isStarred: !this.state.isStarred});
+        const msg = gettext('Successfully unstarred {library_name_placeholder}.')
+          .replace('{library_name_placeholder}', repoName);
+        toaster.success(msg);
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
@@ -450,6 +468,9 @@ class SharedRepoListItem extends React.Component {
     } else {
       seafileAPI.starItem(this.props.repo.repo_id, '/').then(() => {
         this.setState({isStarred: !this.state.isStarred});
+        const msg = gettext('Successfully starred {library_name_placeholder}.')
+          .replace('{library_name_placeholder}', repoName);
+        toaster.success(msg);
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
@@ -471,7 +492,7 @@ class SharedRepoListItem extends React.Component {
           <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
           <td>
             {this.state.isRenaming ?
-              <Rename  name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
+              <Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
               <Link to={libPath}>{repo.repo_name}</Link>
             }
           </td>