haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-06 17:33:18 +00:00
Code Issues Releases Wiki Activity

[a11y] shared dir view: added support for 'keyboard access'

Browse Source
This commit is contained in:
llj
2021-09-30 11:00:38 +08:00
parent eef9824233
commit 8b08ccc6de
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/shared-dir-view.js
View File

@@ -289,8 +289,8 @@ class SharedDirView extends React.Component {
<div> <div>
{isDesktop && {isDesktop &&
<div className="view-mode btn-group"> <div className="view-mode btn-group">
<a href={`?p=${encodeURIComponent(relativePath)}&mode=list`} className={`${modeBaseClass} sf2-icon-list-view ${mode == 'list' ? 'current-mode' : ''}`} title={gettext('List')}></a> <a href={`?p=${encodeURIComponent(relativePath)}&mode=list`} className={`${modeBaseClass} sf2-icon-list-view ${mode == 'list' ? 'current-mode' : ''}`} title={gettext('List')} aria-label={gettext('List')}></a>
<a href={`?p=${encodeURIComponent(relativePath)}&mode=grid`} className={`${modeBaseClass} sf2-icon-grid-view ${mode == 'grid' ? 'current-mode' : ''}`} title={gettext('Grid')}></a> <a href={`?p=${encodeURIComponent(relativePath)}&mode=grid`} className={`${modeBaseClass} sf2-icon-grid-view ${mode == 'grid' ? 'current-mode' : ''}`} title={gettext('Grid')} aria-label={gettext('Grid')}></a>
</div> </div>
} }
{canUpload && ( {canUpload && (
@@ -516,7 +516,7 @@ class Item extends React.Component {
if (item.is_dir) { if (item.is_dir) {
return isDesktop ? ( return isDesktop ? (
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}> <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
{showDownloadIcon && {showDownloadIcon &&
<td className="text-center"> <td className="text-center">
<input type="checkbox" checked={item.isSelected} onChange={this.toggleItemSelected} /> <input type="checkbox" checked={item.isSelected} onChange={this.toggleItemSelected} />
@@ -530,7 +530,7 @@ class Item extends React.Component {
<td title={moment(item.last_modified).format('llll')}>{moment(item.last_modified).fromNow()}</td> <td title={moment(item.last_modified).format('llll')}>{moment(item.last_modified).fromNow()}</td>
<td> <td>
{showDownloadIcon && {showDownloadIcon &&
<a className={`action-icon sf2-icon-download${isIconShown ? '' : ' invisible'}`} href="#" onClick={this.zipDownloadFolder} title={gettext('Download')} aria-label={gettext('Download')}> <a role="button" className={`action-icon sf2-icon-download${isIconShown ? '' : ' invisible'}`} href="#" onClick={this.zipDownloadFolder} title={gettext('Download')} aria-label={gettext('Download')}>
</a> </a>
} }
</td> </td>
@@ -568,7 +568,7 @@ class Item extends React.Component {
const fileURL = `${siteRoot}d/${token}/files/?p=${encodeURIComponent(item.file_path)}`; const fileURL = `${siteRoot}d/${token}/files/?p=${encodeURIComponent(item.file_path)}`;
const thumbnailURL = item.encoded_thumbnail_src ? `${siteRoot}${item.encoded_thumbnail_src}` : ''; const thumbnailURL = item.encoded_thumbnail_src ? `${siteRoot}${item.encoded_thumbnail_src}` : '';
return isDesktop ? ( return isDesktop ? (
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}> <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
{showDownloadIcon && {showDownloadIcon &&
<td className="text-center"> <td className="text-center">
<input type="checkbox" checked={item.isSelected} onChange={this.toggleItemSelected} /> <input type="checkbox" checked={item.isSelected} onChange={this.toggleItemSelected} />
@@ -669,13 +669,13 @@ class GridItem extends React.Component {
if (item.is_dir) { if (item.is_dir) {
const folderURL = `?p=${encodeURIComponent(item.folder_path.substr(0, item.folder_path.length - 1))}&mode=${mode}`; const folderURL = `?p=${encodeURIComponent(item.folder_path.substr(0, item.folder_path.length - 1))}&mode=${mode}`;
return ( return (
<li className="grid-item" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}> <li className="grid-item" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
<a href={folderURL} className="grid-file-img-link d-block"> <a href={folderURL} className="grid-file-img-link d-block">
<img src={Utils.getFolderIconUrl(false, 192)} alt="" width="96" height="96" /> <img src={Utils.getFolderIconUrl(false, 192)} alt="" width="96" height="96" />
</a> </a>
<a href={folderURL} className="grid-file-name grid-file-name-link">{item.folder_name}</a> <a href={folderURL} className="grid-file-name grid-file-name-link">{item.folder_name}</a>
{showDownloadIcon && {showDownloadIcon &&
<a className={`action-icon sf2-icon-download${isIconShown ? '' : ' invisible'}`} href="#" onClick={this.zipDownloadFolder} title={gettext('Download')} aria-label={gettext('Download')}> <a role="button" className={`action-icon sf2-icon-download${isIconShown ? '' : ' invisible'}`} href="#" onClick={this.zipDownloadFolder} title={gettext('Download')} aria-label={gettext('Download')}>
</a> </a>
} }
</li> </li>
@@ -684,7 +684,7 @@ class GridItem extends React.Component {
const fileURL = `${siteRoot}d/${token}/files/?p=${encodeURIComponent(item.file_path)}`; const fileURL = `${siteRoot}d/${token}/files/?p=${encodeURIComponent(item.file_path)}`;
const thumbnailURL = item.encoded_thumbnail_src ? `${siteRoot}${item.encoded_thumbnail_src}` : ''; const thumbnailURL = item.encoded_thumbnail_src ? `${siteRoot}${item.encoded_thumbnail_src}` : '';
return ( return (
<li className="grid-item" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}> <li className="grid-item" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
<a href={fileURL} className="grid-file-img-link d-block" onClick={this.handleFileClick}> <a href={fileURL} className="grid-file-img-link d-block" onClick={this.handleFileClick}>
{thumbnailURL ? {thumbnailURL ?
<img className="thumbnail" src={thumbnailURL} alt="" /> : <img className="thumbnail" src={thumbnailURL} alt="" /> :