release-2024-07-10.1

.eslintignore

@@ -1 +0,0 @@
-!.storybook

.eslintrc.json

@@ -1,10 +1,5 @@
 {
-	"extends": [
-		"next/core-web-vitals",
-		"prettier",
-		"plugin:storybook/recommended",
-		"plugin:@typescript-eslint/recommended"
-	],
+	"extends": ["next/core-web-vitals", "prettier", "plugin:@typescript-eslint/recommended"],
 	"rules": {
 		"comma-spacing": ["error", { "before": false, "after": true }],
 		"react/no-unescaped-entities": 0,

.gitpod.yml

@@ -1,8 +1,8 @@
 # List the start up tasks. Learn more https://www.gitpod.io/docs/config-start-tasks/
 tasks:
-  - name: yarn
-    init: yarn install
-    command: yarn dev
+  - name: npm
+    init: npm install
+    command: npm run dev
 # List the ports to expose. Learn more https://www.gitpod.io/docs/config-ports/
 ports:
   - port: 3000

CONTRIBUTING.md

@@ -6,65 +6,76 @@ This project is built with Next.JS, Typescript and CSS modules.
 
 ## Pre-requisites (these need to be installed on your machine)
 
-[Node.js](https://nodejs.org/en/)  
-[Yarn Package Manager](https://yarnpkg.com/)  
+[Node.js](https://nodejs.org/en/)
 
 ## Available packages
 
 Icons - [React Icons Documentation]( https://react-icons.github.io/react-icons)  
 Code Snippets - [React Syntax Highlighter Documentation](https://github.com/react-syntax-highlighter/react-syntax-highlighter)  
 Translations - [next-i18next Documentation](https://next.i18next.com/)  
-Storybook - [Storybook Documentation](https://storybook.js.org/)
 
 ## How to contribute
 
-1.  Look through [Pre-existing issues](https://github.com/AccessibleForAll/AccessibleWebDev/issues) or [Raise a new issue](https://github.com/AccessibleForAll/AccessibleWebDev/issues/new/choose) and ask to be assigned. Pull requests made without a corresponding issue will likely be closed.
+1. Look through [Pre-existing issues](https://github.com/AccessibleForAll/AccessibleWebDev/issues) or [Raise a new issue](https://github.com/AccessibleForAll/AccessibleWebDev/issues/new/choose) and ask to be assigned. Pull requests made without a corresponding issue will likely be closed.
 2. Please check the [coding standards](https://github.com/AccessibleForAll/AccessibleWebDev/blob/main/CODING_STANDARDS.md) page before start contributing.
-3.  [Fork](https://github.com/AccessibleForAll/AccessibleWebDev/fork) the project
-4.  Clone the project:
+3. [Fork](https://github.com/AccessibleForAll/AccessibleWebDev/fork) the project
+4. Clone the project:
+
     ```bash
     git clone https://github.com/<your-github-username>/AccessibleWebDev
     ```
-5.  Navigate to the project directory:
+
+5. Navigate to the project directory:
+
     ```bash
     cd AccessibleWebDev
     ```
-6.  Set the upstream repository:
+
+6. Set the upstream repository:
+
     ```bash
     git remote add upstream https://github.com/AccessibleForAll/AccessibleWebDev.git
     ```
-7.  Install dependencies:
+
+7. Install dependencies:
+
     ```bash
-    yarn install
+    npm install
     ```
-8.  Create a new branch:
+
+8. Create a new branch:
+
     ```bash
     git checkout -b <YourBranchName>
     ```
-9.  To run the whole project locally:
-    ```bash
-    yarn dev
-    ```
-    If you are making an isolated component and wish to run storybook locally instead of the whole website run this instead of `yarn dev`:
+
+9. To run the whole project locally:
+
     ```bash
-    yarn storybook
+    npm run dev
     ```
 
-10.  Make your changes
+10. Make your changes
 11. Stage your changes:
+
     ```bash
     git add <NameOfFileChanged>
     ```
+
 12. Commit your changes and provide a meaningful commit message:
-    
+
     Unsure how to write a meaningful commit message? Check out this article about [How to Write a Good Git Commit Message](https://blog.ossph.org/how-to-write-a-good-git-commit-message/#:~:text=To%20set%20up%20a%20Git,t%20meet%20the%20specified%20format.)
+
     ```bash
     git commit -m "<Your commit message here>"
     ```
+
 13. Push your commits to your local repository
+
     ```bash
     git push origin <YourBranchName>
     ```
+
 14. Create a [pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request)
 15. Wait for maintainers to review your pull request and suggest any changes
 

components/ContentTemplates/ButtonsTemplate.tsx

@@ -386,6 +386,18 @@ export const ButtonsTemplate = () => {
 					should probably be a link.
 				</p>
 			</TemplateSection>
+			<TemplateSection
+				sectionName="touchTargetMinimum"
+				title="Touch Target Minimum">
+				<p>
+					When it comes to creating accessible buttons for your websites and
+					applications, it's important that they are easy to activate. To
+					achieve this goal, WCAG suggests that buttons have a minimum target
+					size of at least 24 by 24 CSS pixels. In doing so, users, especially
+					those who suffer from mobility impairments like hand tremors or are
+					amputees, have an easier time clicking on them.
+				</p>
+			</TemplateSection>
 			<TemplateSection sectionName="WCAGCriteria" title="WCAG Criteria">
 				<ul className="list">
 					<li>
@@ -453,9 +465,16 @@ export const ButtonsTemplate = () => {
 					</li>
 					<li>
 						<a
-							href="https://www.w3.org/TR/WCAG21/#target-size"
+							href="https://www.w3.org/TR/WCAG22/#target-size-enhanced"
+							className="blockLink">
+							2.5.5 Target Size (Enhanced)
+						</a>
+					</li>
+					<li>
+						<a
+							href="https://www.w3.org/TR/WCAG22/#target-size-minimum"
 							className="blockLink">
-							2.5.5 Target Size
+							2.5.8 Target Size (Minimum)
 						</a>
 					</li>
 					<li>
@@ -467,6 +486,7 @@ export const ButtonsTemplate = () => {
 					</li>
 				</ul>
 			</TemplateSection>
+
 			<TemplateSection sectionName="otherResources" title="Other Resources">
 				<ul className="list">
 					<li>

components/ContentTemplates/CaptchasTemplate.tsx

@@ -1,5 +1,107 @@
-import { WorkInProgress } from "../WorkInProgress/WorkInProgress"
+import { captchasPageNavigation } from "../../data/pageNavigationLists"
+import { NavPage } from "../NavPage/NavPage"
+import { PageUpdated } from "../PageUpdated/PageUpdated"
+import { TemplateSection } from "../TemplateSection/TemplateSection"
 
 export const CaptchasTemplate = () => {
-	return <WorkInProgress />
+	return (
+		<>
+			<NavPage pageNavigation={captchasPageNavigation} />
+			<TemplateSection sectionName="introduction" title="Introduction">
+				<p>
+					CAPTCHA stands for Completely Automated Public Turing test to tell
+					Computers and Humans Apart. CAPTCHAs are tests to prove you are human
+					and not a bot, such as picking out objects from a set of images,
+					listening to a garbled audio or trying to pick out letters and numbers
+					from distorted text.
+				</p>
+				<p>
+					CAPTCHAs are inherently not accessible by design. They rely on human
+					senses and cognition which means that people with certain disabilities
+					are unable to complete them.
+				</p>
+			</TemplateSection>
+			<TemplateSection
+				sectionName={"captchaIssues"}
+				title={"What's the issue with CAPTCHAs?"}>
+				<p>
+					The easiest way to explain the issues with CAPTCHAs is with examples.
+				</p>
+				<h3>Visual</h3>
+				<p>
+					Any CAPTCHA relying on sight, such as picking all the traffic light
+					images, or writing the letters in a distorted text, are not accessible
+					to people who are blind, are deaf-blind, have low vision or have a
+					reading disability such as dyslexia.
+				</p>
+				<h3>Audio</h3>
+				<p>
+					Any CAPTCHA relying on audio, such as picking out a word in the middle
+					of a distorted soundtrack, are not accessible to people who are deaf,
+					hard of hearing or those who have audio processing disorders.
+				</p>
+				<h3>Maths challenge</h3>
+				<p>
+					Any CAPTCHA that relies on doing calculations, even those considered
+					simple such as 1 + 2, are not accessible to some people with cognitive
+					disabilities, learning disabilities or those who have anxiety.
+				</p>
+				<h3>Alignment challenges</h3>
+				<p>
+					Any CAPTCHA relying on aligning two images are not accessible to
+					people with vision disabilities or motor disabilities.
+				</p>
+				<h3>Click to prove you're not a robot</h3>
+				<p>
+					Even having a checkbox CAPTCHA can be difficult for some people
+					because if they can't click it, sometimes another more complicated
+					CAPTCHA is triggered instead.
+				</p>
+			</TemplateSection>
+			<TemplateSection
+				sectionName={"accessibleCAPTCHA"}
+				title={"Accessible CAPTCHA"}>
+				<p>
+					The best way to make CAPTCHA accessible is to remove it. Unless you
+					have a large problem with spam then CAPTCHA is probably not needed.
+					You can try using things like honeypots for form submission. These are
+					hidden form fields that only bots can find. Or consider two factor
+					authentication for creating accounts and logging into services.
+				</p>
+				<p>
+					If you must use CAPTCHA then you must provide multiple ways for people
+					to attempt the CAPTCHA. This means that if people can't fill in a
+					visual CAPTCHA due to a disability, they can attempt an audio CAPTCHA
+					instead.
+				</p>
+				<p>
+					Even having two types of CAPTCHA does not make your site accessible
+					for everyone. If using CAPTCHA is the only way to get to a certain
+					part of a website or perform a specific action, then you also need to
+					provide a way for people who can't get past the CAPTCHAs to get help.
+				</p>
+			</TemplateSection>
+			<TemplateSection sectionName="WCAGCriteria" title="WCAG Criteria">
+				<ul className="list">
+					<li>
+						<a
+							href="https://www.w3.org/TR/WCAG21/#non-text-content"
+							className="blockLink">
+							1.1.1 Non-text content
+						</a>
+					</li>
+				</ul>
+			</TemplateSection>
+			<TemplateSection sectionName={"otherResources"} title={"Other Resources"}>
+				<ul>
+					<li>
+						<a href="https://www.w3.org/TR/turingtest/" className="blockLink">
+							The inaccessibility of CAPTCHAS
+						</a>
+					</li>
+				</ul>
+			</TemplateSection>
+			<PageUpdated date="28th June 2024" />
+		</>
+	)
 }

components/ContentTemplates/HeadingsTemplate.tsx

@@ -1,4 +1,4 @@
-import Image from "next/image"
+import Image from "next/legacy/image"
 import { NavPage } from "../NavPage/NavPage"
 import { CodeBlock } from "../CodeBlock/CodeBlock"
 import { headingsPageNavigation } from "../../data/pageNavigationLists"