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.

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

Improve UX with better wording #298

Merged
merged 2 commits into from
Aug 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions src/frontend/apps/desk/src/features/footer/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export const Footer = () => {
`}
>
<Text $weight="bold">{label}</Text>
<IconLink width={18} />
<IconLink width={18} aria-hidden="true" />
</StyledLink>
))}
</Box>
Expand Down Expand Up @@ -157,7 +157,7 @@ export const Footer = () => {
`}
>
<Text $variation="600">licence etalab-2.0</Text>
<IconLink width={18} />
<IconLink width={18} aria-hidden="true" />
</StyledLink>
</Trans>
</Text>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const AccountDropdown = () => {
button={
<Box $flex $direction="row" $align="center">
<Text $theme="primary">{t('My account')}</Text>
<Text className="material-icons" $theme="primary">
<Text className="material-icons" $theme="primary" aria-hidden="true">
arrow_drop_down
</Text>
</Box>
Expand All @@ -24,7 +24,11 @@ export const AccountDropdown = () => {
<Button
onClick={logout}
color="primary-text"
icon={<span className="material-icons">logout</span>}
icon={
<span className="material-icons" aria-hidden="true">
logout
</span>
}
aria-label={t('Logout')}
>
<Text $weight="normal">{t('Logout')}</Text>
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/apps/desk/src/features/header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const Header = () => {
</LogoGouv>
<StyledLink href="/">
<Box $align="center" $gap="1rem" $direction="row">
<Image priority src={IconApplication} alt={t('Régie Logo')} />
<Image priority src={IconApplication} alt="" />
daproclaima marked this conversation as resolved.
Show resolved Hide resolved
<Text $margin="none" as="h2" $theme="primary">
{t('Régie')}
</Text>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,12 @@ export const LanguagePicker = () => {
$gap="0.7rem"
$align="center"
>
<Image priority src={IconLanguage} alt={t('Language Icon')} />
<Image priority src={IconLanguage} alt="" />
daproclaima marked this conversation as resolved.
Show resolved Hide resolved
<Text $theme="primary">{lang.toUpperCase()}</Text>
</Box>
),
}));
}, [languages, t]);
}, [languages]);

