Skip to content

feat: improving accessibility by using semantic tags and aria-related props #261

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

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
Open

feat: improving accessibility by using semantic tags and aria-related props #261

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ba28c36
feat: improving accessibility by using semantic tags and aria-related…
danilo-romano-dg May 19, 2024
36eb369
feat: making tooltips accessible by default, optionally turning it off
danilo-romano-dg May 20, 2024
6c9c5e1
chore: rearranging header semantics in AboutUs page.
danilo-romano-dg May 20, 2024
27a014f
chore: rearranging header semantics in PrivacyPolicy page.
danilo-romano-dg May 20, 2024
4042cb4
chore: rearranging header semantics in Supporters page.
danilo-romano-dg May 20, 2024
72036f5
Merge remote-tracking branch 'upstream/develop' into feature/semantic…
danilo-romano-dg May 21, 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
6 changes: 3 additions & 3 deletions src/components/BurgerMenu/BurgerMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@ const BurgerMenu = () => {
return (
<Sheet>
<SheetTrigger>
<Menu color="white" className="ml-2 mr-2" />
<Menu color="white" className="ml-2 mr-2" aria-label="Expandir menu lateral"/>
</SheetTrigger>
<SheetContent side="left" className="pt-[96px] flex flex-col">
<div className="flex flex-col gap-4">
<nav className="flex flex-col gap-4">
{session && (
<Fragment>
<div className="inline-flex items-center text-semibold">
Expand Down Expand Up @@ -94,7 +94,7 @@ const BurgerMenu = () => {
))}
</Fragment>
)}
</div>
</nav>
{session && (
<div className="mt-auto">
<span
Expand Down
2 changes: 1 addition & 1 deletion src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const InfoRow = React.forwardRef<HTMLDivElement, IInfoRowProps>(
{value}
</a>
) : (
<h1 className="font-semibold">{value}</h1>
<strong className="font-semibold">{value}</strong>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Questionamento: dada a className de formatação, ainda é necessário usar a tag strong? Ou faria mais sentido apenas uma div ou uma span?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nesse ponto, parti do princípio que: mesmo se fosse lido em um html puro, ainda teria o destaque. Não creio que essa tag dê mais ênfase ao utilizar leitores de tela.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

É, faz sentido. Podemos manter assim, então.

);

return (
Expand Down
4 changes: 2 additions & 2 deletions src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const Header = React.forwardRef<HTMLDivElement, IHeader>((props, ref) => {
} = props;

return (
<div
<header
ref={ref}
className={cn(
'bg-red-600 flex h-[56px] justify-between items-center text-white p-3 gap-2 w-full z-[60]',
Expand All @@ -31,7 +31,7 @@ const Header = React.forwardRef<HTMLDivElement, IHeader>((props, ref) => {
<div className="flex items-center">
<div className="cursor-pointer ">{endAdornment}</div>
</div>
</div>
</header>
);
});

Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/sheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const SheetContent = React.forwardRef<
>
{children}
<SheetPrimitive.Close className="absolute right-3 mt-[-30px] rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary">
<X className="h-6 w-6" />
<X className="h-6 w-6" aria-label='Fechar menu lateral' tabIndex={0}/>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
Expand Down
1 change: 1 addition & 0 deletions src/components/ui/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const ToastViewport = React.forwardRef<
>(({ className, ...props }, ref) => (
<ToastPrimitives.Viewport
ref={ref}
label="Notificações estarão acessíveis através da tecla {hotkey}"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excelente.

className={cn(
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
className
Expand Down
4 changes: 2 additions & 2 deletions src/pages/AboutUs/AboutUs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const AboutUs = () => {
return (
<div className="flex flex-col h-screen items-center">
<Header title="SOS Rio Grande do Sul" startAdornment={<BurgerMenu />} />
<div className="flex flex-col gap-4 p-4 max-w-4xl pb-8 w-full">
<main className="flex flex-col gap-4 p-4 max-w-4xl pb-8 w-full">
<h2 className="text-4xl pt-4 font-semibold !text-zinc-900">
Sobre nós
</h2>
Expand Down Expand Up @@ -160,7 +160,7 @@ const AboutUs = () => {
))
)}
</div>
</div>
</main>
<div className="bg-black [&>p]:text-white p-8 w-full flex justify-center mt-4">
<p className="text-justify text-md md:text-lg">
Agradecemos a todos que têm tornado este impacto possível! Vamos
Expand Down
1 change: 1 addition & 0 deletions src/pages/Home/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ const Home = () => {
loading={loading}
variant="ghost"
size="sm"
aria-label='Atualizar lista de abrigos'
onClick={() => refresh()}
className="disabled:bg-red-500 hover:bg-red-400"
>
Expand Down
1 change: 1 addition & 0 deletions src/pages/Home/components/Filter/Filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,7 @@ const Filter = (props: IFilterProps) => {
<div className="pl-4 pr-4 pb-4 flex flex-col max-w-5xl w-full items-start">
<div className="flex flex-col gap-2 w-full my-4">
<SearchInput
aria-placeholder='Buscar por abrigo ou endereço'
value={values.search}
onChange={(ev) =>
setFieldValue('search', ev.target.value ?? '')
Expand Down
6 changes: 4 additions & 2 deletions src/pages/Home/components/ShelterListItem/ShelterListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,10 @@ const ShelterListItem = (props: IShelterListItemProps) => {
? format(data.updatedAt, 'dd/MM/yyyy HH:mm')
: '(sem informação)';


return (
<Wrapper link={`/abrigo/${data.id}`} active={data.actived}>
<div className="flex flex-col p-4 w-full border-2 border-border rounded-md gap-1 relative hover:bg-accent">
<div role='listitem' className="flex flex-col p-4 w-full border-2 border-border rounded-md gap-1 relative hover:bg-accent">
<div className="inline-flex justify-between">
<div className="flex flex-row items-center gap-1">
<h3 className="font-semibold text-lg h-full hover:cursor-pointer hover:text-slate-500">
Expand All @@ -82,7 +83,7 @@ const ShelterListItem = (props: IShelterListItemProps) => {
)}
</div>
{data.actived && (
<Button size="sm" variant="ghost">
<Button size="sm" variant="ghost" tabIndex={-1}>
<ChevronRight className="h-5 w-5" />
</Button>
)}
Expand All @@ -92,6 +93,7 @@ const ShelterListItem = (props: IShelterListItemProps) => {
</h6>
<h6 className="text-muted-foreground text-sm md:text-lg font-medium">
{data.address}

</h6>
{data.shelterSupplies.length > 0 && (
<>
Expand Down
3 changes: 2 additions & 1 deletion src/pages/Home/components/ShelterListView/ShelterListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
size="sm"
className="flex gap-2 items-center text-blue-500 hover:text-blue-600 active:text-blue-700"
onClick={onOpenModal}
aria-label='Filtrar abrigos'
>
<ListFilter className="h-5 w-5 stroke-blue-500" />
Filtros
Expand All @@ -87,7 +88,7 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
</Button>
)}
</div>
<main ref={ref} className="flex flex-col gap-4" {...rest}>
<main role='list' ref={ref} className="flex flex-col gap-4" {...rest}>
{loading ? (
<LoadingSkeleton amountItems={4} />
) : data.length === 0 ? (
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Home/components/ShelterSupplyCategoryRow/ShelterSupplyCategoryRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@ const ShelterSupplyCategoryRow = React.forwardRef<
if (tags.length === 0) return <Fragment />;

return (
<div className={cn('flex flex-col gap-3', className)} ref={ref} {...rest}>
<div role='list' className={cn('flex flex-col gap-3', className)} ref={ref} {...rest}>
<Separator className="mt-2" />
<p className="text-muted-foreground text-sm md:text-lg font-medium">
{title}
</p>
{description && <p>{description}</p>}
<div className="flex gap-2 flex-wrap">
{tags.map((s, idx) => (
<Chip key={idx} {...s} />
<Chip role='listitem' key={idx} {...s} />
))}
</div>
</div>
Expand Down
5 changes: 3 additions & 2 deletions src/pages/Shelter/Shelter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ const Shelter = () => {
size="sm"
variant="ghost"
className="[&_svg]:stroke-white disabled:bg-red-500 hover:bg-red-400"
aria-label='Voltar ao início'
onClick={() => navigate('/')}
>
<ChevronLeft size={20} />
Expand Down Expand Up @@ -132,9 +133,9 @@ const Shelter = () => {
</Button>
</Authenticated>
</div>
<div className="p-4">
<main className="p-4">
<CardAboutShelter shelter={shelter} />
</div>
</main>
<div className="flex justify-between p-4 items-center">
<h1 className="font-semibold text-[18px]">Itens do abrigo</h1>
<div className="flex gap-2 items-center ">
Expand Down