haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-13 05:39:59 +00:00
Code Issues Releases Wiki Activity

[a11y] added 'keyboard access' for 'dir view - dirent' & fixed bugs

Browse Source
This commit is contained in:
llj
2021-09-29 15:23:02 +08:00
parent b5d3a6cf6b
commit aef44a8605
8 changed files with 70 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/dialog/about-dialog.js
View File

@@ -9,10 +9,6 @@ const propTypes = {
class AboutDialog extends React.Component {
toggle = () => {
this.props.onCloseAboutDialog();
}
renderExternalAboutLinks = () => {
if (additionalAboutDialogLinks && (typeof additionalAboutDialogLinks) === 'object') {
let keys = Object.keys(additionalAboutDialogLinks);
@@ -26,21 +22,22 @@ class AboutDialog extends React.Component {
render() {
let href = lang === lang == 'zh-cn' ? 'http://seafile.com/about/' : 'http://seafile.com/en/about/';
const { onCloseAboutDialog: toggleDialog } = this.props;
if (aboutDialogCustomHtml) {
return (
<Modal isOpen={true} toggle={this.toggle}>
<Modal isOpen={true} toggle={toggleDialog}>
<ModalBody>
<button type="button" className="close" onClick={this.toggle}><span aria-hidden="true">×</span></button>
<button type="button" className="close" onClick={toggleDialog}><span aria-hidden="true">×</span></button>
<div className="about-content" dangerouslySetInnerHTML={{__html: aboutDialogCustomHtml}}></div>
</ModalBody>
</Modal>
);
} else {
return (
<Modal isOpen={true} toggle={this.toggle}>
<Modal isOpen={true} toggle={toggleDialog}>
<ModalBody>
<button type="button" className="close" onClick={this.toggle}><span aria-hidden="true">×</span></button>
<button type="button" className="close" onClick={toggleDialog}><span aria-hidden="true">×</span></button>
<div className="about-content">
<p><img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" /></p>
<p>{gettext('Server Version: ')}{seafileVersion}<br />© {(new Date()).getFullYear()} {gettext('Seafile')}</p>

12
frontend/src/components/dialog/delete-repo-dialog.js
View File

@@ -26,10 +26,6 @@ class DeleteRepoDialog extends Component {
}
}
toggle = () => {
this.props.toggle();
}
onDeleteRepo = () => {
this.setState({isRequestSended: true}, () => {
this.props.onDeleteRepo(this.props.repo);
@@ -44,14 +40,16 @@ class DeleteRepoDialog extends Component {
let message = gettext('Are you sure you want to delete %s ?');
message = message.replace('%s', repoName);
const { toggle: toggleDialog } = this.props;
return (
<Modal isOpen={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>{gettext('Delete Library')}</ModalHeader>
<Modal isOpen={true} toggle={toggleDialog}>
<ModalHeader toggle={toggleDialog}>{gettext('Delete Library')}</ModalHeader>
<ModalBody>
<p dangerouslySetInnerHTML={{__html: message}}></p>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
<Button color="secondary" onClick={toggleDialog}>{gettext('Cancel')}</Button>
<Button color="primary" disabled={isRequestSended} onClick={this.onDeleteRepo}>{gettext('Delete')}</Button>
</ModalFooter>
</Modal>

77
frontend/src/components/dirent-list-view/dirent-list-item.js
View File

@@ -154,11 +154,13 @@ class DirentListItem extends React.Component {
this.props.onItemSelected(this.props.dirent);
}
onItemStarred = () => {
onItemStarred = (e) => {
let dirent = this.props.dirent;
let repoID = this.props.repoID;
let filePath = this.getDirentPath(dirent);
e.preventDefault();
if (dirent.starred) {
seafileAPI.unstarItem(repoID, filePath).then(() => {
this.props.updateDirent(this.props.dirent, 'starred', false);
@@ -209,11 +211,13 @@ class DirentListItem extends React.Component {
}
onItemDelete = (e) => {
e.preventDefault();
e.nativeEvent.stopImmediatePropagation(); //for document event
this.props.onItemDelete(this.props.dirent);
}
onItemShare = (e) => {
e.preventDefault();
e.nativeEvent.stopImmediatePropagation(); //for document event
this.setState({isShareDialogShow: !this.state.isShareDialogShow});
}
@@ -382,6 +386,7 @@ class DirentListItem extends React.Component {
}
onItemDownload = (e) => {
e.preventDefault();
e.nativeEvent.stopImmediatePropagation();
let dirent = this.props.dirent;
let repoID = this.props.repoID;
@@ -570,33 +575,15 @@ class DirentListItem extends React.Component {
<Fragment>
{this.state.isOperationShow && !dirent.isSelected &&
<div className="operations">
<ul className="operation-group">
{(dirent.permission === 'rw' || dirent.permission === 'r') && (
<li className="operation-group-item">
<i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
</li>
)}
{(isCustomPermission && canDownload) && (
<li className="operation-group-item">
<i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
</li>
{(dirent.permission === 'rw' || dirent.permission === 'r' || (isCustomPermission && canDownload)) && (
<a href="#" className="op-icon sf2-icon-download" title={gettext('Download')} role="button" aria-label={gettext('Download')} onClick={this.onItemDownload}></a>
)}
{showShareBtn && (
<li className="operation-group-item">
<i className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></i>
</li>
<a href="#" className="op-icon sf2-icon-share" title={gettext('Share')} role="button" aria-label={gettext('Share')} onClick={this.onItemShare}></a>
)}
{dirent.permission === 'rw' && (
<li className="operation-group-item">
<i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
</li>
{(dirent.permission === 'rw' || (isCustomPermission && canDelete)) && (
<a href="#" className="op-icon sf2-icon-delete" title={gettext('Delete')} role="button" aria-label={gettext('Delete')} onClick={this.onItemDelete}></a>
)}
{(isCustomPermission && canDelete) && (
<li className="operation-group-item">
<i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
</li>
)}
<li className="operation-group-item">
<ItemDropdownMenu
item={this.props.dirent}
toggleClass={'sf2-icon-caret-down'}
@@ -606,41 +593,21 @@ class DirentListItem extends React.Component {
unfreezeItem={this.unfreezeItem}
freezeItem={this.props.freezeItem}
/>
</li>
</ul>
</div>
}
</Fragment> :
<Fragment>
{this.state.isOperationShow &&
<div className="operations">
<ul className="operation-group">
{(dirent.permission === 'rw' || dirent.permission === 'r') && (
<li className="operation-group-item">
<i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
</li>
)}
{(isCustomPermission && canDownload) && (
<li className="operation-group-item">
<i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
</li>
{(dirent.permission === 'rw' || dirent.permission === 'r' || (isCustomPermission && canDownload)) && (
<a href="#" className="op-icon sf2-icon-download" title={gettext('Download')} role="button" aria-label={gettext('Download')} onClick={this.onItemDownload}></a>
)}
{showShareBtn && (
<li className="operation-group-item">
<i className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></i>
</li>
<a href="#" className="op-icon sf2-icon-share" title={gettext('Share')} role="button" aria-label={gettext('Share')} onClick={this.onItemShare}></a>
)}
{(dirent.permission === 'rw') && (
<li className="operation-group-item">
<i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
</li>
{(dirent.permission === 'rw' || (isCustomPermission && canDelete)) && (
<a href="#" className="op-icon sf2-icon-delete" title={gettext('Delete')} role="button" aria-label={gettext('Delete')} onClick={this.onItemDelete}></a>
)}
{(isCustomPermission && canDelete) && (
<li className="operation-group-item">
<i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
</li>
)}
<li className="operation-group-item">
<ItemDropdownMenu
item={this.props.dirent}
toggleClass={'sf2-icon-caret-down'}
@@ -650,8 +617,6 @@ class DirentListItem extends React.Component {
unfreezeItem={this.unfreezeItem}
freezeItem={this.props.freezeItem}
/>
</li>
</ul>
</div>
}
</Fragment>
@@ -690,6 +655,7 @@ class DirentListItem extends React.Component {
<tr
className={trClass}
draggable={this.canDrag}
onFocus={this.onMouseEnter}
onMouseEnter={this.onMouseEnter}
onMouseOver={this.onMouseOver}
onMouseLeave={this.onMouseLeave}
@@ -706,8 +672,11 @@ class DirentListItem extends React.Component {
<input type="checkbox" className="vam" onChange={this.onItemSelected} checked={dirent.isSelected}/>
</td>
<td className="pl10">
{dirent.starred !== undefined && !dirent.starred && <i className="far fa-star star-empty cursor-pointer" onClick={this.onItemStarred}></i>}
{dirent.starred !== undefined && dirent.starred && <i className="fas fa-star cursor-pointer" onClick={this.onItemStarred}></i>}
{dirent.starred !== undefined &&
<a href="#" role="button" aria-label={dirent.starred ? gettext('Unstar') : gettext('Star')} onClick={this.onItemStarred}>
<i className={`fa-star ${dirent.starred ? 'fas' : 'far star-empty'}`}></i>
</a>
}
</td>
<td className="pl10">
<div className="dir-icon">
@@ -796,6 +765,8 @@ class DirentListItem extends React.Component {
return (
<DropdownItem className="mobile-menu-item" key={index} data-op={item.key} onClick={this.onMobileMenuItemClick}>{item.value}</DropdownItem>
);
} else {
return null;
}
})}
</div>

2
frontend/src/components/dropdown-menu/item-dropdown-menu.js
View File

@@ -146,6 +146,8 @@ class ItemDropdownMenu extends React.Component {
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick}>
<DropdownToggle
tag={tagName || 'i'}
role="button"
tabIndex="0"
className={toggleClass}
title={gettext('More Operations')}
data-toggle="dropdown"

2
frontend/src/components/side-nav-footer.js
View File

@@ -13,9 +13,7 @@ class SideNavFooter extends React.Component {
}
onAboutDialogToggle = (e) => {
if (e) {
e.preventDefault();
}
this.setState({isAboutDialogShow: !this.state.isAboutDialogShow});
}

9
frontend/src/css/dirent-list-item.css
View File

@@ -1,15 +1,6 @@
.tr-drop-effect {
background-color: #f8f8f8;
}
.operations {
display: flex;
}
.operations .operation-group {
list-style: none;
}
.operation-group .operation-group-item {
display: inline-block;
}
.star-empty {
color: #d0d0d0;

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

@@ -146,13 +146,15 @@ class MylibRepoMenu extends React.Component {
return (
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
<DropdownToggle
className="sf-dropdown-toggle sf2-icon-caret-down border-0 p-0"
tag="i"
role="button"
tabIndex="0"
className="sf-dropdown-toggle sf2-icon-caret-down"
title={gettext('More Operations')}
aria-label={gettext('More Operations')}
onClick={this.onDropdownToggleClick}
onKeyDown={this.onDropdownToggleKeyDown}
data-toggle="dropdown"
aria-haspopup={true}
style={{'minWidth': '0'}}
/>
<DropdownMenu>
{operations.map((item, index)=> {