return (
<SelectStyled
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,10 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
displayGoto: false,
}}
aria-label={t('Mailboxes list')}
hideEmptyPlaceholderImage={true}
emptyPlaceholderLabel={t(
'No mail box was created with this mail domain.',
)}
/>
</Card>
</>
Expand All @@ -137,7 +141,7 @@ const TopBanner = ({
$margin={{ all: 'big', vertical: 'xbig' }}
$gap="2.25rem"
>
<MailDomainsLogo aria-label={t('Mail Domains icon')} />
<MailDomainsLogo aria-hidden="true" />
<Text $margin="none" as="h3" $size="h3">
{name}
</Text>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const Panel = () => {
`}
onClick={() => setIsOpen(!isOpen)}
>
<IconOpenClose width={24} height={24} />
<IconOpenClose width={24} height={24} aria-hidden="true" />
</BoxButton>
<Box
$css={`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,7 @@ export const PanelActions = () => {
$background={isSortAsc ? colorsTokens()['primary-200'] : 'transparent'}
$color={colorsTokens()['primary-600']}
>
<IconSort
width={30}
height={30}
aria-label={t('Sort domain names icon')}
/>
<IconSort width={30} height={30} aria-hidden="true" />
</BoxButton>
</Box>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useRouter } from 'next/router';
import React from 'react';
import { useTranslation } from 'react-i18next';

import { Box, StyledLink, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
Expand All @@ -13,7 +12,6 @@ interface MailDomainProps {

export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
const { colorsTokens } = useCunninghamTheme();
const { t } = useTranslation();
const {
query: { slug },
} = useRouter();
Expand Down Expand Up @@ -55,7 +53,7 @@ export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
>
<Box $align="center" $direction="row" $gap="0.5rem">
<IconMailDomains
aria-label={t(`Mail Domains icon`)}
aria-hidden="true"
color={colorsTokens()['primary-500']}
className="p-t"
width="52"
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/apps/desk/src/features/menu/MenuItems.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
>
<Icon
width="2.375rem"
aria-label={t(`{{label}} icon`, { label })}
aria-hidden="true"
style={{
transition: 'color 0.2s ease-in-out',
}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -158,13 +158,17 @@ export const ModalAddMembers = ({
disabled={!selectedMembers.length || isPending}
onClick={() => void handleValidate()}
>
{t('Validate')}
{t('Add to group')}
</Button>
}
size={ModalSize.MEDIUM}
title={
<Box $align="center" $gap="1rem">
<IconAddMember width={48} color={colorsTokens()['primary-text']} />
<IconAddMember
width={48}
color={colorsTokens()['primary-text']}
aria-hidden="true"
/>
<Text $size="h3" $margin="none">
{t('Add a member')}
</Text>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,11 @@ export const MemberAction = ({
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">edit</span>}
icon={
<span className="material-icons" aria-hidden="true">
edit
</span>
}
>
<Text $theme="primary">{t('Update role')}</Text>
</Button>
Expand All @@ -64,7 +68,11 @@ export const MemberAction = ({
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">delete</span>}
icon={
<span className="material-icons" aria-hidden="true">
delete
</span>
}
>
<Text $theme="primary">{t('Remove from group')}</Text>
</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export const ModalDelete = ({ access, onClose, team }: ModalDeleteProps) => {
}}
disabled={isNotAllowed}
>
{t('Validate')}
{t('Remove from the group')}
</Button>
}
size={ModalSize.MEDIUM}
Expand Down Expand Up @@ -128,7 +128,7 @@ export const ModalDelete = ({ access, onClose, team }: ModalDeleteProps) => {
$background={colorsTokens()['primary-150']}
$theme="primary"
>
<IconUser width={20} height={20} />
<IconUser width={20} height={20} aria-hidden="true" />
<Text>{access.user.name}</Text>
</Text>
</Box>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ export const CardCreateTeam = () => {
<Box $gap="1rem">
<Box $align="center">
<IconGroup
aria-hidden="true"
width={44}
color={colorsTokens()['primary-text']}
aria-label={t('icon group')}
/>
<Text as="h3" $textAlign="center">
{t('Create a new group')}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ export const InputTeamName = ({
setTeamName(e.target.value);
setIsInputError(false);
}}
rightIcon={<span className="material-icons">edit</span>}
state={isInputError ? 'error' : 'default'}
/>
{isError && error && <TextErrors causes={error.cause} />}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,11 @@ export const ModalRemoveTeam = ({ onClose, team }: ModalRemoveTeamProps) => {
size={ModalSize.MEDIUM}
title={
<Box $align="center" $gap="1rem">
<IconRemove width={48} color={colorsTokens()['primary-text']} />
<IconRemove
width={48}
color={colorsTokens()['primary-text']}
aria-hidden="true"
/>
<Text $size="h3" $margin="none">
{t('Deleting the {{teamName}} team', { teamName: team.name })}
</Text>
Expand Down Expand Up @@ -105,7 +109,7 @@ export const ModalRemoveTeam = ({ onClose, team }: ModalRemoveTeamProps) => {
>
<IconGroup
className="p-t"
aria-label={t(`Teams icon`)}
aria-hidden="true"
color={colorsTokens()['primary-500']}
width={58}
style={{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,11 @@ export const ModalUpdateTeam = ({ onClose, team }: ModalUpdateTeamProps) => {
size={ModalSize.MEDIUM}
title={
<Box $align="center" $gap="1rem">
<IconEdit width={48} color={colorsTokens()['primary-text']} />
<IconEdit
width={48}
color={colorsTokens()['primary-text']}
aria-hidden="true"
/>
<Text $size="h3" $margin="none">
{t('Update team {{teamName}}', { teamName: team.name })}
</Text>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,11 @@ export const TeamActions = ({ currentRole, team }: TeamActionsProps) => {
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">edit</span>}
icon={
<span className="material-icons" aria-hidden="true">
edit
</span>
}
>
<Text $theme="primary">{t('Update the team')}</Text>
</Button>
Expand All @@ -54,7 +58,11 @@ export const TeamActions = ({ currentRole, team }: TeamActionsProps) => {
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">delete</span>}
icon={
<span className="material-icons" aria-hidden="true">
delete
</span>
}
>
<Text $theme="primary">{t('Delete the team')}</Text>
</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ export const TeamInfo = ({ team, currentRole }: TeamInfoProps) => {
</Box>
<Box $margin="big" $direction="row" $align="center" $gap="1.5rem">
<IconGroup
aria-hidden="true"
width={44}
color={colorsTokens()['primary-text']}
aria-label={t('icon group')}
style={{
flexShrink: 0,
alignSelf: 'start',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,7 @@ describe('PanelTeams', () => {

expect(screen.getByRole('status')).toBeInTheDocument();

expect(
await screen.findByLabelText('Empty teams icon'),
).toBeInTheDocument();
expect(await screen.findByLabelText('Empty team icon')).toBeInTheDocument();
});

it('renders a team with only 1 member', async () => {
Expand All @@ -81,12 +79,10 @@ describe('PanelTeams', () => {

expect(screen.getByRole('status')).toBeInTheDocument();

expect(
await screen.findByLabelText('Empty teams icon'),
).toBeInTheDocument();
expect(await screen.findByLabelText('Empty team icon')).toBeInTheDocument();
});

it('renders a non-empty team', async () => {
it('renders a non-empty team', () => {
fetchMock.mock(`end:/teams/?page=1&ordering=-created_at`, {
count: 1,
results: [
Expand All @@ -110,8 +106,6 @@ describe('PanelTeams', () => {
render(<TeamList />, { wrapper: AppWrapper });

expect(screen.getByRole('status')).toBeInTheDocument();

expect(await screen.findByLabelText('Teams icon')).toBeInTheDocument();
});

it('renders the error', async () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,15 @@ export const PanelActions = () => {
$background={isSortAsc ? colorsTokens()['primary-200'] : 'transparent'}
$color={colorsTokens()['primary-600']}
>
<IconSort width={30} height={30} aria-label={t('Sort teams icon')} />
<IconSort width={30} height={30} aria-hidden="true" />
</BoxButton>
<StyledLink href="/teams/create">
<BoxButton
aria-label={t('Add a team')}
$color={colorsTokens()['primary-600']}
tabIndex={-1}
>
<IconAdd width={30} height={30} aria-label={t('Add team icon')} />
<IconAdd width={30} height={30} aria-hidden="true" />
</BoxButton>
</StyledLink>
</Box>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const TeamItem = ({ team }: TeamProps) => {
<Box $align="center" $direction="row" $gap="0.5rem">
{hasMembers ? (
<IconGroup
aria-label={t(`Teams icon`)}
aria-label={t(`Team icon`)}
color={colorsTokens()['primary-500']}
{...commonProps}
style={{
Expand All @@ -77,7 +77,7 @@ export const TeamItem = ({ team }: TeamProps) => {
/>
) : (
<IconNone
aria-label={t(`Empty teams icon`)}
aria-label={t(`Empty team icon`)}
color={colorsTokens()['greyscale-500']}
{...commonProps}
style={{
Expand Down
Loading
Loading