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

a11y] user settings: added support for 'keyboard access'

Browse Source
This commit is contained in:
llj
2021-09-30 17:22:59 +08:00
parent 1a4292d977
commit 62ec844ce9
6 changed files with 31 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/user-settings/webdav-password.js
View File

@@ -45,6 +45,12 @@ class WebdavPassword extends React.Component {
});
}
onIconKeyDown = (e) => {
if (e.key == 'Enter' || e.key == 'Space') {
e.target.click();
}
}
render() {
const { password, isPasswordVisible } = this.state;
return (
@@ -54,9 +60,9 @@ class WebdavPassword extends React.Component {
{password ? (
<React.Fragment>
<div className="d-flex align-items-center">
<label className="m-0 mr-2">{gettext('Password:')}</label>
<input className="border-0 mr-1" type="text" value={isPasswordVisible ? password : '**********'} readOnly={true} size={Math.max(password.length, 10)} />
<span onClick={this.togglePasswordVisible} className={`eye-icon fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></span>
<label className="m-0 mr-2" htmlFor="passwd">{gettext('Password:')}</label>
<input id="passwd" className="border-0 mr-1" type="text" value={isPasswordVisible ? password : '**********'} readOnly={true} size={Math.max(password.length, 10)} />
<span tabIndex="0" role="button" aria-label={isPasswordVisible? gettext('Hide') : gettext('Show')} onClick={this.togglePasswordVisible} onKeyDown={this.onIconKeyDown} className={`eye-icon fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></span>
</div>
<button className="btn btn-outline-primary mt-2" onClick={this.toggleDialog}>{gettext('Update')}</button>
</React.Fragment>