Skip to content

Commit

Permalink
Merge pull request #58 from EqualifyEverything/staging
Browse files Browse the repository at this point in the history 
Add Aria Required and Beta Logo
  • Loading branch information
@azdak
azdak authored Aug 17, 2024
2 parents 8472009 + 1f3c52a commit 0450485
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 17 deletions.
36 changes: 36 additions & 0 deletions public/equalify-beta.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 4 additions & 3 deletions src/components/forms/auth/login-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ const LoginForm = () => {
type="email"
className="h-12 bg-white"
id="email"
aria-required={true}
{...field}
/>
</FormControl>
Expand All @@ -143,6 +144,7 @@ const LoginForm = () => {
type={showPassword ? 'text' : 'password'}
className="h-12 bg-white"
id="password"
aria-required={true}
{...field}
/>
<Button
Expand Down Expand Up @@ -173,13 +175,12 @@ const LoginForm = () => {
className="h-12 w-full bg-[#1D781D] text-white"
disabled={loading}
aria-live="polite"
aria-label={loading ? 'Processing,please wait' : 'Continue'}
aria-label={loading ? 'Processing, please wait' : 'Continue'}
>
{loading ? (
<>
<span className="sr-only">Processing, please wait...</span>
<div
role="status"
aria-hidden="true"
className="h-4 w-4 animate-spin rounded-full border-2 border-solid border-white border-t-transparent"
></div>
</>
Expand Down
10 changes: 2 additions & 8 deletions src/components/forms/auth/otp-validation-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,13 +79,9 @@ const OTPValidationForm: React.FC<OTPValidationFormProps> = ({
'Please enter the verification code sent to your email.';
}

const timeoutId = setTimeout(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, 5000);

return () => clearTimeout(timeoutId);
}, []);

const handleResendCode = useCallback(async () => {
Expand Down Expand Up @@ -166,7 +162,6 @@ const OTPValidationForm: React.FC<OTPValidationFormProps> = ({
disabled={isCountingDown || loading}
className="place-self-start bg-transparent p-0 text-gray-600 shadow-none"
aria-live="polite"
aria-disabled={isCountingDown || loading}
aria-label={
isCountingDown ? `Resend in ${countdown}s` : 'Resend code'
}
Expand All @@ -180,17 +175,16 @@ const OTPValidationForm: React.FC<OTPValidationFormProps> = ({
aria-live="polite"
aria-label={
loading
? 'Processing,please wait'
? 'Processing, please wait'
: type === 'signup'
? 'Verify and Sign Up'
: 'Verify and Log In'
}
>
{loading ? (
<>
<span className="sr-only">Processing, please wait...</span>
<div
role="status"
aria-hidden="true"
className="h-4 w-4 animate-spin rounded-full border-2 border-solid border-white border-t-transparent"
></div>
</>
Expand Down
10 changes: 7 additions & 3 deletions src/components/forms/auth/signup-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ const SignupForm = () => {
type="text"
className="h-12 bg-white"
id="firstName"
aria-required={true}
{...field}
/>
</FormControl>
Expand All @@ -147,6 +148,7 @@ const SignupForm = () => {
type="text"
className="h-12 bg-white"
id="lastName"
aria-required={true}
{...field}
/>
</FormControl>
Expand All @@ -167,6 +169,7 @@ const SignupForm = () => {
type="email"
className="h-12 bg-white"
id="email"
aria-required={true}
{...field}
/>
</FormControl>
Expand All @@ -187,6 +190,7 @@ const SignupForm = () => {
type={showPassword ? 'text' : 'password'}
className="h-12 bg-white"
id="password"
aria-required={true}
{...field}
/>
<Button
Expand Down Expand Up @@ -225,6 +229,7 @@ const SignupForm = () => {
type={showPassword ? 'text' : 'password'}
className="h-12 bg-white"
id="confirm-password"
aria-required={true}
{...field}
/>
<Button
Expand Down Expand Up @@ -257,13 +262,12 @@ const SignupForm = () => {
className="h-12 w-full bg-[#1D781D] text-white"
disabled={loading}
aria-live="polite"
aria-label={loading ? 'Processing,please wait' : 'Continue'}
aria-label={loading ? 'Processing, please wait' : 'Continue'}
>
{loading ? (
<>
<span className="sr-only">Processing, please wait...</span>
<div
role="status"
aria-hidden="true"
className="h-4 w-4 animate-spin rounded-full border-2 border-solid border-white border-t-transparent"
></div>
</>
Expand Down
4 changes: 2 additions & 2 deletions src/components/layout/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ const Header = () => {
<div className="flex flex-col items-center justify-between gap-3 py-3 md:h-16 md:flex-row">
<Link id="header-home-link-focus" to="/reports" replace aria-label="Go to homepage" rel="home">
<img
src="/equalify.svg"
src="/equalify-beta.svg"
className="h-auto w-28 md:w-32"
width={128}
height="auto"
alt="Equalify Logo"
alt="Equalify Beta Logo"
/>
</Link>
<nav>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/public/auth/forgot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const Forgot = () => {
<form onSubmit={forgotPassword} className='flex flex-col gap-8 w-full max-w-[448px]'>
<div className='flex flex-col gap-2'>
<label htmlFor='email' className='text-sm'>Email address</label>
<input id='email' name='email' className='rounded-md p-3' />
<input id='email' name='email' className='rounded-md p-3' aria-required={true} />
</div>
<button className='bg-[#1D781D] text-white rounded-md p-3 text-sm' type='submit'>Reset password</button>
</form>
Expand Down

0 comments on commit 0450485

Please sign in to comment.