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

frontend/src/components/user-settings/delete-account.js

@@ -35,7 +35,7 @@ class DeleteAccount extends React.Component {
         <div className="setting-item" id="del-account">
           <h3 className="setting-item-heading">{gettext('Delete Account')}</h3>
           <p className="mb-2">{gettext('This operation will not be reverted. Please think twice!')}</p>
-          <button className="btn btn-outline-primary" onClick={this.confirmDelete}>{gettext('Delete')}</button>
+          <button type="button" className="btn btn-outline-primary" onClick={this.confirmDelete}>{gettext('Delete')}</button>
         </div>
         {this.state.isConfirmDialogOpen && (
           <ModalPortal>

frontend/src/components/user-settings/social-login-dingtalk.js

@@ -19,8 +19,7 @@ class SocialLoginDintalk extends React.Component {
     };
   }
 
-  confirmDisconnect = (e) => {
+  confirmDisconnect = () => {
-    e.preventDefault();
     this.setState({
       isConfirmDialogOpen: true
     });
@@ -39,7 +38,7 @@ class SocialLoginDintalk extends React.Component {
           <h3 className="setting-item-heading">{gettext('Social Login')}</h3>
           <p className="mb-2">{langCode == 'zh-cn' ? '钉钉': 'Dingtalk'}</p>
           {socialConnectedDingtalk ?
-            <a href="#" className="btn btn-outline-primary" onClick={this.confirmDisconnect}>{gettext('Disconnect')}</a> :
+            <button className="btn btn-outline-primary" onClick={this.confirmDisconnect}>{gettext('Disconnect')}</button> :
             <a href={`${siteRoot}dingtalk/connect/?next=${encodeURIComponent(socialNextPage)}`} className="btn btn-outline-primary">{gettext('Connect')}</a>
           }
         </div>

frontend/src/components/user-settings/social-login.js

@@ -19,8 +19,7 @@ class SocialLogin extends React.Component {
     };
   }
 
-  confirmDisconnect = (e) => {
+  confirmDisconnect = () => {
-    e.preventDefault();
     this.setState({
       isConfirmDialogOpen: true
     });
@@ -39,7 +38,7 @@ class SocialLogin extends React.Component {
           <h3 className="setting-item-heading">{gettext('Social Login')}</h3>
           <p className="mb-2">{langCode == 'zh-cn' ? '企业微信': 'WeChat Work'}</p>
           {socialConnected ?
-            <a href="#" className="btn btn-outline-primary" onClick={this.confirmDisconnect}>{gettext('Disconnect')}</a> :
+            <button className="btn btn-outline-primary" onClick={this.confirmDisconnect}>{gettext('Disconnect')}</button> :
             <a href={`${siteRoot}work-weixin/oauth-connect/?next=${encodeURIComponent(socialNextPage)}`} className="btn btn-outline-primary">{gettext('Connect')}</a>
           }
         </div>

frontend/src/components/user-settings/user-avatar-form.js

@@ -80,15 +80,21 @@ class UserAvatarForm extends React.Component {
     });
   }
 
+  onEditIconKeyDown = (e) => {
+    if (e.key == 'Enter' || e.key == 'Space') {
+      e.target.click();
+    }
+  }
+
   render() {
     return (
       <form ref={this.form} className="form-group row" encType="multipart/form-data" method="post" action={`${siteRoot}avatar/add/`}>
         <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
         <label className="col-sm-1 col-form-label">{gettext('Avatar:')}</label>
-        <div className="col-auto position-relative" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <div className="col-auto position-relative" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver} tabIndex="0">
           <img src={this.state.avatarSrc} width="80" height="80" alt="" className="user-avatar" />
           <input type="file" name="avatar" className="d-none" onChange={this.fileInputChange} ref={this.fileInput} />
-          <span className={`avatar-edit fas fa-edit ${!this.state.isEditShown && 'd-none'}`} onClick={this.openFileInput}></span>
+          <span className={`avatar-edit fas fa-edit ${!this.state.isEditShown && 'd-none'}`} onClick={this.openFileInput} role="button" aria-label={gettext('Edit')} tabIndex="0" onKeyDown={this.onEditIconKeyDown}></span>
         </div>
       </form>
     );

frontend/src/components/user-settings/web-api-auth-token.js

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

frontend/src/components/user-settings/webdav-password.js

@@ -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>
+                <label className="m-0 mr-2" htmlFor="passwd">{gettext('Password:')}</label>
-                <input className="border-0 mr-1" type="text" value={isPasswordVisible ? password : '**********'} readOnly={true} size={Math.max(password.length, 10)} />
+                <input id="passwd" 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>
+                <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>