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

[a11y] file view: added support for 'keyboard access' & bugfix for 'internal link'

Browse Source
This commit is contained in:
llj
2021-09-29 17:44:53 +08:00
parent aef44a8605
commit eef9824233
3 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/dialog/internal-link-dialog.js
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import toaster from '../toast'; import toaster from '../toast';
@@ -60,8 +60,8 @@ class InternalLinkDialog extends React.Component {
render() { render() {
return ( return (
<span className={'file-internal-link'} title={gettext('Internal Link')}> <Fragment>
<i className="fa fa-link" onClick={this.getInternalLink}></i> <i title={gettext('Internal Link')} role="button" tabIndex="0" aria-label={gettext('Internal Link')} className="file-internal-link fa fa-link" onClick={this.getInternalLink}></i>
<Modal isOpen={this.state.isOpen} toggle={this.toggle}> <Modal isOpen={this.state.isOpen} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>{gettext('Internal Link')}</ModalHeader> <ModalHeader toggle={this.toggle}>{gettext('Internal Link')}</ModalHeader>
<ModalBody> <ModalBody>
@@ -77,7 +77,7 @@ class InternalLinkDialog extends React.Component {
<Button color="primary" onClick={this.copyToClipBoard}>{gettext('Copy')}</Button> <Button color="primary" onClick={this.copyToClipBoard}>{gettext('Copy')}</Button>
</ModalFooter> </ModalFooter>
</Modal> </Modal>
</span> </Fragment>
); );
} }
} }

3
frontend/src/components/file-view/file-info.js
View File

@@ -36,7 +36,8 @@ class FileInfo extends React.PureComponent {
<a className={`file-star ${isStarred ? 'fa' : 'far'} fa-star`} <a className={`file-star ${isStarred ? 'fa' : 'far'} fa-star`}
href="#" href="#"
title={starredText} title={starredText}
aria-label={starredText} role="button"
aria-label={isStarred ? gettext('Unstar') : gettext('Star')}
onClick={this.toggleStar}> onClick={this.toggleStar}>
</a> </a>
<InternalLinkDialog repoID={repoID} path={filePath} /> <InternalLinkDialog repoID={repoID} path={filePath} />

4
frontend/src/components/file-view/file-toolbar.js
View File

@@ -194,11 +194,9 @@ class FileToolbar extends React.Component {
</DropdownItem> </DropdownItem>
)} )}
{filePerm == 'rw' && ( {filePerm == 'rw' && (
<DropdownItem> <a href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`} className="dropdown-item">
<a href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`} className="text-inherit">
{gettext('History')} {gettext('History')}
</a> </a>
</DropdownItem>
)} )}
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>