a11y: General improvements

public/locales/en/campaigns.json

@@ -20,7 +20,7 @@
   "campaignType": "Campaign type",
   "description": "Description",
   "targetAmount": "Target amount",
-  "donationsAmount": "Donations amount",
+  "donationsAmount": "Reached Amount",
   "blockedAmount": "Blocked amount",
   "withdrawnAmount": "Withdrawn amount",
   "startDate": "Start date",

src/common/theme.ts

@@ -47,6 +47,24 @@ const borders = {
   input: 'rgba(0, 0, 0, 0.23)',
 }
 
+declare module '@mui/material/styles' {
+  interface TypographyVariants {
+    hidden: React.CSSProperties
+  }
+
+  // allow configuration using `createTheme`
+  interface TypographyVariantsOptions {
+    hidden?: React.CSSProperties
+  }
+}
+
+// Update the Typography's variant prop options
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    hidden: true
+  }
+}
+
 export const themeOptions: ThemeOptions = {
   palette: {
     mode: 'light',
@@ -96,6 +114,14 @@ export const themeOptions: ThemeOptions = {
             color: colors.blue.mainDark,
           },
         },
+        textInherit: {
+          '&:hover': {
+            backgroundColor: lighten(colors.blue.main, 0.9),
+          },
+          '&.Mui-focusVisible': {
+            backgroundColor: lighten(colors.blue.main, 0.9),
+          },
+        },
         outlined: {
           backgroundColor: colors.white.main,
         },
@@ -118,12 +144,18 @@ export const themeOptions: ThemeOptions = {
           '&:hover': {
             backgroundColor: darken(colors.blue.main, 0.15),
           },
+          '&.Mui-focusVisible': {
+            backgroundColor: darken(colors.blue.main, 0.15),
+          },
         },
         containedSecondary: {
           backgroundColor: colors.yellow.main,
           '&:hover': {
             backgroundColor: darken(colors.yellow.main, 0.15),
           },
+          '&.Mui-focusVisible': {
+            backgroundColor: darken(colors.yellow.main, 0.15),
+          },
         },
       },
     },
@@ -184,6 +216,26 @@ export const themeOptions: ThemeOptions = {
         sx: { py: 1.5 },
       },
     },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          border: '10px red',
