sync: master to update_dependencies

.github/workflows/check_pr_dependencies_updates.yml

@@ -24,9 +24,9 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Use Node.js v${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install project

.github/workflows/update_dependencies_branch.yml

@@ -10,9 +10,9 @@ jobs:
     name: Syncing branches
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Set up Node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: 18
       - name: Opening pull request

.vscode/i18n-ally-reviews.yml

@@ -164,3 +164,13 @@ reviews:
     description: >-
       Dialogue message that will appear when you first open the page on a
       small-screen device
+  timer.time_over:
+    description: Message for screen readers, displayed after the countdown is over
+  timer.time_remaining:
+    description: >-
+      Message for screen readers, displayed on intervals and when the time
+      remaining is 1min/30sec (you don't need to worry about time formatting)
+  timer.time_started:
+    description: Message for screen readers, displayed after the countdown started
+  about.desc_acknowledge:
+    description: Project description, over it is `about.desc`

scripts/viteServiceWorker.js

@@ -47,7 +47,7 @@ export const viteServiceWorker = {
 
 		clientsClaim: true, // Needed for offline usage
 		skipWaiting: true, // Allow to trigger cache reload manually
-		globPatterns: ['**/*.{js,css,scss,html}'],
+		globPatterns: ['**/*.{js,css,scss,html,woff2}'],
 		runtimeCaching: [
 			{
 				urlPattern: ({ url }) => url.pathname.startsWith('/locales/'),

src/__tests__/components/settings/Interface.test.jsx

@@ -92,7 +92,9 @@ describe('Interface settings', () => {
 		const Adjective = screen.getByText('common.adjective')
 		expect(Adjective).toBeDefined()
 
-		const WordFlipButton = screen.getByLabelText('settings.language_word_flip')
+		const WordFlipButton = screen.getByRole('checkbox', {
+			title: 'settings.language_word_flip',
+		})
 		fireEvent.click(WordFlipButton)
 
 		expect(SPY_wordFlip).toHaveBeenCalled()

src/__tests__/components/timer/TimePicker.test.jsx

@@ -57,7 +57,11 @@ describe('Time Picker', () => {
 			)
 		})
 
-		const button = screen.getAllByRole('button')
+		const button = screen.getAllByRole('button', {
+			// This buttion has aria-hidden to prevent being accessible to screen readers
+			// it's not hidden but needs this property to be pick by the role selector
+			hidden: true,
+		})
 
 		// First button increases time
 		fireEvent.click(button[0])

src/components/Footer.jsx

@@ -2,7 +2,7 @@ import { Box } from '@chakra-ui/react'
 
 export default function Footer() {
 	return (
-		<Box aria-hidden="true">
+		<Box aria-hidden>
 			<Box
 				h={16}
 				clipPath="polygon(

src/components/about/About.jsx

@@ -13,10 +13,7 @@ export default function about() {
 	return (
 		<>
 			<Text>
-				<Trans
-					i18nKey="about.desc"
-					components={[<Link href={__PROJECT_SOURCE__} isExternal />, <br />]}
-				/>
+				<Trans i18nKey="about.desc" components={[<br />]} />
 			</Text>
 			<br />
 			<Text>

src/components/common/GenerateButton.jsx

@@ -1,5 +1,5 @@
 import { memo, useCallback } from 'react'
-import { Button } from '@chakra-ui/react'
+import { Button, Box } from '@chakra-ui/react'
 import { useKeyPressEvent } from 'react-use'
 
 import { useTranslation } from 'react-i18next'
@@ -28,27 +28,46 @@ const GenerateButton = memo(({ generateWord }) => {
 	})
 
 	return (
-		<Button
-			aria-label={t('keybinds.words_desc')}
-			aria-keyshortcuts="Space"
-			onClick={generateWord}
-			fontFamily="Poppins"
-			fontWeight="700"
-			fontSize="2xl"
+		<Box
+			display="inline-flex"
 			w={['45%', '20%']}
-			p={8}
-			colorScheme="purple"
-			bg="#8969eb"
 			sx={{
-				'&:hover, &:active, &:focus-visible': {
-					bg: '#6e4fcf',
+				// Filter trick to add focus ring to clipPath
+				'--focus': 'var(--chakra-colors-blue-500)',
+				'&:focus-within': {
+					filter: `drop-shadow(1px 0 0 var(--focus))
+          drop-shadow(-1px 0 0 var(--focus))
+          drop-shadow(0 1px 0 var(--focus))
+          drop-shadow(0 -1px 0 var(--focus))
+          drop-shadow(1px 1px 0 var(--focus))
+          drop-shadow(-1px -1px 0 var(--focus))
+          drop-shadow(-1px 1px 0 var(--focus))
+          drop-shadow(1px -1px 0 var(--focus))`,
 				},
 			}}
-			color="#f0f0f0"
-			clipPath="polygon(0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 100% 100%, 0 100%)"
 		>
-			{t('buttons.regenerate')}
-		</Button>
+			<Button
+				aria-label={t('keybinds.words_desc')}
+				aria-keyshortcuts="Space"
+				onClick={generateWord}
+				fontFamily="Poppins"
+				fontWeight="700"
+				fontSize="2xl"
+				color="#f0f0f0"
+				bg="#8969eb"
+				w="100%"
+				p={8}
+				sx={{
+					'&:hover, &:active, &:focus': {
+						bg: '#6e4fcf',
+						boxShadow: 'none',
+					},
+				}}
+				clipPath="polygon(0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 100% 100%, 0 100%)"
+			>
+				{t('buttons.regenerate')}
+			</Button>
+		</Box>
 	)
 })
 

src/components/common/LoadingAnimation.jsx

@@ -22,8 +22,9 @@ export const LoadingAnimationContainer = (props) => {
 			flexDir="column"
 			alignItems="center"
 			justifyContent="center"
+			aria-busy="true"
 		>
-			<LoadingAnimation {...animationProps} />
+			<LoadingAnimation {...animationProps} aria-hidden />
 			{showLabel && (
 				<Text position="relative" top="1em">
 					{t('common.loading')}...

src/components/common/ScrollMessage.jsx

@@ -41,7 +41,7 @@ export default function ScrollMessage() {
 					</AlertDialogHeader>
 
 					<AlertDialogBody display="flex" justifyContent="center">
-						<Box as={ScrollAnimation} w="full" h="8em" aria-hidden="true" />
+						<Box as={ScrollAnimation} w="full" h="8em" aria-hidden />
 					</AlertDialogBody>
 
 					<AlertDialogFooter justifyContent="center">

src/components/generator/WordGenerator.jsx

@@ -9,6 +9,37 @@ import TTS from '@utils/tts'
 import ContentError from './ContentError'
 import useFetch from './UseFetch'
 
+const WordBox = ({ word, isLoading, ...props }) => (
+	<Box
+		aria-live="polite"
+		aria-relevant="text"
+		bg="#fff"
+		_dark={{
+			bg: 'linear-gradient(to right, #6b4ecb 1%, #363e4d 1%, #363e4d 99%, #6b4ecb 99%)',
+		}}
+		p={[4, 8]}
+		rounded="20px"
+		_after={
+			import.meta.env.DEV && {
+				content: 'attr(aria-label)',
+				position: 'relative',
+				display: 'block',
+				transform: 'translate(-50%)',
+				inset: '-50% 0 0 15%',
+				color: '#00ff00',
+				h: 0,
+			}
+		}
+		{...props}
+	>
+		{isLoading ? (
+			<Skeleton w="50%" minH="1.5em" margin="0 auto" borderRadius={5} />
+		) : (
+			<Text>{word}</Text>
+		)}
+	</Box>
+)
+
 export default function WordGenerator() {
 	const { t } = useTranslation()
 	const [words, setWords] = useState({})
@@ -65,36 +96,6 @@ export default function WordGenerator() {
 		refetch()
 	}, [nounLang, adjLang])
 
-	const WordBox = ({ word, ...props }) => (
-		<Box
-			bg="#fff"
-			_dark={{
-				bg: 'linear-gradient(to right, #6b4ecb 1%, #363e4d 1%, #363e4d 99%, #6b4ecb 99%)',
-			}}
-			rounded="20px"
-			p={[4, 8]}
-			_after={
-				import.meta.env.DEV && {
-					content: 'attr(aria-label)',
-					position: 'relative',
-					display: 'block',
-					transform: 'translate(-50%)',
-					top: '-50%',
-					left: '15%',
-					color: '#00ff00',
-					h: 0,
-				}
-			}
-			{...props}
-		>
-			{isLoading ? (
-				<Skeleton w="50%" minH="1.5em" margin="0 auto" borderRadius={5} />
-			) : (
-				<Text>{word}</Text>
-			)}
-		</Box>
-	)
-
 	//* Prevent showing the ContentError Message on first renders
 	//* Without this, the error message will be shown before the word set
 	//* have been fetched or shuffled
@@ -120,8 +121,9 @@ export default function WordGenerator() {
 				word={isWordDisplayFlip ? words.noun : words.adj}
 				aria-label={t(`common.${isWordDisplayFlip ? 'noun' : 'adjective'}`)}
 				clipPath="polygon(0 0,25% 0,calc(25% + 15px) 15px,calc(75% - 15px) 15px,75% 0,100% 0,100% 100%,60% 100%,calc(60% - 20px) calc(100% - 20px),calc(40% + 20px) calc(100% - 20px),40% 100%,0 100%)"
+				{...isLoading}
 			/>
-			<Box h={0} aria-hidden="true">
+			<Box h={0} aria-hidden>
 				<Icon
 					as={RiAddLine}
 					color="#8a6aec"
@@ -146,6 +148,7 @@ export default function WordGenerator() {
 					100% 0,100% 100%,60% 100%,calc(60% - 20px) calc(100% - 20px),calc(40% + 20px) calc(100% - 20px),40% 100%,
 				0 100%)`,
 				]}
+				{...isLoading}
 			/>
 		</Grid>
 	)

src/components/settings/Accessibility.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, memo } from 'react'
+import { useState, useEffect, useCallback, memo, useId } from 'react'
 import { setData } from '@utils/appStorage'
 import {
 	Divider,
@@ -21,22 +21,20 @@ import { wrapContext } from '@contexts/contextWrapper'
 import TTS from '@utils/tts'
 
 const Slider = (props) => (
-	<CSlider
-		aria-valuemin={1}
-		aria-valuemax={100}
-		min={1}
-		max={100}
-		step={1}
-		{...props}
-	>
-		<SliderTrack aria-hidden="true">
+	<CSlider min={1} max={100} step={1} {...props}>
+		<SliderTrack aria-hidden>
 			<SliderFilledTrack />
 		</SliderTrack>
 		{props.children}
 	</CSlider>
 )
 const SliderGuidance = ({ left, right }) => (
-	<Stack color="gray.400" direction="row" justifyContent="space-between">
+	<Stack
+		color="gray.400"
+		direction="row"
+		justifyContent="space-between"
+		aria-hidden
+	>
 		<Heading size="xs" as="h4">
 			{left}
 		</Heading>
@@ -68,11 +66,11 @@ const VolumeSlider = () => {
 				defaultValue={TTS._volume * 100}
 			>
 				<Tooltip
-					aria-hidden="true"
 					isOpen={displayVolumeTooltip}
 					label={volume}
 					placement="top"
 					hasArrow
+					aria-hidden
 				>
 					<SliderThumb />
 				</Tooltip>
@@ -107,11 +105,11 @@ const RateSlider = () => {
 				defaultValue={TTS._rate * 100}
 			>
 				<Tooltip
-					aria-hidden="true"
 					isOpen={displaySpeedTooltip}
 					label={speed}
 					placement="top"
 					hasArrow
+					aria-hidden
 				>
 					<SliderThumb />
 				</Tooltip>
@@ -173,6 +171,7 @@ const InputTest = () => {
 
 const Accessibility = ({ isTTSEnabled, toggleSpeak }) => {
 	const { t } = useTranslation()
+	const ttsCheckboxId = useId()
 
 	const [useTTS, setTTS] = useState(isTTSEnabled)
 
@@ -199,8 +198,13 @@ const Accessibility = ({ isTTSEnabled, toggleSpeak }) => {
 
 	return (
 		<>
-			<SpacedStack heading={`${t('settings.tts')} (TTS)`} mt={0}>
-				<Switch onChange={toggleTTS} isChecked={useTTS} />
+			<SpacedStack
+				as="label"
+				htmlFor={ttsCheckboxId}
+				heading={`${t('settings.tts')} (TTS)`}
+				mt={0}
+			>
+				<Switch id={ttsCheckboxId} onChange={toggleTTS} isChecked={useTTS} />
 			</SpacedStack>
 
 			<Select
@@ -221,18 +225,16 @@ const Accessibility = ({ isTTSEnabled, toggleSpeak }) => {
 				}
 			</Select>
 
-			<Divider my={6} />
+			<Divider my={6} aria-hidden />
 
 			<Stack direction="column" px={3} gap={5}>
 				<Stack>
 					<SmallHeading>{t('settings.tts_volume')}</SmallHeading>
 					<VolumeSlider />
-					<SliderGuidance />
 				</Stack>
 				<Stack>
 					<SmallHeading>{t('settings.tts_rate')}</SmallHeading>
 					<RateSlider />
-					<SliderGuidance />
 				</Stack>
 			</Stack>
 			<InputTest />