haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-10-21 19:00:12 +00:00
Code Issues Releases Wiki Activity

A11y keyboard library list (#8288)

Browse Source 
* [aria] make the 'view mode' tool accessible by keyboard for all the pages with it

* [aria] make the 'sort menu' tool accessible by keyboard for all the pages with it

* [aria] make the 'single dropdown menu' accessible by keyboard for all the pages with it

* [a11y] make the 'star/unstar' icon accessible by keyboard for repo list pages('my libs', 'shared with me', 'shared with all', group/department)

* [a11y] make the 'share, delete' icons accessible by keyboard for 'my libs'

* [a11y] improvements for 'my libs'

* [a11y] make the 'leave share' icon accessible by keyboard for 'shared with ocm'

* [a11y] improvements for 'shared with me'

* [a11y] improvements for 'shared with all', 'group', 'department'
This commit is contained in:
llj
2025-10-10 14:44:05 +08:00
committed by GitHub
parent dfaa8480f1
commit 36ef437c68
9 changed files with 146 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/op-icon.js
View File

@@ -13,7 +13,7 @@ class OpIcon extends React.Component {
render() {
const { className, op, title } = this.props;
return (
<span
<i
tabIndex="0"
role="button"
className={className}
@@ -22,7 +22,7 @@ class OpIcon extends React.Component {
onClick={op}
onKeyDown={Utils.onKeyDown}
>
</span>
</i>
);
}
}

60
frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
View File

@@ -21,6 +21,7 @@ import RepoAPITokenDialog from '../dialog/repo-api-token-dialog';
import RepoShareAdminDialog from '../dialog/repo-share-admin-dialog';
import { LIST_MODE } from '../dir-view-mode/constants';
import TransferDialog from '../dialog/transfer-dialog';
import OpIcon from '../../components/op-icon';
dayjs.extend(relativeTime);
@@ -441,9 +442,28 @@ class SharedRepoListItem extends React.Component {
} else {
operations = this.generatorOperations();
}
const shareOperation = <i className="op-icon sf3-font-share sf3-font" title={gettext('Share')} role="button" aria-label={gettext('Share')} onClick={this.onItemShare}></i>;
const unshareOperation = <i className="op-icon sf2-icon-x3" title={gettext('Unshare')} role="button" aria-label={gettext('Unshare')} onClick={this.onItemUnshare}></i>;
const deleteOperation = <i className="op-icon sf3-font-delete1 sf3-font" title={gettext('Delete')} role="button" aria-label={gettext('Delete')} onClick={this.onItemDeleteToggle}></i>;
const shareOperation = (
<OpIcon
className="op-icon sf3-font-share sf3-font"
title={gettext('Share')}
op={this.onItemShare}
/>
);
const unshareOperation = (
<OpIcon
className="op-icon sf2-icon-x3"
title={gettext('Unshare')}
op={this.onItemUnshare}
/>
);
const deleteOperation = (
<OpIcon
className="op-icon sf3-font-delete1 sf3-font"
title={gettext('Delete')}
role="button" aria-label={gettext('Delete')}
op={this.onItemDeleteToggle}
/>
);
if (this.isDepartmentOwnerGroupMember) {
const advancedOperations = this.getAdvancedOperations();
@@ -482,8 +502,11 @@ class SharedRepoListItem extends React.Component {
>
<DropdownToggle
tag="span"
role="button"
tabIndex="0"
className="dropdown-item font-weight-normal rounded-0 d-flex justify-content-between align-items-center pr-2"
onMouseEnter={this.toggleAdvancedMenuShown}
onKeyDown={this.toggleAdvancedMenuShown}
>
{this.translateMenuItem(item)}
<i className="sf3-font-down sf3-font rotate-270"></i>
@@ -521,8 +544,7 @@ class SharedRepoListItem extends React.Component {
}
};
onToggleStarRepo = (e) => {
e.preventDefault();
onToggleStarRepo = () => {
const { repo_name: repoName } = this.props.repo;
if (this.state.isStarred) {
seafileAPI.unstarItem(this.props.repo.repo_id, '/').then(() => {
@@ -565,22 +587,17 @@ class SharedRepoListItem extends React.Component {
onContextMenu={this.handleContextMenu}
>
<td className="text-center">
<i
role="button"
title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
onClick={this.onToggleStarRepo}
<OpIcon
className={`${this.state.isStarred ? 'sf3-font-star' : 'sf3-font-star-empty'} sf3-font`}
>
</i>
title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
op={this.onToggleStarRepo}
/>
</td>
<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}/> :
<Fragment>
<Link to={libPath}>{repo.repo_name}</Link>
</Fragment>
<Link to={libPath}>{repo.repo_name}</Link>
}
</td>
<td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
@@ -603,14 +620,11 @@ class SharedRepoListItem extends React.Component {
<Fragment>
<Link to={libPath} className="library-name text-truncate" title={repo.repo_name}>{repo.repo_name}</Link>
{isStarred &&
<i
role="button"
title={gettext('Unstar')}
aria-label={gettext('Unstar')}
onClick={this.onToggleStarRepo}
className='op-icon library-grid-item-icon sf3-font-star sf3-font'
>
</i>
<OpIcon
className='op-icon library-grid-item-icon sf3-font-star sf3-font'
title={gettext('Unstar')}
op={this.onToggleStarRepo}
/>
}
</Fragment>
}

9
frontend/src/components/sort-menu.js
View File

@@ -51,16 +51,13 @@ class SortMenu extends React.Component {
toggle={this.toggleDropdownMenu}
>
<DropdownToggle
tag="span"
role="button"
data-toggle="dropdown"
className="border-0 font-weight-normal cur-view-path-btn px-1"
title={gettext('Switch sort mode')}
data-toggle="dropdown"
aria-label={gettext('Switch sort mode')}
aria-expanded={isDropdownMenuOpen}
>
<span className="cur-view-path-btn px-1">
<i className="sf3-font-sort2 sf3-font" aria-label={gettext('Switch sort mode')}></i>
</span>
<i className="sf3-font-sort2 sf3-font"></i>
</DropdownToggle>
<DropdownMenu className="mt-1">
{sortOptions.map((item, index) => {

6
frontend/src/components/toolbar/single-dropdown-toolbar.js
View File

@@ -41,13 +41,11 @@ class SingleDropdownToolbar extends React.Component {
return (
<Dropdown isOpen={this.state.isDropdownMenuOpen} toggle={this.toggleDropdownMenu} direction="down">
<DropdownToggle
tag="span"
role="button"
className={withPlusIcon ? 'ml-2 sf-dropdown-combined-toggle' : 'ml-1 sf-dropdown-toggle'}
className={`border-0 font-weight-normal ${withPlusIcon ? 'ml-2 sf-dropdown-combined-toggle' : 'ml-1 sf-dropdown-toggle'}`}
onClick={this.toggleDropdownMenu}
onKeyDown={this.onDropdownToggleKeyDown}
data-toggle="dropdown"
aria-label={gettext('More options')}
aria-label={gettext('Operations')}
aria-expanded={this.state.isDropdownMenuOpen}
>
{withPlusIcon && <i className="sf3-font-new sf3-font main-icon"></i>}

13
frontend/src/components/view-modes.js
View File

@@ -60,16 +60,13 @@ class ViewModes extends React.Component {
id="cur-view-change-mode-dropdown"
>
<DropdownToggle
tag="span"
role="button"
data-toggle="dropdown"
className="border-0 font-weight-normal cur-view-path-btn px-1"
title={gettext('Switch view mode')}
data-toggle="dropdown"
aria-label={gettext('Switch view mode')}
aria-expanded={isDropdownMenuOpen}
>
<span className='cur-view-path-btn px-1'>
<span className={`sf3-font sf3-font-${currentViewMode}-view`} aria-label={gettext('Switch view mode')}></span>
</span>
<i className={`sf3-font sf3-font-${currentViewMode}-view`}></i>
</DropdownToggle>
<DropdownMenu className="mt-1">
{options.map((item, index) => {
@@ -77,13 +74,13 @@ class ViewModes extends React.Component {
<DropdownItem className='p-0' key={index} onClick={this.props.switchViewMode.bind(this, item.value)}>
<div className="view-modes-dropdown-wrapper">
<span className='view-modes-dropdown-tick'>
{currentViewMode === item.value && <i className="sf2-icon-tick" aria-hidden="true"></i>}
{currentViewMode === item.value && <i className="sf2-icon-tick"></i>}
</span>
<span className="view-modes-dropdown-content d-flex align-items-center">
<span className={`sf3-font-${item.icon} sf3-font mr-2`} aria-hidden="true"></span>
<span>{item.text}</span>
</span>
<span className="view-modes-dropdown-shortcut ml-4 d-flex align-items-center" aria-hidden="true">{item.shortcut}</span>
<span className="view-modes-dropdown-shortcut ml-4 d-flex align-items-center">{item.shortcut}</span>
</div>
</DropdownItem>
);

6
frontend/src/css/single-dropdown-toolbar.css
View File

@@ -2,13 +2,17 @@
color: var(--bs-icon-color);
padding: 2px 4px;
border-radius: 3px;
line-height: 1.2;
}
.sf-dropdown-combined-toggle:active,
.sf-dropdown-combined-toggle:hover {
background: var(--bs-hover-bg);
color: var(--bs-icon-color)!important;
background: var(--bs-hover-bg)!important;
}
.sf-dropdown-combined-toggle .main-icon {
font-size: 1rem;
margin-right: 2px;
}

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

@@ -23,6 +23,7 @@ import RepoShareAdminDialog from '../../components/dialog/repo-share-admin-dialo
import OfficeSuiteDialog from '../../components/dialog/repo-office-suite-dialog';
import { LIST_MODE } from '../../components/dir-view-mode/constants';
import { userAPI } from '../../utils/user-api';
import OpIcon from '../../components/op-icon';
const propTypes = {
currentViewMode: PropTypes.string,
@@ -61,13 +62,6 @@ class MylibRepoListItem extends React.Component {
};
}
onFocus = () => {
if (!this.props.isItemFreezed) {
this.setState({
isOpIconShow: true
});
}
};
onMouseEnter = () => {
if (!this.props.isItemFreezed) {
@@ -282,16 +276,19 @@ class MylibRepoListItem extends React.Component {
let iconTitle = Utils.getLibIconTitle(repo);
let repoURL = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
return currentViewMode == LIST_MODE ? (
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onFocus} onContextMenu={this.handleContextMenu}>
<tr
className={this.state.highlight ? 'tr-highlight' : ''}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
onFocus={this.onMouseEnter}
onContextMenu={this.handleContextMenu}
>
<td className="text-center">
<i
role="button"
title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
onClick={this.onToggleStarRepo}
<OpIcon
className={`${this.state.isStarred ? 'sf3-font-star' : 'sf3-font-star-empty'} sf3-font`}
>
</i>
title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
op={this.onToggleStarRepo}
/>
</td>
<td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
<td>
@@ -303,9 +300,7 @@ class MylibRepoListItem extends React.Component {
/>
)}
{!this.state.isRenaming && repo.repo_name && (
<Fragment>
<Link to={repoURL}>{repo.repo_name}</Link>
</Fragment>
<Link to={repoURL}>{repo.repo_name}</Link>
)}
{!this.state.isRenaming && !repo.repo_name &&
(gettext('Broken (please contact your administrator to fix this library)'))
@@ -314,8 +309,16 @@ class MylibRepoListItem extends React.Component {
<td>
{(repo.repo_name && this.state.isOpIconShow) && (
<div className="d-flex align-items-center">
<i className="op-icon sf3-font-share sf3-font" title={gettext('Share')} role="button" aria-label={gettext('Share')} onClick={this.onShareToggle}></i>
<i className="op-icon sf3-font-delete1 sf3-font" title={gettext('Delete')} role="button" aria-label={gettext('Delete')} onClick={this.onDeleteToggle}></i>
<OpIcon
className="op-icon sf3-font-share sf3-font"
title={gettext('Share')}
op={this.onShareToggle}
/>
<OpIcon
className="op-icon sf3-font-delete1 sf3-font"
title={gettext('Delete')}
op={this.onDeleteToggle}
/>
<LibraryOpMenu
isPC={true}
repo={this.props.repo}
@@ -335,7 +338,7 @@ class MylibRepoListItem extends React.Component {
className="library-grid-item px-3 d-flex justify-content-between align-items-center"
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
onFocus={this.onFocus}
onFocus={this.onMouseEnter}
onContextMenu={this.handleContextMenu}
>
<div className="d-flex align-items-center text-truncate">
@@ -351,14 +354,11 @@ class MylibRepoListItem extends React.Component {
<Fragment>
<Link to={repoURL} className="library-name text-truncate" title={repo.repo_name}>{repo.repo_name}</Link>
{isStarred &&
<i
role="button"
title={gettext('Unstar')}
aria-label={gettext('Unstar')}
className='op-icon library-grid-item-icon sf3-font-star sf3-font'
onClick={this.onToggleStarRepo}
>
</i>
<OpIcon
className='op-icon library-grid-item-icon sf3-font-star sf3-font'
title={gettext('Unstar')}
op={this.onToggleStarRepo}
/>
}
</Fragment>
)}
@@ -368,8 +368,16 @@ class MylibRepoListItem extends React.Component {
</div>
{(repo.repo_name && this.state.isOpIconShow) && (
<div className="flex-shrink-0 d-flex align-items-center">
<i className="op-icon sf3-font-share sf3-font" title={gettext('Share')} role="button" aria-label={gettext('Share')} onClick={this.onShareToggle}></i>
<i className="op-icon sf3-font-delete1 sf3-font" title={gettext('Delete')} role="button" aria-label={gettext('Delete')} onClick={this.onDeleteToggle}></i>
<OpIcon
className="op-icon sf3-font-share sf3-font"
title={gettext('Share')}
op={this.onShareToggle}
/>
<OpIcon
className="op-icon sf3-font-delete1 sf3-font"
title={gettext('Delete')}
op={this.onDeleteToggle}
/>
<LibraryOpMenu
isPC={true}
repo={this.props.repo}

13
frontend/src/pages/share-with-ocm/shared-with-ocm.js
View File

@@ -18,6 +18,7 @@ import SortOptionsDialog from '../../components/dialog/sort-options';
import LibsMobileThead from '../../components/libs-mobile-thead';
import { LIST_MODE } from '../../components/dir-view-mode/constants';
import MobileItemMenu from '../../components/mobile-item-menu';
import OpIcon from '../../components/op-icon';
const propTypes = {
currentViewMode: PropTypes.string,
@@ -202,7 +203,11 @@ class Item extends Component {
<td><img src={item.icon_url} title={item.icon_title} alt={item.icon_title} width="24" /></td>
<td><Link to={shareRepoUrl}>{item.repo_name}</Link></td>
<td>
<i role="button" className={`op-icon sf2-icon-x3 ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Leave Share')} aria-label={gettext('Leave Share')} onClick={this.leaveShare}></i>
<OpIcon
className={`op-icon sf2-icon-x3 ${isOpIconShown ? '' : 'invisible'}`}
title={gettext('Leave Share')}
op={this.leaveShare}
/>
</td>
{inAllLibs
? (
@@ -231,7 +236,11 @@ class Item extends Component {
<Link to={shareRepoUrl} className="library-name text-truncate" title={item.repo_name}>{item.repo_name}</Link>
</div>
<div className="flex-shrink-0">
<i role="button" className={`op-icon sf2-icon-x3 ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Leave Share')} aria-label={gettext('Leave Share')} onClick={this.leaveShare}></i>
<OpIcon
className={`op-icon sf2-icon-x3 ${isOpIconShown ? '' : 'invisible'}`}
title={gettext('Leave Share')}
op={this.leaveShare}
/>
</div>
</div>
);

73
frontend/src/pages/shared-libs/item.js
View File

@@ -12,6 +12,7 @@ import ModalPortal from '../../components/modal-portal';
import ShareDialog from '../../components/dialog/share-dialog';
import MobileItemMenu from '../../components/mobile-item-menu';
import { LIST_MODE } from '../../components/dir-view-mode/constants';
import OpIcon from '../../components/op-icon';
dayjs.extend(relativeTime);
@@ -55,14 +56,11 @@ class Item extends Component {
}
};
share = (e) => {
e.preventDefault();
share = () => {
this.setState({ isShowSharedDialog: true });
};
leaveShare = (e) => {
e.preventDefault();
leaveShare = () => {
const data = this.props.data;
let request;
@@ -129,10 +127,10 @@ class Item extends Component {
onMenuItemClick = (operation, event) => {
switch (operation) {
case 'Share':
this.share(event);
this.share();
break;
case 'Unshare':
this.leaveShare(event);
this.leaveShare();
break;
default:
break;
@@ -158,29 +156,38 @@ class Item extends Component {
return (
<Fragment>
{currentViewMode == LIST_MODE ? (
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver} onContextMenu={this.handleContextMenu}>
<tr
className={this.state.highlight ? 'tr-highlight' : ''}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
onFocus={this.handleMouseOver}
onContextMenu={this.handleContextMenu}
>
<td className="text-center">
<i
role="button"
title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
onClick={this.onToggleStarRepo}
<OpIcon
className={`${this.state.isStarred ? 'sf3-font-star' : 'sf3-font-star-empty'} sf3-font`}
>
</i>
title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
op={this.onToggleStarRepo}
/>
</td>
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
<td>
<Fragment>
<Link to={shareRepoUrl}>{data.repo_name}</Link>
</Fragment>
<Link to={shareRepoUrl}>{data.repo_name}</Link>
</td>
<td>
<div className="d-flex align-items-center">
{(isPro && data.is_admin) &&
<a href="#" className={shareIconClassName} title={gettext('Share')} role="button" aria-label={gettext('Share')} onClick={this.share}></a>
<OpIcon
className={shareIconClassName}
title={gettext('Share')}
op={this.share}
/>
}
<a href="#" className={leaveShareIconClassName} title={gettext('Leave Share')} role="button" aria-label={gettext('Leave Share')} onClick={this.leaveShare}></a>
<OpIcon
className={leaveShareIconClassName}
title={gettext('Leave Share')}
op={this.leaveShare}
/>
</div>
</td>
<td>{data.size}</td>
@@ -199,22 +206,26 @@ class Item extends Component {
<img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="36" className="mr-2" />
<Link to={shareRepoUrl} className="text-truncate library-name" title={data.repo_name}>{data.repo_name}</Link>
{isStarred &&
<i
role="button"
title={gettext('Unstar')}
aria-label={gettext('Unstar')}
onClick={this.onToggleStarRepo}
className='op-icon library-grid-item-icon sf3-font-star sf3-font'
>
</i>
<OpIcon
className='op-icon library-grid-item-icon sf3-font-star sf3-font'
title={gettext('Unstar')}
op={this.onToggleStarRepo}
/>
}
</div>
<div className="flex-shrink-0 d-flex align-items-center">
{(isPro && data.is_admin) &&
<a href="#" className={shareIconClassName} title={gettext('Share')} role="button" aria-label={gettext('Share')} onClick={this.share}></a>
<OpIcon
className={shareIconClassName}
title={gettext('Share')}
op={this.share}
/>
}
<a href="#" className={leaveShareIconClassName} title={gettext('Leave Share')} role="button" aria-label={gettext('Leave Share')} onClick={this.leaveShare}></a>
<OpIcon
className={leaveShareIconClassName}
title={gettext('Leave Share')}
op={this.leaveShare}
/>
</div>
</div>
)}