Merge branch 'master' into celo_integration

* master: feat: small improvements to accessibility across the web app (#562) Group by Sender and Recipient (#567) Enable multiple chains (#496) Silence loading spinner warning (#568) Custom attribute bugfix (#549) Antify Message Bar (#566) # Conflicts: # config.py # eth_worker/eth_src/celery_app.py # eth_worker/eth_src/sql_persistence/interface.py
teamsempo · Dec 7, 2020 · bfd9384 · bfd9384
2 parents b68d9d8 + 4bed100
commit bfd9384
Show file tree

Hide file tree

Showing 79 changed files with 1,445 additions and 553 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -6,5 +6,5 @@ A clear and concise description of the features implemented in the PR of bugs fi
 
 - [ ] Link relevant [trello card](https://trello.com/b/PA2LhlOh/sempo-dev) or [related issue](https://github.com/teamsempo/SempoBlockchain/issues) to the pull request
 - [ ] Request review from relevant @person or team
-- [ ] QA your pull request. This includes running the app, login, testing changes etc.
+- [ ] QA your pull request. This includes running the app, login, testing changes, checking [accessibility](https://www.a11yproject.com/checklist/) etc.
 - [ ] Bump [backend](https://github.com/teamsempo/SempoBlockchain/blob/e3eb0f480e86d5a8ef2c1814127b70ff018671c4/config.py#L7) and/or [frontend](https://github.com/teamsempo/SempoBlockchain/blob/e3eb0f480e86d5a8ef2c1814127b70ff018671c4/app/package.json#L3) versions following Semver
diff --git a/app/client/__fixtures__/message/messageData.ts b/app/client/__fixtures__/message/messageData.ts
diff --git a/app/client/__tests__/functional/reducers/message/actions.test.ts b/app/client/__tests__/functional/reducers/message/actions.test.ts
diff --git a/app/client/__tests__/functional/reducers/message/reducers.test.ts b/app/client/__tests__/functional/reducers/message/reducers.test.ts
diff --git a/app/client/__tests__/functional/sagas/messageSaga.test.ts b/app/client/__tests__/functional/sagas/messageSaga.test.ts
diff --git a/app/client/components/AsyncButton.jsx b/app/client/components/AsyncButton.jsx
@@ -16,6 +16,7 @@ export default class AsyncButton extends React.Component {
             alignItems: "center",
             justifyContent: "center"
           }}
+          label={this.props.label}
         >
           <div style={{ position: "absolute" }}>
             <LoadingSpinner style={{ color: "white" }} />
@@ -36,6 +37,7 @@ export default class AsyncButton extends React.Component {
             alignItems: "center",
             justifyContent: "center"
           }}
+          label={this.props.label}
         >
           <span> Success </span>
         </StyledButton>
@@ -52,6 +54,7 @@ export default class AsyncButton extends React.Component {
           alignItems: "center",
           justifyContent: "center"
         }}
+        label={this.props.label}
       >
         <span> {this.props.buttonText} </span>
       </StyledButton>

diff --git a/app/client/components/NoDataMessage.jsx b/app/client/components/NoDataMessage.jsx
@@ -12,7 +12,10 @@ export default class NoDataMessage extends React.Component {
           <UploadButton
             uploadButtonText={
               <NoDataMessageWrapper>
-                <IconSVG src="/static/media/no_data_icon.svg" />
+                <IconSVG
+                  src="/static/media/no_data_icon.svg"
+                  alt={"There is no data available."}
+                />
                 <p>There is no data available. Please upload a spreadsheet.</p>
               </NoDataMessageWrapper>
             }

diff --git a/app/client/components/adminUser/InviteForm.jsx b/app/client/components/adminUser/InviteForm.jsx
@@ -95,6 +95,7 @@ const InviteForm = function(props) {
           id="EmailField"
           onKeyUp={props.onEmailFieldKeyPress}
           placeholder="Email"
+          aria-label="Email"
         />
 
         <RoleTypeWrapper>
@@ -107,6 +108,7 @@ const InviteForm = function(props) {
                   value={tier}
                   checked={props.tier === tier}
                   onChange={props.handleToggle}
+                  aria-label={`Tier ${tier}`}
                 />
                 <LabelCheckmark checked={props.tier === tier} />
               </LabelContainer>
@@ -122,6 +124,7 @@ const InviteForm = function(props) {
         isLoading={props.isLoggingIn}
         buttonStyle={{ width: "calc(100% - 1em)", display: "flex" }}
         buttonText={<span>Invite</span>}
+        label={"Invite"}
       />
     </div>
   );

diff --git a/app/client/components/adminUser/adminUserList.jsx b/app/client/components/adminUser/adminUserList.jsx
@@ -209,7 +209,10 @@ class AdminUserList extends React.Component {
             })
           }
         >
-          <IconSVG src="/static/media/action-icon.svg" />
+          <IconSVG
+            src="/static/media/action-icon.svg"
+            alt={"Actions for " + item.email}
+          />
         </IconWrapper>
         <CloseWrapper
           onClick={() =>
@@ -263,6 +266,7 @@ class AdminUserList extends React.Component {
                     lineHeight: "25px",
                     height: "25px"
                   }}
+                  label={"Add New Admin"}
                 >
                   + New Admin
                 </StyledButton>

diff --git a/app/client/components/auth/TFAForm.jsx b/app/client/components/auth/TFAForm.jsx
@@ -30,6 +30,9 @@ export default class TFAForm extends React.Component {
             onClick={() => this.handleNextBack()}
             buttonStyle={{ width: "calc(100% - 1em)", display: "flex" }}
             buttonText={<span>Next</span>}
+            label={
+              "Go to the next page once two factor authentication QR code is scanned"
+            }
           />
         </div>
       );
@@ -64,13 +67,15 @@ const TFAQr = props => (
         <ExternalLink
           href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
           target="_blank"
+          label={"Google Play Store Two Factor Authentication Application"}
         >
           Android
         </ExternalLink>
         /
         <ExternalLink
           href="https://apps.apple.com/au/app/google-authenticator/id388497605"
           target="_blank"
+          label={"Apple App Store Two Factor Authentication Application"}
         >
           iPhone
         </ExternalLink>

diff --git a/app/client/components/auth/TFAValidator.jsx b/app/client/components/auth/TFAValidator.jsx
@@ -90,7 +90,8 @@ export class TFAValidator extends React.Component {
           onChange={e => this.onCodeKeyPress(e)}
           onKeyUp={e => this.onKeyup(e)}
           style={{ letterSpacing: "0.2em" }}
-          placeholder="Your Code"
+          placeholder="Your TFA Code"
+          aria-label="Your TFA Code"
         />
 
         <label style={{ marginLeft: "0.5em" }}>
@@ -99,6 +100,7 @@ export class TFAValidator extends React.Component {
             type="checkbox"
             checked={this.state.rememberComputer}
             onChange={() => this.onCheck()}
+            aria-label="Remember my computer"
           />
           Remember computer
         </label>
@@ -108,6 +110,7 @@ export class TFAValidator extends React.Component {
           isLoading={this.props.validateState.isRequesting}
           buttonStyle={{ width: "calc(100% - 1em)", display: "flex" }}
           buttonText={<span>Verify</span>}
+          label={"Verify my application"}
         />
 
         <div style={{ textAlign: "center" }}>

diff --git a/app/client/components/auth/authModule.jsx b/app/client/components/auth/authModule.jsx
@@ -44,16 +44,24 @@ class authModuleContainer extends React.Component {
     if (this.props.loggedIn) {
       var button = (
         <div style={{ margin: "auto 1em" }}>
-          <StyledButton onClick={this.props.logout}>Logout Admin</StyledButton>
+          <StyledButton onClick={this.props.logout} label={"Logout Admin"}>
+            Logout Admin
+          </StyledButton>
         </div>
       );
     } else {
       var button = (
         <div style={{ margin: "auto 1em" }}>
-          <StyledButton onClick={() => this.setActiveForm("LOGIN")}>
+          <StyledButton
+            onClick={() => this.setActiveForm("LOGIN")}
+            label={"Go to Login Page"}
+          >
             Login
           </StyledButton>
-          <StyledButton onClick={() => this.setActiveForm("REGISTER")}>
+          <StyledButton
+            onClick={() => this.setActiveForm("REGISTER")}
+            label={"Go to Register Page"}
+          >
             Register
           </StyledButton>
         </div>

diff --git a/app/client/components/auth/loginForm.jsx b/app/client/components/auth/loginForm.jsx
@@ -6,7 +6,7 @@ import { Link } from "react-router-dom";
 import AsyncButton from "./../AsyncButton.jsx";
 import { LoginAction } from "../../reducers/auth/actions";
 
-import { Input, StyledButton, ErrorMessage } from "./../styledElements";
+import { Input, ErrorMessage } from "./../styledElements";
 import { Footer, FooterLink, FooterText } from "../pages/authPage.jsx";
 import TFAForm from "./TFAForm.jsx";
 
@@ -124,13 +124,15 @@ const LoginForm = function(props) {
           id="UserField"
           onKeyUp={props.onUserFieldKeyPress}
           placeholder="Email"
+          aria-label="Email"
         />
 
         <Input
           type="password"
           id="PasswordField"
           onKeyUp={props.onPasswordFieldKeyPress}
           placeholder="Password"
+          aria-label="Password"
         />
 
         <ResetPasswordLink to="/login/forgot">
@@ -143,6 +145,7 @@ const LoginForm = function(props) {
         isLoading={props.isLoggingIn}
         buttonStyle={{ width: "calc(100% - 1em)", display: "flex" }}
         buttonText={<span>LOGIN</span>}
+        label={"Login"}
       />
 
       <Footer>

diff --git a/app/client/components/auth/registerForm.jsx b/app/client/components/auth/registerForm.jsx
@@ -212,6 +212,7 @@ const RegisterForm = function(props) {
           placeholder="Email"
           disabled={props.state.invite ? "disabled" : ""}
           style={props.state.invite ? { display: "none" } : null}
+          aria-label="Email"
         />
 
         <ReactPasswordStrength
@@ -226,6 +227,7 @@ const RegisterForm = function(props) {
           type="password"
           onKeyUp={props.onReenterPasswordFieldKeyPress}
           placeholder="Retype Password"
+          aria-label="Password"
         />
 
         <ErrorMessage>{error_message}</ErrorMessage>
@@ -236,6 +238,7 @@ const RegisterForm = function(props) {
         isLoading={props.isRegistering}
         buttonStyle={{ width: "calc(100% - 1em)", display: "flex" }}
         buttonText={<span>REGISTER</span>}
+        label={"Register for Sempo Dashboard"}
       />
     </div>
   );

diff --git a/app/client/components/auth/requestResetEmailForm.jsx b/app/client/components/auth/requestResetEmailForm.jsx
@@ -83,13 +83,15 @@ const RequestResetEmailForm = function(props) {
           id="UserField"
           onKeyUp={props.onEmailFieldKeyPress}
           placeholder="Email"
+          aria-label="Email"
         />
 
         <AsyncButton
           onClick={props.onClick}
           isLoading={props.isLoading}
           buttonStyle={{ width: "calc(100% - 1em)", display: "flex" }}
           buttonText={<span>Reset Password</span>}
+          label={"Reset Password on Sempo Dashboard"}
         />
         <ErrorMessage>{error_message}</ErrorMessage>
       </div>