From cccc3065d166343a7d85471f8c3faf70ccaa557c Mon Sep 17 00:00:00 2001 From: RonaldHolm Date: Mon, 3 Jun 2024 06:03:08 -0700 Subject: [PATCH] Add aria attribute --- demos/client-example/src/App.tsx | 25 +++++++++++++++---- .../procaptcha-pow/src/components/Captcha.tsx | 8 ++++-- .../src/components/Button.tsx | 1 + .../src/components/CaptchaComponent.tsx | 6 +++-- .../src/components/CaptchaWidget.tsx | 1 + .../src/components/ProcaptchaWidget.tsx | 8 ++++-- .../web-components/src/CaptchaPlaceholder.tsx | 7 ++++-- packages/web-components/src/Checkbox.tsx | 1 + packages/web-components/src/LogoWithText.tsx | 1 + .../web-components/src/LogoWithoutText.tsx | 1 + 10 files changed, 46 insertions(+), 13 deletions(-) diff --git a/demos/client-example/src/App.tsx b/demos/client-example/src/App.tsx index 13e08cd6c0..2a70cc0efa 100644 --- a/demos/client-example/src/App.tsx +++ b/demos/client-example/src/App.tsx @@ -179,6 +179,7 @@ function App(props: AppProps) { dappName={config.dappName} value={account} onChange={setAccount} + aria-label="Select account" /> ) : ( @@ -189,9 +190,10 @@ function App(props: AppProps) { id="email" label="Email" type="text" - autoComplete="Email" + autoComplete="email" autoCapitalize="none" onChange={(e) => setEmail(e.target.value)} + aria-label="Email" /> @@ -201,8 +203,9 @@ function App(props: AppProps) { id="name" label="Name" type="text" - autoComplete="Name" + autoComplete="name" onChange={(e) => setName(e.target.value)} + aria-label="Name" /> )} @@ -212,8 +215,9 @@ function App(props: AppProps) { id="password" label="Password" type="password" - autoComplete="Password" + autoComplete="password" onChange={(e) => setPassword(e.target.value)} + aria-label="Password" /> @@ -222,9 +226,14 @@ function App(props: AppProps) { ) : ( - + )} @@ -234,6 +243,7 @@ function App(props: AppProps) { variant="contained" onClick={onActionHandler} disabled={!procaptchaOutput} + aria-label={isLogin ? 'Login' : 'Sign up'} > {isLogin ? 'Login' : 'Sign up'} @@ -242,7 +252,12 @@ function App(props: AppProps) { - or - - + diff --git a/packages/procaptcha-pow/src/components/Captcha.tsx b/packages/procaptcha-pow/src/components/Captcha.tsx index ad02c4e3ae..d70481ca46 100644 --- a/packages/procaptcha-pow/src/components/Captcha.tsx +++ b/packages/procaptcha-pow/src/components/Captcha.tsx @@ -89,13 +89,17 @@ const Procaptcha = (props: ProcaptchaProps) => { >
{state.loading ? ( - + ) : ( )}
@@ -107,7 +111,7 @@ const Procaptcha = (props: ProcaptchaProps) => {
- +
diff --git a/packages/procaptcha-react/src/components/Button.tsx b/packages/procaptcha-react/src/components/Button.tsx index b5bf23b3a0..bdd4e99c4f 100644 --- a/packages/procaptcha-react/src/components/Button.tsx +++ b/packages/procaptcha-react/src/components/Button.tsx @@ -83,6 +83,7 @@ const Button: React.FC = ({ themeColor, buttonType, text, onClick } e.preventDefault() onClick() }} + aria-label={text} > {text} diff --git a/packages/procaptcha-react/src/components/CaptchaComponent.tsx b/packages/procaptcha-react/src/components/CaptchaComponent.tsx index ef17030730..4a15a49696 100644 --- a/packages/procaptcha-react/src/components/CaptchaComponent.tsx +++ b/packages/procaptcha-react/src/components/CaptchaComponent.tsx @@ -138,13 +138,15 @@ const CaptchaComponent = ({ buttonType="cancel" onClick={onCancel} text={t('WIDGET.CANCEL')} - > + aria-label={t('WIDGET.CANCEL')} + /> + aria-label={index < challenge.captchas.length - 1 ? t('WIDGET.NEXT') : t('WIDGET.SUBMIT')} + /> diff --git a/packages/procaptcha-react/src/components/CaptchaWidget.tsx b/packages/procaptcha-react/src/components/CaptchaWidget.tsx index 9de68a8aa5..7df2cfad5b 100644 --- a/packages/procaptcha-react/src/components/CaptchaWidget.tsx +++ b/packages/procaptcha-react/src/components/CaptchaWidget.tsx @@ -138,6 +138,7 @@ export const CaptchaWidget = ({ challenge, solution, onClick, themeColor }: Capt aria-hidden="true" viewBox="0 0 24 24" data-testid="CheckIcon" + aria-label="Check icon" > diff --git a/packages/procaptcha-react/src/components/ProcaptchaWidget.tsx b/packages/procaptcha-react/src/components/ProcaptchaWidget.tsx index 311a98183f..45baf63c97 100644 --- a/packages/procaptcha-react/src/components/ProcaptchaWidget.tsx +++ b/packages/procaptcha-react/src/components/ProcaptchaWidget.tsx @@ -108,6 +108,7 @@ const ProcaptchaWidget = (props: ProcaptchaProps) => { onChange={manager.start} checked={state.isHuman} labelText="I am human" + aria-label="human checkbox" />
{ }} >
- +
@@ -125,7 +129,7 @@ const ProcaptchaWidget = (props: ProcaptchaProps) => { diff --git a/packages/web-components/src/CaptchaPlaceholder.tsx b/packages/web-components/src/CaptchaPlaceholder.tsx index 8c05dd68ff..5c260fd73a 100644 --- a/packages/web-components/src/CaptchaPlaceholder.tsx +++ b/packages/web-components/src/CaptchaPlaceholder.tsx @@ -75,7 +75,10 @@ export const ProcaptchaPlaceholder = (props: PlaceholderProps) => { }} >
- +
@@ -84,7 +87,7 @@ export const ProcaptchaPlaceholder = (props: PlaceholderProps) => { diff --git a/packages/web-components/src/Checkbox.tsx b/packages/web-components/src/Checkbox.tsx index e1c7e86836..ee500a4e62 100644 --- a/packages/web-components/src/Checkbox.tsx +++ b/packages/web-components/src/Checkbox.tsx @@ -80,6 +80,7 @@ export const Checkbox: React.FC = ({ themeColor, onChange, checke type={'checkbox'} aria-live={'assertive'} aria-haspopup={'true'} + aria-label={labelText} onChange={onChange} checked={checked} style={checkboxStyle} diff --git a/packages/web-components/src/LogoWithText.tsx b/packages/web-components/src/LogoWithText.tsx index 488f32f0b3..8656e4d183 100644 --- a/packages/web-components/src/LogoWithText.tsx +++ b/packages/web-components/src/LogoWithText.tsx @@ -28,6 +28,7 @@ export const LogoWithText: React.FC = ({ themeColor }: Log height="35px" width="140px" style={{ fill }} + aria-label="Prosopo Logo With Text" > Prosopo Logo With Text = ({ themeColor }: viewBox="0 0 260 348" height="35px" style={{ fill }} + aria-label="Prosopo Logo Without Text" > Prosopo Logo Without Text