Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix / accessibility bugs and form validation #500

Merged
merged 6 commits into from
Apr 18, 2024
+125 −157
Merged

Fix / accessibility bugs and form validation #500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bd285db
fix(project): old password form error after validation
MelissaDTH Apr 2, 2024
f70d147
fix(project): improve form validation on account page
MelissaDTH Apr 2, 2024
62602c0
fix(a11y): icon button to use button element
MelissaDTH Apr 4, 2024
76f51cc
chore(a11y): adhere icon button styling & don’t act as a submit button
langemike Apr 11, 2024
19e2a36
chore: update snapshots
ChristiaanScheermeijer Apr 16, 2024
64c1b8a
fix(a11y): close menu focus with voice over
ChristiaanScheermeijer Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,11 +216,10 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
</form>
</div>
</div>
<div
<button
aria-label="common:back"
class="_iconButton_0fef65 _dialogBackButton_248199"
role="button"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
Expand All @@ -232,7 +231,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
/>
</svg>
</div>
</button>
</div>
</div>
`;
7 changes: 3 additions & 4 deletions packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,10 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
role="dialog"
>
Dialog contents
<div
<button
aria-label="close_modal"
class="_iconButton_0fef65 _modalCloseButton_b92d69"
role="button"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
Expand All @@ -55,7 +54,7 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
fill="none"
/>
</svg>
</div>
</button>
</div>
</div>
</div>
Expand Down
7 changes: 3 additions & 4 deletions ...ges/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@

exports[`<DialogBackButton> > renders and matches snapshot 1`] = `
<div>
<div
<button
aria-label="common:back"
class="_iconButton_0fef65 _dialogBackButton_248199"
role="button"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
Expand All @@ -18,6 +17,6 @@ exports[`<DialogBackButton> > renders and matches snapshot 1`] = `
d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
/>
</svg>
</div>
</button>
</div>
`;
5 changes: 4 additions & 1 deletion packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const EditPasswordForm: React.FC<Props> = ({
}: Props) => {
const { t } = useTranslation(['account', 'user']);
return (
<form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate className={styles.forgotPasswordForm}>
<form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate>
{errors.form && (
<FormFeedback variant="error" visible={!validationError}>
{errors.form}
Expand All @@ -69,6 +69,7 @@ const EditPasswordForm: React.FC<Props> = ({
name="oldPassword"
showToggleView={false}
showHelperText={false}
autoComplete="current-password"
required
/>
)}
Expand All @@ -95,6 +96,7 @@ const EditPasswordForm: React.FC<Props> = ({
placeholder={t('reset.password')}
error={!!errors.password}
name="password"
autoComplete="new-password"
required
/>

Expand All @@ -106,6 +108,7 @@ const EditPasswordForm: React.FC<Props> = ({
placeholder={t('reset.repeat_new_password')}
error={!!errors.passwordConfirmation}
name="passwordConfirmation"
autoComplete="new-password"
required
/>

Expand Down
16 changes: 8 additions & 8 deletions ...ges/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
<input
aria-describedby="helper_text_1235_password"
aria-invalid="false"
autocomplete="new-password"
class="_input_e16c1b"
id="text-field_1235_password"
name="password"
Expand All @@ -37,12 +38,11 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
<div
class="_control_e16c1b"
>
<div
<button
aria-label="reset.view_password"
aria-pressed="false"
class="_iconButton_0fef65"
role="button"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
Expand All @@ -54,7 +54,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
/>
</svg>
</div>
</button>
</div>
</div>
<div
Expand All @@ -79,6 +79,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
<input
aria-describedby="helper_text_1235_passwordconfirmation"
aria-invalid="false"
autocomplete="new-password"
class="_input_e16c1b"
id="text-field_1235_passwordconfirmation"
name="passwordConfirmation"
Expand All @@ -90,12 +91,11 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
<div
class="_control_e16c1b"
>
<div
<button
aria-label="reset.view_password"
aria-pressed="false"
class="_iconButton_0fef65"
role="button"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
Expand All @@ -107,7 +107,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
/>
</svg>
</div>
</button>
</div>
</div>
<div
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-react/src/components/Form/FormSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export function FormSection<TData extends GenericFormValues>({

try {
setFormState((s) => {
return { ...s, isBusy: true };
return { ...s, isBusy: true, errors: [] };
});
response = await onSubmit(values);
} catch (error: unknown) {
Expand Down
9 changes: 1 addition & 8 deletions packages/ui-react/src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,14 +226,7 @@ const Header: React.FC<Props> = ({
{t('skip_to_content')}
</a>
<div className={styles.menu}>
<IconButton
className={styles.iconButton}
aria-label={sideBarOpen ? t('close_menu') : t('open_menu')}
AntonLantukh marked this conversation as resolved.
Show resolved Hide resolved
aria-controls="sidebar"
aria-haspopup="true"
aria-expanded={sideBarOpen}
onClick={() => onMenuButtonClick()}
>
<IconButton className={styles.iconButton} aria-label={t('open_menu')} aria-expanded={sideBarOpen} onClick={() => onMenuButtonClick()}>
<Icon icon={Menu} />
</IconButton>
</div>
Expand Down
32 changes: 12 additions & 20 deletions packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,11 @@ exports[`<Header /> > renders header 1`] = `
<div
class="_menu_f4f7a7"
>
<div
aria-controls="sidebar"
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="open_menu"
class="_iconButton_0fef65 _iconButton_f4f7a7"
role="button"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
Expand All @@ -40,7 +37,7 @@ exports[`<Header /> > renders header 1`] = `
d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
/>
</svg>
</div>
</button>
</div>
<nav
class="_nav_f4f7a7"
Expand All @@ -50,11 +47,10 @@ exports[`<Header /> > renders header 1`] = `
<div
class="_actions_f4f7a7"
>
<div
<button
aria-label="Open search"
class="_iconButton_0fef65 _iconButton_f4f7a7 _actionButton_f4f7a7"
role="button"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
Expand All @@ -66,7 +62,7 @@ exports[`<Header /> > renders header 1`] = `
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
/>
</svg>
</div>
</button>
<div
class="_buttonContainer_f4f7a7"
>
Expand Down Expand Up @@ -112,14 +108,11 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
<div
class="_menu_f4f7a7"
>
<div
aria-controls="sidebar"
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="open_menu"
class="_iconButton_0fef65 _iconButton_f4f7a7"
role="button"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
Expand All @@ -135,7 +128,7 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
/>
</svg>
</div>
</button>
</div>
<nav
class="_nav_f4f7a7"
Expand All @@ -152,11 +145,10 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
<div
class="_actions_f4f7a7"
>
<div
<button
aria-label="Open search"
class="_iconButton_0fef65 _iconButton_f4f7a7 _actionButton_f4f7a7"
role="button"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
Expand All @@ -168,7 +160,7 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
/>
</svg>
</div>
</button>
<div
class="_buttonContainer_f4f7a7"
>
Expand Down
23 changes: 5 additions & 18 deletions packages/ui-react/src/components/IconButton/IconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,20 @@
import classNames from 'classnames';
import React, { type AriaAttributes } from 'react';
import React, { type ButtonHTMLAttributes } from 'react';

import styles from './IconButton.module.scss';

type Props = AriaAttributes & {
type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
onClick?: () => void;
onBlur?: () => void;
children: JSX.Element;
tabIndex?: number;
className?: string;
};

const IconButton: React.FC<Props> = ({ children, onClick, tabIndex = 0, className, ...ariaProps }: Props) => {
const IconButton: React.FC<Props> = ({ children, onClick, className, ...ariaProps }: Props) => {
return (
<div
className={classNames(styles.iconButton, className)}
onClick={onClick}
role="button"
tabIndex={tabIndex}
onKeyDown={(event: React.KeyboardEvent) => {
if ((event.key === 'Enter' || event.key === ' ') && tabIndex >= 0 && onClick) {
onClick();
event.preventDefault(); // prevent click being called when this component unmounts
}
}}
{...ariaProps}
>
<button className={classNames(styles.iconButton, className)} type="button" onClick={onClick} {...ariaProps}>
{children}
</div>
</button>
);
};

Expand Down
7 changes: 3 additions & 4 deletions packages/ui-react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@

exports[`<IconButton> > renders and matches snapshot 1`] = `
<div>
<div
<button
aria-label="Icon button"
class="_iconButton_0fef65"
role="button"
tabindex="0"
type="button"
>
<svg
viewBox="0 0 24 24"
Expand All @@ -20,6 +19,6 @@ exports[`<IconButton> > renders and matches snapshot 1`] = `
fill="none"
/>
</svg>
</div>
</button>
</div>
`;
4 changes: 2 additions & 2 deletions packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,14 @@ const LanguageMenu = ({ onClick, className, languages, currentLanguage, language
aria-controls="language-panel"
aria-expanded={languageMenuOpen}
aria-haspopup="menu"
className={classNames(styles.iconButton, className)}
className={classNames(className)}
aria-label={t('language_menu')}
onClick={handleMenuToggle}
onBlur={closeLanguageMenu}
>
<Icon icon={Language} />
</IconButton>
<Popover isOpen={languageMenuOpen} onClose={closeLanguageMenu} aria-expanded={languageMenuOpen}>
<Popover isOpen={languageMenuOpen} onClose={closeLanguageMenu}>
<Panel id="language-panel">
<ul className={styles.menuItems}>
{languages.map(({ code, displayName }) => {
Expand Down
7 changes: 3 additions & 4 deletions packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@

exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
<div>
<div
<button
aria-controls="language-panel"
aria-expanded="false"
aria-haspopup="menu"
aria-label="language_menu"
class="_iconButton_0fef65"
data-testid="language-menu-button"
role="button"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
Expand All @@ -23,6 +22,6 @@ exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
fill="currentColor"
/>
</svg>
</div>
</button>
</div>
`;
Loading
Loading