diff --git a/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
index 2c5b33c2e3..58f1fec1d2 100644
--- a/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
@@ -38,13 +38,13 @@ class LibSubFolderPermissionDialog extends React.Component {
       <Fragment>
         <div className="share-dialog-side">
           <Nav pills>
-            <NavItem>
-              <NavLink className={activeTab === 'userPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'userPermission')}>
+            <NavItem role="tab" aria-selected={activeTab === 'userPermission'} aria-controls="user-perm-panel">
+              <NavLink className={activeTab === 'userPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'userPermission')} tabIndex="0" onKeyDown={Utils.onKeyDown}>
                 {gettext('User Permission')}
               </NavLink>
             </NavItem>
-            <NavItem>
-              <NavLink className={activeTab === 'groupPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'groupPermission')}>
+            <NavItem role="tab" aria-selected={activeTab === 'groupPermission'} aria-controls="group-perm-panel">
+              <NavLink className={activeTab === 'groupPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'groupPermission')} tabIndex="0" onKeyDown={Utils.onKeyDown}>
                 {gettext('Group Permission')}
               </NavLink>
             </NavItem>
@@ -52,10 +52,10 @@ class LibSubFolderPermissionDialog extends React.Component {
         </div>
         <div className="share-dialog-main">
           <TabContent activeTab={this.state.activeTab}>
-            <TabPane tabId="userPermission">
+            <TabPane tabId="userPermission" role="tabpanel" id="user-perm-panel">
               <LibSubFolderSetUserPermissionDialog repoID={this.props.repoID} repoName={this.props.repoName} folderPath={this.props.folderPath} isDepartmentRepo={this.props.isDepartmentRepo} />
             </TabPane>
-            <TabPane tabId="groupPermission">
+            <TabPane tabId="groupPermission" role="tabpanel" id="group-perm-panel">
               <LibSubFolderSetGroupPermissionDialog repoID={this.props.repoID} repoName={this.props.repoName} folderPath={this.props.folderPath} isDepartmentRepo={this.props.isDepartmentRepo} />
             </TabPane>
           </TabContent>
@@ -73,7 +73,7 @@ class LibSubFolderPermissionDialog extends React.Component {
           <ModalHeader toggle={this.props.toggleDialog}>
             <span dangerouslySetInnerHTML={{__html: repoName ? Utils.generateDialogTitle(gettext('{placeholder} Folder Permission'), repoName) : Utils.generateDialogTitle(gettext('Set {placeholder}\'s permission'), folderName)}}></span>
           </ModalHeader>
-          <ModalBody className="dialog-list-container share-dialog-content">
+          <ModalBody className="dialog-list-container share-dialog-content" role="tablist">
             {this.renderContent()}
           </ModalBody>
         </Modal>
diff --git a/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
index a061283d11..a3f9257efd 100644
--- a/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
@@ -39,7 +39,7 @@ class GroupItem extends React.Component {
   render() {
     let item = this.props.item;
     return (
-      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
         <td>
           <a href={`${siteRoot}group/${item.group_id}/`} target="_blank">{item.group_name}</a>
         </td>
@@ -59,9 +59,13 @@ class GroupItem extends React.Component {
         </td>
         <td>
           <span
+            tabIndex="0"
+            role="button"
             className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
             onClick={this.deleteGroupPermissionItem}
+            onKeyDown={Utils.onKeyDown}
             title={gettext('Delete')}
+            aria-label={gettext('Delete')}
           >
           </span>
         </td>
diff --git a/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
index e0212fefc5..7854f60313 100644
--- a/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
@@ -39,7 +39,7 @@ class UserItem extends React.Component {
     let item = this.props.item;
     let currentPermission = item.permission;
     return (
-      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
         <td>
           <a href={`${siteRoot}profile/${encodeURIComponent(item.user_email)}/`} target="_blank">{item.user_name}</a>
         </td>
@@ -59,9 +59,13 @@ class UserItem extends React.Component {
         </td>
         <td>
           <span
+            tabIndex="0"
+            role="button"
             className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
             onClick={this.deleteUserFolderPermission}
+            onKeyDown={Utils.onKeyDown}
             title={gettext('Delete')}
+            aria-label={gettext('Delete')}
           >
           </span>
         </td>