+          '&.Mui-focusVisible': {
+            outline: '1rem solid',
+          },
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          outline: 'red',
+          '&.Mui-focusVisible': {
+            outline: '1px solid',
+          },
+        },
+      },
+    },
   },
 
   typography: {
@@ -197,7 +249,12 @@ export const themeOptions: ThemeOptions = {
     },
     h4: { fontFamily: montserrat.style.fontFamily },
     h5: { fontFamily: montserrat.style.fontFamily },
-
+    hidden: {
+      position: 'absolute',
+      overflow: 'hidden',
+      width: '1px',
+      height: '1px',
+    },
     body1: {
       fontSize: '0.875rem',
       lineHeight: '1.43',

src/components/client/campaigns/CampaignFilter.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react'
 import { styled } from '@mui/material/styles'
-import { Box, CircularProgress, Grid, IconButton, Typography } from '@mui/material'
+import { Box, CircularProgress, Grid, GridProps, IconButton, Typography } from '@mui/material'
 import { useCampaignList } from 'common/hooks/campaigns'
 import CampaignsList from './CampaignsList'
 import { CampaignResponse } from 'gql/campaigns'
@@ -29,7 +29,7 @@ const classes = {
   filterButtonContainer: `${PREFIX}-filterButtonsCtn`,
 }
 
-const Root = styled('div')(() => ({
+const Root = styled(Grid)<GridProps>(() => ({
   [`& .${classes.filterButtonContainer}`]: {
     display: 'flex',
     justifyContent: 'center',
@@ -95,47 +95,45 @@ export default function CampaignFilter() {
 
   return (
     <>
-      <Grid container justifyContent={'center'} display={'flex'}>
-        <Root>
-          <Grid container item sx={{ my: 5 }} maxWidth={'lg'} component={'ul'}>
-            {Object.values(CampaignTypeCategory).map((category) => {
-              const count = campaigns?.reduce((acc, curr) => {
-                return category === curr.campaignType.category ? acc + 1 : acc
-              }, 0)
-              return (
-                <Grid
-                  item
-                  xs={6}
-                  md={2}
-                  className={classes.filterButtonContainer}
+      <Root container justifyContent={'center'} display={'flex'} component={'section'}>
+        <Grid container item sx={{ my: 5 }} maxWidth={'lg'} component={'ul'}>
+          {Object.values(CampaignTypeCategory).map((category) => {
+            const count = campaigns?.reduce((acc, curr) => {
+              return category === curr.campaignType.category ? acc + 1 : acc
+            }, 0)
+            return (
+              <Grid
+                item
+                xs={6}
+                md={2}
+                className={classes.filterButtonContainer}
+                key={category}
+                component={'li'}>
+                <IconButton
                   key={category}
-                  component={'li'}>
-                  <IconButton
-                    key={category}
-                    className={classes.filterButtons}
-                    disabled={count === 0}
-                    onClick={() => setSelectedCategory(category)}>
-                    {categories[category].icon ?? <Category fontSize="small" />}
-                    <Typography>
-                      {t(`campaigns:filters.${category}`)} ({count})
-                    </Typography>
-                  </IconButton>
-                </Grid>
-              )
-            })}
-            <Grid item xs={6} md={2} className={classes.filterButtonContainer} component={'li'}>
-              <IconButton
-                className={classes.filterButtons}
-                onClick={() => setSelectedCategory('ALL')}>
-                <FilterNone fontSize="small" />
-                <Typography>
-                  {t(`campaigns:filters.all`)} ({campaigns?.length ?? 0})
-                </Typography>
-              </IconButton>
-            </Grid>
+                  className={classes.filterButtons}
+                  disabled={count === 0}
+                  onClick={() => setSelectedCategory(category)}>
+                  {categories[category].icon ?? <Category fontSize="small" />}
+                  <Typography>
+                    {t(`campaigns:filters.${category}`)} ({count})
+                  </Typography>
+                </IconButton>
+              </Grid>
+            )
+          })}
+          <Grid item xs={6} md={2} className={classes.filterButtonContainer} component={'li'}>
+            <IconButton
+              className={classes.filterButtons}
+              onClick={() => setSelectedCategory('ALL')}>
+              <FilterNone fontSize="small" />
+              <Typography>
+                {t(`campaigns:filters.all`)} ({campaigns?.length ?? 0})
+              </Typography>
+            </IconButton>
           </Grid>
-        </Root>
-      </Grid>
+        </Grid>
+      </Root>
       {isLoading ? (
         <Box textAlign="center">
           <CircularProgress size="3rem" />

src/components/client/faq/ExpandableListItem.tsx

@@ -1,4 +1,4 @@
-import { Collapse, List, Box, ListItemText, Paper } from '@mui/material'
+import { Collapse, List, Box, ListItemText, Paper, ListItemButton } from '@mui/material'
 import { ExpandMore, ExpandLess } from '@mui/icons-material'
 import React, { useState } from 'react'
 
@@ -24,27 +24,50 @@ const ExpandableListItem = ({ header, content }: Props) => {
         cursor: 'pointer',
       }}>
       <Paper elevation={1} sx={{ borderRadius: 2 }}>
-        <Box
-          sx={{ display: 'flex', alignItems: 'center', px: 3, py: 1 }}
-          onClick={() => setOpen(!open)}>
-          <ListItemText
-            primary={header}
-            primaryTypographyProps={{
-              variant: 'subtitle1',
-              color: `${withAccentColor(open)}`,
-            }}
-          />
-          {open ? (
-            <ExpandLess sx={{ color: `${withAccentColor(open)}` }} />
-          ) : (
-            <ExpandMore sx={{ color: `${withAccentColor(open)}` }} />
-          )}
-        </Box>
-        <Collapse in={open}>
-          <List>
-            <Box sx={{ pl: { xs: 3, md: 6 }, pb: 2, pr: 2 }}>{content}</Box>
-          </List>
-        </Collapse>
+        <ListItemButton
+          disableRipple
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            '&.MuiButtonBase-root:hover': {
+              bgcolor: 'transparent',
+            },
+            '&.MuiButtonBase-root:focus-visible': {
+              bgcolor: 'none',
+              background: 'none',
+              boxShadow: 'none',
+              border: '1px solid',
+            },
+          }}
+          onClick={() => setOpen((prev) => !prev)}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              px: 3,
+              py: 1,
+              width: '100%',
+            }}>
+            <ListItemText
+              primary={header}
+              primaryTypographyProps={{
+                variant: 'subtitle1',
+                color: `${withAccentColor(open)}`,
+                component: 'h3',
+              }}
+            />
+            {open ? (
+              <ExpandLess sx={{ color: `${withAccentColor(open)}` }} />
+            ) : (
+              <ExpandMore sx={{ color: `${withAccentColor(open)}` }} />
+            )}
+          </Box>
+          <Collapse in={open}>
+            <List>
+              <Box sx={{ pl: { xs: 3, md: 6 }, pb: 2, pr: 2 }}>{content}</Box>
+            </List>
+          </Collapse>
+        </ListItemButton>
       </Paper>
     </List>
   )

src/components/client/index/IndexPage.styled.tsx

@@ -1,10 +1,10 @@
-import { Typography } from '@mui/material'
+import { Typography, TypographyProps } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
 import theme from 'common/theme'
 import LinkButton from 'components/common/LinkButton'
 
-export const Heading = styled(Typography)(() => ({
+export const Heading = styled(Typography)<TypographyProps>(() => ({
   color: '#212121',
   textAlign: 'center',
   fontWeight: 500,

src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx

@@ -17,6 +17,11 @@ export const Root = styled(Card)(() => ({
     backgroundColor: '#F8F8F8	',
   },
 
+  '& .Mui-focusVisible': {
+    filter: 'grayscale(15%)',
+    backgroundColor: '#F8F8F8	',
+  },
+
   [theme.breakpoints.up('lg')]: {
     '&:nth-of-type(1)': {
       gridArea: '1 / 1 / 3 / 3',
@@ -96,18 +101,18 @@ export const DonateButton = styled(LinkButton)(() => ({
   height: theme.spacing(4.5),
   padding: theme.spacing(0.75, 2),
   marginRight: theme.spacing(1),
-  backgroundColor: theme.palette.secondary.main,
+  // backgroundColor: theme.palette.secondary.main,
   boxShadow:
     '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12)',
   borderRadius: theme.borders.round,
   fontWeight: '500',
   fontSize: theme.typography.pxToRem(16),
   letterSpacing: '0.4px',
 
-  '&:hover': {
-    boxShadow:
-      '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12)',
-  },
+  // '&:hover': {
+  //   boxShadow:
+  //     '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12)',
+  // },
 
   '&.Mui-disabled': {
     backgroundColor: 'rgba(152, 152, 152, 0.8)',

src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx

@@ -1,7 +1,7 @@
 import { useTranslation, i18n } from 'next-i18next'
 import { CampaignResponse } from 'gql/campaigns'
 
-import { Box } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 
 import Link from 'components/common/Link'
 import CampaignProgress from 'components/client/campaigns/CampaignProgress'
@@ -35,8 +35,10 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
   const targetAmount = moneyPublic(campaign.targetAmount)
 
   return (
-    <Root data-testid={`completed-campaign-${index}`}>
-      <Link href={routes.campaigns.viewCampaignBySlug(slug)}>
+    <Root data-testid={`completed-campaign-${index}`} variant="outlined">
+      <Link
+        href={routes.campaigns.viewCampaignBySlug(slug)}
+        aria-labelledby={`${index}--heading ${index}--summary`}>
         <Box
           position={'relative'}
           sx={{
@@ -54,19 +56,22 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
             fill
             sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)"
             quality={index === 0 ? 100 : 75}
+            aria-hidden={true}
             style={{ objectFit: 'cover' }}
           />
         </Box>
         <StyledContent>
-          <SumWrapper>
+          <SumWrapper id={`${index}--summary`}>
             <Sum>
+              <Typography variant="hidden">{t('donationsAmount')}</Typography>
               <SumNumber>
                 {i18n?.language === 'bg'
                   ? reachedAmount.split(',')[0] + ' лв.'
                   : reachedAmount.split('.')[0]}
               </SumNumber>
             </Sum>
             <Sum>
+              <Typography variant="hidden">{t('targetAmount')}</Typography>
               <SumNumber>
                 {i18n?.language === 'bg'
                   ? targetAmount.split(',')[0] + ' лв.'
@@ -75,11 +80,12 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
             </Sum>
           </SumWrapper>
           <CampaignProgress campaignId={id} raised={reached} target={target} />
-          <CampaignTitle>{title}</CampaignTitle>
+          <CampaignTitle id={`${index}--heading`}>{title}</CampaignTitle>
         </StyledContent>
       </Link>
       <StyledCardActions disableSpacing>
         <DonateButton
+          tabIndex={0}
           href={routes.campaigns.oneTimeDonation(slug)}
           variant="contained"
           color="secondary">