vvzvlad/gitmost
1
0
Fork 0
Code Issues 15 Pull Requests 12 Packages Projects Releases Activity

fix(a11y): WCAG 2.1 AA fixes (#2219)

Browse Source
This commit is contained in:
Philip Okugbe
2026-05-20 16:47:25 +01:00
committed by GitHub
parent 1c166c4736
commit 92c0e36e46
119 changed files with 1064 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/client/src/features/group/components/add-group-member-modal.tsx
View File

@@ -31,7 +31,12 @@ export default function AddGroupMemberModal() {
<>
<Button onClick={open}>{t("Add group members")}</Button>
<Modal opened={opened} onClose={close} title={t("Add group members")}>
<Modal
opened={opened}
onClose={close}
title={t("Add group members")}
closeButtonProps={{ "aria-label": t("Close") }}
>
<Divider size="xs" mb="xs" />
<MultiUserSelect

1
apps/client/src/features/group/components/create-group-form.tsx
View File

@@ -58,6 +58,7 @@ export function CreateGroupForm() {
label={t("Group name")}
placeholder={t("e.g Developers")}
variant="filled"
data-autofocus
{...form.getInputProps("name")}
/>

7
apps/client/src/features/group/components/create-group-modal.tsx
View File

@@ -11,7 +11,12 @@ export default function CreateGroupModal() {
<>
<Button onClick={open}>{t("Create group")}</Button>
<Modal opened={opened} onClose={close} title={t("Create group")}>
<Modal
opened={opened}
onClose={close}
title={t("Create group")}
closeButtonProps={{ "aria-label": t("Close") }}
>
<Divider size="xs" mb="xs" />
<CreateGroupForm />
</Modal>

11
apps/client/src/features/group/components/edit-group-form.tsx
View File

@@ -9,6 +9,7 @@ import { z } from "zod/v4";
import { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { zod4Resolver } from "mantine-form-zod-resolver";
import { IGroup } from "@/features/group/types/group.types.ts";
const formSchema = z.object({
name: z.string().min(2).max(100),
@@ -18,13 +19,16 @@ const formSchema = z.object({
type FormValues = z.infer<typeof formSchema>;
interface EditGroupFormProps {
onClose?: () => void;
group?: IGroup;
}
export function EditGroupForm({ onClose }: EditGroupFormProps) {
export function EditGroupForm({ onClose, group: groupProp }: EditGroupFormProps) {
const { t } = useTranslation();
const updateGroupMutation = useUpdateGroupMutation();
const { isSuccess } = updateGroupMutation;
const { groupId } = useParams();
const { data: group } = useGroupQuery(groupId);
const { groupId: routeGroupId } = useParams();
const groupId = groupProp?.id ?? routeGroupId;
const { data: queriedGroup } = useGroupQuery(groupProp ? undefined : groupId);
const group = groupProp ?? queriedGroup;
useEffect(() => {
if (isSuccess) {
@@ -66,6 +70,7 @@ export function EditGroupForm({ onClose }: EditGroupFormProps) {
label={t("Group name")}
placeholder={t("e.g Developers")}
variant="filled"
data-autofocus
{...form.getInputProps("name")}
/>

12
apps/client/src/features/group/components/edit-group-modal.tsx
View File

@@ -1,23 +1,31 @@
import { Divider, Modal } from "@mantine/core";
import { EditGroupForm } from "@/features/group/components/edit-group-form.tsx";
import { useTranslation } from "react-i18next";
import { IGroup } from "@/features/group/types/group.types.ts";
interface EditGroupModalProps {
opened: boolean;
onClose: () => void;
group?: IGroup;
}
export default function EditGroupModal({
opened,
onClose,
group,
}: EditGroupModalProps) {
const { t } = useTranslation();
return (
<>
<Modal opened={opened} onClose={onClose} title={t("Edit group")}>
<Modal
opened={opened}
onClose={onClose}
title={t("Edit group")}
closeButtonProps={{ "aria-label": t("Close") }}
>
<Divider size="xs" mb="xs" />
<EditGroupForm onClose={onClose} />
<EditGroupForm onClose={onClose} group={group} />
</Modal>
</>
);

26
apps/client/src/features/group/components/group-action-menu.tsx
View File

@@ -10,18 +10,28 @@ import { useDisclosure } from "@mantine/hooks";
import EditGroupModal from "@/features/group/components/edit-group-modal.tsx";
import { modals } from "@mantine/modals";
import { useTranslation } from "react-i18next";
import { IGroup } from "@/features/group/types/group.types.ts";
export default function GroupActionMenu() {
interface GroupActionMenuProps {
group?: IGroup;
}
export default function GroupActionMenu(props: GroupActionMenuProps = {}) {
const { t } = useTranslation();
const { groupId } = useParams();
const { data: group, isLoading } = useGroupQuery(groupId);
const { groupId: routeGroupId } = useParams();
const groupId = props.group?.id ?? routeGroupId;
const { data: queriedGroup } = useGroupQuery(props.group ? undefined : groupId);
const group = props.group ?? queriedGroup;
const deleteGroupMutation = useDeleteGroupMutation();
const navigate = useNavigate();
const [opened, { open, close }] = useDisclosure(false);
const onDelete = async () => {
await deleteGroupMutation.mutateAsync(groupId);
navigate("/settings/groups");
// Only navigate away if we're currently viewing this group's detail page.
if (routeGroupId === groupId) {
navigate("/settings/groups");
}
};
const openDeleteModal = () =>
@@ -53,7 +63,11 @@ export default function GroupActionMenu() {
arrowPosition="center"
>
<Menu.Target>
<ActionIcon variant="light" aria-label={t("Group menu")}>
<ActionIcon
variant="subtle"
color="gray"
aria-label={t("Group actions for {{name}}", { name: group.name })}
>
<IconDots size={20} stroke={2} />
</ActionIcon>
</Menu.Target>
@@ -76,7 +90,7 @@ export default function GroupActionMenu() {
</>
)}
<EditGroupModal opened={opened} onClose={close} />
<EditGroupModal opened={opened} onClose={close} group={group} />
</>
);
}

15
apps/client/src/features/group/components/group-list.tsx
View File

@@ -1,4 +1,4 @@
import { Table, Group, Text, Anchor } from "@mantine/core";
import { Table, Group, Text, Anchor, VisuallyHidden } from "@mantine/core";
import { useGetGroupsQuery } from "@/features/group/queries/group-query";
import { Link } from "react-router-dom";
import { IconGroupCircle } from "@/components/icons/icon-people-circle.tsx";
@@ -12,6 +12,8 @@ import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
import { SearchInput } from "@/components/common/search-input.tsx";
import NoTableResults from "@/components/common/no-table-results.tsx";
import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search.tsx";
import rowClasses from "@/components/ui/clickable-table-row.module.css";
import GroupActionMenu from "@/features/group/components/group-action-menu.tsx";
export default function GroupList() {
const { t } = useTranslation();
@@ -34,13 +36,16 @@ export default function GroupList() {
<Table.Tr>
<Table.Th>{t("Group")}</Table.Th>
<Table.Th>{t("Members")}</Table.Th>
<Table.Th w={60}>
<VisuallyHidden>{t("Actions")}</VisuallyHidden>
</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{data?.items.length > 0 ? (
data?.items.map((group: IGroup, index: number) => (
<Table.Tr key={index}>
<Table.Tr key={index} className={rowClasses.row}>
<Table.Td onMouseEnter={() => prefetchGroupMembers(group.id)}>
<Anchor
size="sm"
@@ -49,6 +54,7 @@ export default function GroupList() {
cursor: "pointer",
color: "var(--mantine-color-text)",
}}
className={rowClasses.link}
component={Link}
to={`/settings/groups/${group.id}`}
>
@@ -80,10 +86,13 @@ export default function GroupList() {
{formatMemberCount(group.memberCount, t)}
</Anchor>
</Table.Td>
<Table.Td>
<GroupActionMenu group={group} />
</Table.Td>
</Table.Tr>
))
) : (
<NoTableResults colSpan={2} />
<NoTableResults colSpan={3} />
)}
</Table.Tbody>
</Table>

6
apps/client/src/features/group/components/group-members.tsx
View File

@@ -88,7 +88,11 @@ export default function GroupMembersList() {
arrowPosition="center"
>
<Menu.Target>
<ActionIcon variant="subtle" c="gray">
<ActionIcon
variant="subtle"
c="gray"
aria-label={t("Member actions")}
>
<IconDots size={20} stroke={2} />
</ActionIcon>
</Menu.Target>