[
  {
    "path": ".eslintignore",
    "content": ""
  },
  {
    "path": ".eslintrc.json",
    "content": "{\n\t\"extends\": [\n\t\t\"next/core-web-vitals\",\n\t\t\"prettier\",\n\t\t\"plugin:@typescript-eslint/recommended\",\n\t\t\"plugin:jsx-a11y/strict\"\n\t],\n\t\"rules\": {\n\t\t\"comma-spacing\": [\"error\", { \"before\": false, \"after\": true }],\n\t\t\"react/no-unescaped-entities\": 0,\n\t\t\"react/prop-types\": \"off\",\n\t\t// suppress errors for missing 'import React' in files\n\t\t\"react/react-in-jsx-scope\": \"off\",\n\t\t// allow jsx syntax in js files (for next.js project)\n\t\t\"react/jsx-filename-extension\": [\n\t\t\t1,\n\t\t\t{ \"extensions\": [\".js\", \".jsx\", \".ts\", \".tsx\"] }\n\t\t] //should add \".ts\" if typescript project\n\t},\n\t\"overrides\": [\n\t\t{\n\t\t\t\"files\": [\"*.ts\", \"*.tsx\"],\n\t\t\t\"rules\": {\n\t\t\t\t\"react/prop-types\": \"off\",\n\t\t\t\t\"@typescript-eslint/naming-convention\": [\n\t\t\t\t\t\"warn\",\n\t\t\t\t\t{\n\t\t\t\t\t\t\"selector\": \"default\",\n\t\t\t\t\t\t\"format\": [\"camelCase\"],\n\t\t\t\t\t\t\"leadingUnderscore\": \"forbid\",\n\t\t\t\t\t\t\"trailingUnderscore\": \"forbid\"\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t\"selector\": \"objectLiteralProperty\",\n\t\t\t\t\t\t\"modifiers\": [\"requiresQuotes\"],\n\t\t\t\t\t\t\"format\": null\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t\"selector\": \"objectLiteralProperty\",\n\t\t\t\t\t\t\"format\": [\"strictCamelCase\", \"StrictPascalCase\"]\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t\"selector\": \"typeLike\",\n\t\t\t\t\t\t\"format\": [\"StrictPascalCase\", \"PascalCase\"]\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t\"selector\": \"interface\",\n\t\t\t\t\t\t\"format\": [\"PascalCase\"]\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t\"selector\": \"function\",\n\t\t\t\t\t\t// Exception for FunctionComponents\n\t\t\t\t\t\t\"format\": [\"strictCamelCase\", \"StrictPascalCase\"]\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t\"selector\": \"parameter\",\n\t\t\t\t\t\t\"format\": [\"strictCamelCase\", \"StrictPascalCase\"]\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t\"selector\": \"variable\",\n\t\t\t\t\t\t\"format\": [\"camelCase\", \"UPPER_CASE\"]\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t\"selector\": \"variable\",\n\t\t\t\t\t\t\"modifiers\": [\"exported\"],\n\t\t\t\t\t\t// Exception for components wrapped in HOC's and for React's Context\n\t\t\t\t\t\t\"format\": [\"strictCamelCase\", \"StrictPascalCase\", \"UPPER_CASE\"]\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t\"selector\": \"enumMember\",\n\t\t\t\t\t\t\"format\": [\"StrictPascalCase\"]\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t}\n\t]\n}\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug_report.md",
    "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Desktop (please complete the following information):**\n - OS: [e.g. iOS]\n - Browser [e.g. chrome, safari]\n - Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n - Device: [e.g. iPhone6]\n - OS: [e.g. iOS8.1]\n - Browser [e.g. stock browser, safari]\n - Version [e.g. 22]\n\n**Additional context**\nAdd any other context about the problem here.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/feature_request.md",
    "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n"
  },
  {
    "path": ".github/PULL_REQUEST_TEMPLATE.md",
    "content": "## Describe your changes\n\n## Screenshots - If Any (Optional)\n\n## Link to issue\n<!-- Example: Closes #31 -->\nCloses #\n\n## Checklist before requesting a review\n\n- [ ] I have performed a self-review of my code.\n- [ ] Followed the repository's [Contributing Guidelines](/CONTRIBUTING.md).\n- [ ] I ran the app and tested it locally to verify that it works as expected.\n- [ ] I have checked my code with an automatic accessibility tool such as Axe Dev Tools or Wave \n      and it shows no errors.\n## Additional Information (Optional)\nAny additional information that you want to give us.\n"
  },
  {
    "path": ".github/workflows/appreciation.yml",
    "content": "name: 'Thank Contributors'\n\non:\n  issues:\n    types: [opened]\n  pull_request_target:\n    types: [opened]\n\njobs:\n  welcome-new-contributor:\n    runs-on: ubuntu-latest\n    steps:\n      - name: 'Greet the contributor'\n        uses: garg3133/welcome-new-contributors@v1.2\n        with:\n          token: ${{ secrets.GITHUB_TOKEN }}\n          issue-message: 'Hello @contributor_name, thanks for raising an issue in this project. The maintainers of this project are volunteers so please be understanding if it takes time before you get a response. We still appreciate your help with raising issues!'\n          pr-message: 'Hello @contributor_name, thanks for raising a pull request in this project. The maintainers of this project are volunteers so please be understanding if it takes time before you get a response. We still appreciate your help with creating pull requests!'\n"
  },
  {
    "path": ".github/workflows/axe.yaml",
    "content": "name: axe\non:\n  push:\n    branches: [main]\n  pull_request:\n    branches: [main]\njobs:\n  axe:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - name: Use Node.js 16.x\n        uses: actions/setup-node@v1\n        with:\n          node-version: 16.x\n      - run: npm ci\n      - run: npm run dev & npx wait-on http://localhost:3000\n      - name: Install browser drivers\n        run: npx browser-driver-manager install chrome\n      - name: Run axe\n        run: |\n          npm install -g @axe-core/cli\n          axe http://localhost:3000 --exit\n"
  },
  {
    "path": ".gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n.yarn\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\n\n# VS code\n.vscode\n\n# IDEA\n.idea\n"
  },
  {
    "path": ".gitpod.yml",
    "content": "# List the start up tasks. Learn more https://www.gitpod.io/docs/config-start-tasks/\ntasks:\n  - name: npm\n    init: npm install\n    command: npm run dev\n# List the ports to expose. Learn more https://www.gitpod.io/docs/config-ports/\nports:\n  - port: 3000\n    onOpen: open-browser\ngithub:\n  prebuilds:\n    master: true\n    branches: true\n    pullRequests: true\n    pullRequestsFromForks: true\n    addCheck: true\n    addComment: false\n    addBadge: true\n"
  },
  {
    "path": ".husky/pre-commit",
    "content": "#!/usr/bin/env sh\n. \"$(dirname -- \"$0\")/_/husky.sh\"\n\nnpx lint-staged\n"
  },
  {
    "path": ".prettierignore",
    "content": "# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n*.md"
  },
  {
    "path": ".prettierrc.json",
    "content": "{\n\t\"trailingComma\": \"es5\",\n\t\"useTabs\": true,\n\t\"tabWidth\": 2,\n\t\"semi\": false,\n\t\"singleQuote\": false,\n\t\"bracketSpacing\": true,\n\t\"bracketSameLine\": true,\n\t\"endOfLine\": \"lf\",\n\t\"singleAttributePerLine\": false\n}\n"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, religion, or sexual identity\nand orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n* Demonstrating empathy and kindness toward other people\n* Being respectful of differing opinions, viewpoints, and experiences\n* Giving and gracefully accepting constructive feedback\n* Accepting responsibility and apologizing to those affected by our mistakes,\n  and learning from the experience\n* Focusing on what is best not just for us as individuals, but for the\n  overall community\n\nExamples of unacceptable behavior include:\n\n* The use of sexualized language or imagery, and sexual attention or\n  advances of any kind\n* Trolling, insulting or derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or email\n  address, without their explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n  professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement at\nemma.l.dawson@gmail.com.\nAll complaints will be reviewed and investigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series\nof actions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or\npermanent ban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior,  harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within\nthe community.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.0, available at\nhttps://www.contributor-covenant.org/version/2/0/code_of_conduct.html.\n\nCommunity Impact Guidelines were inspired by [Mozilla's code of conduct\nenforcement ladder](https://github.com/mozilla/diversity).\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see the FAQ at\nhttps://www.contributor-covenant.org/faq. Translations are available at\nhttps://www.contributor-covenant.org/translations.\n"
  },
  {
    "path": "CODING_STANDARDS.md",
    "content": "# Coding Standards\n\n## Naming\n\nChoosing good names is critical to creating code that is easy to use and easy to understand. You\nshould always take the time to think about whether you have chosen the right name for something.\n\n### English\n\nAll code, names, comments, etc. must be in English.\n\n### Use one name for one thing\n\nDo not reuse names. Do not use names that can mean multiple things. Always use the same name for the\nsame thing. \n\n### Descriptive\n\nNames must be descriptive for the working or usage of the class, method or variable.\n\n### Context\n\nA name should make sense within its context and should not have unnecessary information for that\ncontext. For example a variable that holds the name of a user can be named `name` within a `User`\ncontext. However if you need to hold the name of a user in another place, `userName` might be a\nbetter name. Adding `user` within a `User` context (`user.userName`) is redundant and should be\navoided.\n\n### Interfaces\n\nInterfaces should use the `I` as prefix. Like `IMyInterface`\n\n### Functions\n\nPrefer using a verb as a name to indicate it will do something. Like `render`, `open` or `getData`.\n\n### Variables, Properties, etc.\n\nAll non-functions should have a noun as a name, not a verb.\n\n### Booleans\n\nShould start with `is`, `has`, `will` or `should`. Like `isValid` or `hasValues`.\n\n### Always Affirmative\n\nAvoid negations. Prefer `isShown` over `isHidden` or\n`isEnabled` over `isDisabled`. Do not use names like `notEditable`.\n\n## Casing\n\n### Classes, Interfaces, Types, Enums and Generics\n\n**PascalCase** Every individual word start with an upper case character, no underscores, no dashes.\n\n### Functions, Properties, Arguments and Variables\n\n**camelCase** Starts with a lower case character, every following individual word start with an\nupper case character, no underscores, no dashes.\n\n### Globally used constants\n\n**SNAKE_UPPER_CASE** Only use upper case characters, individual words must be separated with an underscore.\n\n## File names\n\n### Page files, data files and hook files\n\n**camelCase** Starts with a lower case character, every following individual word start with an\nupper case character, no underscores, no dashes.\n\n### Component files\n\n**PascalCase** Every individual word start with an upper case character, no underscores, no dashes.\n\n## Coding\n\n### Functions\n\nDeconstruct props in the function parameters rather than inside the function body\n\n```ts\ninterface IProps {\n  propOne: string\n  propTwo: string\n}\n\nconst Component = ({ propOne, propTwo }: IProps) => { ... }\n\n// rather than\n\nconst Component = (props: IProps) => {\n  const { propOne, propTwo } = props\n  ... \n}\n```\n\nNamed export rather than default export\n\n```ts\nexport const Component = () => { ... }\n\n// rather than\n\nconst Component = () => { ... }\n\nexport default Component\n```\n### CSS\n\nWhen in need to use a colour, use the defined variable from the `globals.ccs` file rather than adding hex codes.\n\n```css\n.class {\n\tcolor: var(--text);\n}\n\n/* rather than */\n\n.class {\n\tcolor: #272727;\n}\n```\n\n\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing to Accessible Web Dev\n\n## Languages\n\nThis project is built with Next.JS, Typescript and CSS modules.\n\n## Pre-requisites (these need to be installed on your machine)\n\n[Node.js](https://nodejs.org/en/)\n\n## Available packages\n\nIcons - [React Icons Documentation]( https://react-icons.github.io/react-icons)  \nCode Snippets - [React Syntax Highlighter Documentation](https://github.com/react-syntax-highlighter/react-syntax-highlighter)  \nTranslations - [next-i18next Documentation](https://next.i18next.com/)  \n\n## How to contribute\n\n1. 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.\n2. Please check the [coding standards](https://github.com/AccessibleForAll/AccessibleWebDev/blob/main/CODING_STANDARDS.md) page before start contributing.\n3. [Fork](https://github.com/AccessibleForAll/AccessibleWebDev/fork) the project\n4. Clone the project:\n\n    ```bash\n    git clone https://github.com/<your-github-username>/AccessibleWebDev\n    ```\n\n5. Navigate to the project directory:\n\n    ```bash\n    cd AccessibleWebDev\n    ```\n\n6. Set the upstream repository:\n\n    ```bash\n    git remote add upstream https://github.com/AccessibleForAll/AccessibleWebDev.git\n    ```\n\n7. Install dependencies:\n\n    ```bash\n    npm install\n    ```\n\n8. Create a new branch:\n\n    ```bash\n    git checkout -b <YourBranchName>\n    ```\n\n9. To run the whole project locally:\n\n    ```bash\n    npm run dev\n    ```\n\n10. Make your changes\n11. Stage your changes:\n\n    ```bash\n    git add <NameOfFileChanged>\n    ```\n\n12. Commit your changes and provide a meaningful commit message:\n\n    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.)\n\n    ```bash\n    git commit -m \"<Your commit message here>\"\n    ```\n\n13. Push your commits to your local repository\n\n    ```bash\n    git push origin <YourBranchName>\n    ```\n\n14. 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)\n15. Wait for maintainers to review your pull request and suggest any changes\n\n**Congratulations!** You made a contribution to the Accessible For All Community!\n\n## Questions?\n\nIf at any time you need help with contributing, please reach out to the [maintainers](https://github.com/AccessibleForAll/Support/blob/main/README.md#our-maintainers)\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2022 Accessible For All\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "\n# [Accessible Web Dev](https://accessibleweb.dev/) 🌐  \n\nWelcome to **Accessible Web Dev**, a resource designed to help web developers learn the fundamentals of accessibility in a practical, easy-to-understand way. This site is an **entry point** into the world of accessibility, complementing current standards by breaking down complex concepts. While it doesn't replace existing standards like the [WCAG standards](https://www.w3.org/WAI/standards-guidelines/wcag/), it offers a beginner-friendly pathway into accessibility for developers of all experience levels.\n\n![Screenshot of Accessible Web Dev homepage showing a clean, accessible interface with key topics and resources.](/public/images/websiteScreenshot.png)\n\n---\n\n## 🚀 Features  \n\n- **Beginner-Friendly Content**: Step-by-step guides to start your accessibility journey.  \n- **Practical Examples**: Real-world implementations of accessibility best practices.  \n- **Resources & Tools**: Discover accessibility checkers, ARIA guides, and more.  \n- **Community-Driven**: Contributions from developers worldwide to keep the content relevant and up-to-date.  \n\n---\n\n## 🤝 How to Contribute  \n\nWe welcome and encourage contributions! There are multiple ways to help improve this project:  \n\n1. **Report Bugs:**  \n   If you encounter a bug, please raise a [Bug Report](https://github.com/AccessibleForAll/AccessibleWebDev/issues/new?assignees=&labels=&template=bug_report.md&title=).  \n\n2. **Request New Features:**  \n   Have ideas for new features? Submit an [Issue](https://github.com/AccessibleForAll/AccessibleWebDev/issues/new?assignees=&labels=&template=feature_request.md&title=).  \n\n3. **Contribute Code, Documentation, or Design:**  \n   We are always looking to improve! Please follow our [Contributing Guidelines](https://github.com/AccessibleForAll/AccessibleWebDev/blob/main/CONTRIBUTING.md) to submit code, translations, or design updates.  \n\n4. **Spread the Word:**  \n   Share the project with your peers to help promote accessibility across the web.  \n\n---\n\n## 📄 License  \n\nAccessible Web Dev is licensed under the **MIT License**. See the full [License](https://github.com/AccessibleForAll/AccessibleWebDev/blob/main/LICENSE) for more details.\n"
  },
  {
    "path": "components/CodeBlock/CodeBlock.module.css",
    "content": ".CodeBlockContainer {\n\tposition: relative;\n\twidth: 90vw;\n\tmax-width: 850px;\n\tborder: 1px solid var(--primaryLt);\n\tborder-radius: 8px;\n\tbackground-color: var(--primaryLt);\n\tpadding: 40px 8px 2px 8px;\n\tmargin: 16px 0;\n}\n\n.CodeBlock {\n\toverflow-x: auto;\n}\n\n\n\n.codeLanguage {\n\tbackground-color: var(--dark);\n\tpadding: 8px;\n\tcolor: var(--white);\n\tposition: absolute;\n\ttop: 10px;\n\tleft: 8px;\n\tright: 8px;\n\tborder-bottom: 1px solid var(--primaryLt);\n}\n\n@media only screen and (min-width: 800px) {\n\t.CodeBlockContainer {\n\t\twidth: 61vw;\n\t}\n}\n\n@media only screen and (min-width: 1000px) {\n\t.CodeBlockContainer {\n\t\twidth: 70vw;\n\t}\n}\n\n"
  },
  {
    "path": "components/CodeBlock/CodeBlock.tsx",
    "content": "import { useEffect, useRef, useState } from \"react\"\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\"\nimport { nightOwl } from \"react-syntax-highlighter/dist/cjs/styles/prism\"\nimport CopyCodeBlock from \"../CopyCodeBlock/CopyCodeBlock\"\nimport styles from \"./CodeBlock.module.css\"\n\ntype TCodeLanguage =\n\t| \"html\"\n\t| \"css\"\n\t| \"javascript\"\n\t| \"jsx\"\n\t| \"typescript\"\n\t| \"tsx\"\ninterface ICodeBlockProps {\n\tcodeSnippet: string\n\tlanguageType: TCodeLanguage\n}\n\nexport const CodeBlock = ({ codeSnippet, languageType }: ICodeBlockProps) => {\n\tconst [scrollableRegion, setScrollableRegion] = useState(false)\n\n\tconst ref = useRef<HTMLPreElement>(null)\n\tconst PreWithRef = (preProps: React.HTMLAttributes<HTMLPreElement>) => (\n\t\t<pre {...preProps} ref={ref} />\n\t)\n\n\tuseEffect(() => {\n\t\tif (ref.current) {\n\t\t\tconst element = ref.current\n\t\t\tsetScrollableRegion(element.clientWidth < element.scrollWidth)\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className={styles.CodeBlockContainer}>\n\t\t\t<div className={styles.codeLanguage}>{languageType}</div>\n\t\t\t<CopyCodeBlock code={codeSnippet} />\n\t\t\t<SyntaxHighlighter\n\t\t\t\tlanguage={languageType}\n\t\t\t\tstyle={nightOwl}\n\t\t\t\tclassName={styles.CodeBlock}\n\t\t\t\tPreTag={PreWithRef}\n\t\t\t\ttabIndex={scrollableRegion ? 0 : -1}>\n\t\t\t\t{codeSnippet}\n\t\t\t</SyntaxHighlighter>\n\t\t</div>\n\t)\n}\n"
  },
  {
    "path": "components/ContentTemplates/AlertsTemplate.tsx",
    "content": "import { WorkInProgress } from \"../WorkInProgress/WorkInProgress\"\n\nexport const AlertsTemplate = () => {\n\treturn <WorkInProgress />\n}\n"
  },
  {
    "path": "components/ContentTemplates/AnimationsTemplate.tsx",
    "content": "import { WorkInProgress } from \"../WorkInProgress/WorkInProgress\"\n\nexport const AnimationsTemplate = () => {\n\treturn <WorkInProgress />\n}\n"
  },
  {
    "path": "components/ContentTemplates/AudioTemplate.tsx",
    "content": "import { CodeBlock } from \"../CodeBlock/CodeBlock\"\nimport { NavPage } from \"../NavPage/NavPage\"\nimport { PageUpdated } from \"../PageUpdated/PageUpdated\"\nimport { TemplateSection } from \"../TemplateSection/TemplateSection\"\nimport { audioPageNavigation } from \"../../data/pageNavigationLists\"\n\nexport const AudioTemplate = () => {\n\treturn (\n\t\t<>\n\t\t\t<NavPage pageNavigation={audioPageNavigation} />\n\t\t\t<TemplateSection sectionName=\"introduction\" title=\"Introduction\">\n\t\t\t\t<p>\n\t\t\t\t\tAny form of audio on a website, whether prerecorded or live, audio\n\t\t\t\t\tonly or as part of a video or animation, should be provided in an\n\t\t\t\t\talternative form so that it can be perceived by people that can't\n\t\t\t\t\taccess the audio. Such alternatives include transcripts, captions and\n\t\t\t\t\tsign language.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName={\"transcripts\"} title={\"Transcripts\"}>\n\t\t\t\t<p>\n\t\t\t\t\tAn audio transcript is a text version of the audio in a prerecorded\n\t\t\t\t\taudio or video file. It should be located close to the audio or video\n\t\t\t\t\tfile so that it is easy to find for anyone that wishes to read it. As\n\t\t\t\t\ta transcript can be long, it is adequate to provide a link to the\n\t\t\t\t\ttranscript in close proximity to the audio or video file.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tTranscripts should identify who is speaking and include any relevant\n\t\t\t\t\tbackground sounds. Full verbatim transcripts include every sound, even\n\t\t\t\t\tums and ahs, that occured in the original audio. Clean verbatim\n\t\t\t\t\ttranscripts remove these extra sounds whilst leaving the rest of the\n\t\t\t\t\taudio as is. Nothing is paraphrased or summarised. They should include\n\t\t\t\t\tinformation about who is speaking and time stamps can also be useful,\n\t\t\t\t\talthough not required, especially if the transcript is for a video.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tAn added benefit of transcripts is that they can be more easily\n\t\t\t\t\ttranslated into other languages. This makes the audio content\n\t\t\t\t\tavailable to a wider range of people.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName={\"captions\"} title={\"Captions\"}>\n\t\t\t\t<p>\n\t\t\t\t\tCaptions are a text version of audio displayed alongside video inside\n\t\t\t\t\tthe media player. They should include all forms of audio such as\n\t\t\t\t\tdialogue, background music, sound effects and anything else relevant\n\t\t\t\t\tto the person watching. If the video is prerecorded the captions\n\t\t\t\t\tshould be synced with the audio. If the video is live there can\n\t\t\t\t\tsometimes be a short delay as the captions are being added in real\n\t\t\t\t\ttime by professional real-time captioners. Most online video services\n\t\t\t\t\toffer the ability to upload caption files alongside the video. It is\n\t\t\t\t\timportant to choose a video upload service with these capabilities.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tThere are two types of captions: Open Captions and Closed Captions.\n\t\t\t\t</p>\n\t\t\t\t<h3>Open Captions</h3>\n\t\t\t\t<p>\n\t\t\t\t\tOpen captions are captions that are burned into the video track. They\n\t\t\t\t\tare always visible when the video is playing and there is no way to\n\t\t\t\t\tadjust the font size or style of the captions. They do however provide\n\t\t\t\t\ta consistent experience for everyone.\n\t\t\t\t</p>\n\t\t\t\t<h3>Closed Captions</h3>\n\t\t\t\t<p>\n\t\t\t\t\tClosed captions are provided on a separate audio track which means\n\t\t\t\t\tthey can be switched on and off by the user. Often the user will also\n\t\t\t\t\thave some control over the size and style of the captions so they can\n\t\t\t\t\tbe adjusted to suit their personal needs. However, closed caption\n\t\t\t\t\tsupport may differ between different media players. The closed\n\t\t\t\t\tcaptions should be easy to access. Ideally, the button to turn them on\n\t\t\t\t\tand off is at the same level as the play/pause button in the media\n\t\t\t\t\tplayer.\n\t\t\t\t</p>\n\t\t\t\t<h3>Auto-generated captions</h3>\n\t\t\t\t<p>\n\t\t\t\t\tWhen using captions within video-conferencing tools or for live events\n\t\t\t\t\tthen auto-generated captions can provide some help. They are generally\n\t\t\t\t\tsaid to be around 80% accurate. However, this still means that 20% of\n\t\t\t\t\tinformation is lost. Auto-generated captions also become less accurate\n\t\t\t\t\tfor people with accents and often are only available for English.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tAuto-generated captions are better than nothing but they are not\n\t\t\t\t\tsufficient to be WCAG compliant. If you have the possibility to\n\t\t\t\t\tprovide real time captioning, or even sign language, for live events\n\t\t\t\t\tthen that should be the preference. Auto-generated captions should\n\t\t\t\t\talso be edited if a recording of the live event is being uploaded to a\n\t\t\t\t\tvideo-sharing platform afterwards.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName=\"howToAdd\"\n\t\t\t\ttitle=\"How To Add Closed Captions To Your Audio?\">\n\t\t\t\t<p>\n\t\t\t\t\tWhether you are adding an introductory video about yourself on\n\t\t\t\t\twebsites or embedding an audio clip of your favorite song to a game\n\t\t\t\t\tyou're building, it's important to add closed captions to them. This\n\t\t\t\t\twill ensure that users who need captions have an easier viewing\n\t\t\t\t\texperience.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIf using the video element within HTML you can specify a captions\n\t\t\t\t\ttrack by linking to a vtt file and specifying that the kind is\n\t\t\t\t\tcaptions. Multiple caption tracks in different languages can be added\n\t\t\t\t\tif necessary.\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tlanguageType=\"html\"\n\t\t\t\t\tcodeSnippet={`<video controls width=\"200\">\n  <source src=\"video.mp4\" type=\"video/mp4\" />\n  <track\n    default\n    kind=\"captions\"\n    src=\"https://youtube.com/captions.vtt\"\n    srclang=\"en\"\n  />\n</video>\n`}\n\t\t\t\t/>\n\t\t\t\t<p>\n\t\t\t\t\tVideo upload services such as YouTube and Vimeo allow you to upload\n\t\t\t\t\tcaptions in various file formats including VTT, WebVTT and SRT.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName={\"signLanguage\"} title={\"Sign Language\"}>\n\t\t\t\t<p>\n\t\t\t\t\tThere are over 300 different sign languages used around the world. For\n\t\t\t\t\tmany deaf and hard of hearing people it is their primary method of\n\t\t\t\t\tcommunication and may be easier to understand or be less cognitively\n\t\t\t\t\tdemanding than reading captions or transcripts.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tSign language is more often used for live events as information can be\n\t\t\t\t\tconveyed more quickly than using live captions. Important information\n\t\t\t\t\ton a website could also be conveyed by embedding videos of the\n\t\t\t\t\tinformation being signed.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName={\"accessibleMediaPlayers\"}\n\t\t\t\ttitle={\"Accessible Media Players\"}>\n\t\t\t\t<p>\n\t\t\t\t\tThe audio and video media players included in the HTML specification\n\t\t\t\t\tare very basic and will require some work to make them accessible.\n\t\t\t\t\tMany video upload/sharing services exist where work is well underway\n\t\t\t\t\tto provide an accessible experience for users so it is often\n\t\t\t\t\tbeneficial to use such a service instead and embed the media player\n\t\t\t\t\tinto your site. However, it's always important to check any third\n\t\t\t\t\tparty tool you choose to use to make sure it is accessible.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tThe key things to check when looking for a media player are that it is\n\t\t\t\t\tkeyboard accessible and doesn't trap keyboard focus. It should also\n\t\t\t\t\thave the ability to add captions and the captions should be easy to\n\t\t\t\t\tfind and operate with assistive technology.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName={\"WCAGCriteria\"} title={\"WCAG Criteria\"}>\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#audio-only-and-video-only-prerecorded\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.2.1 Audio-only and Video-only (prerecorded)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#captions-prerecorded\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.2.2 Captions (prerecorded)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#audio-description-or-media-alternative-prerecorded\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.2.3 Audio Description or Media Alternative (prerecorded)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#captions-live\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.2.4 Captions (live)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#audio-description-prerecorded\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.2.5 Audio Description (prerecorded)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#sign-language-prerecorded\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.2.6 Sign Language (prerecorded)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#media-alternative-prerecorded\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.2.8 Media Alternative (prerecorded)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#audio-only-live\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.2.9 Audio-only (live)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#sensory-characteristics\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.3.3 Sensory characteristics\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#audio-control\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.4.2 Audio Control\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#low-or-no-background-audio\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.4.7 Low or No Background Audio\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName={\"resources\"} title={\"Resources\"}>\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/WAI/media/av/\" className=\"blockLink\">\n\t\t\t\t\t\t\tWAI Making Audio and Video Media Accessible\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<PageUpdated date=\"7th October 2023\" />\n\t\t</>\n\t)\n}\n"
  },
  {
    "path": "components/ContentTemplates/BreadcrumbsTemplate.module.css",
    "content": ".breadcrumbsExample {\n  background-color: var(--highlight);\n}\n\n.breadcrumbsExample ol {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 1rem;\n  display: flex;\n  gap: 0.5rem;\n}\n\n.breadcrumbsExample ol li {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.breadcrumbsExample p { \n  margin: 0;\n}"
  },
  {
    "path": "components/ContentTemplates/BreadcrumbsTemplate.tsx",
    "content": "import { breadcrumbsPageNavigation } from \"../../data/pageNavigationLists\"\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\"\nimport { NavPage } from \"../NavPage/NavPage\"\nimport { PageUpdated } from \"../PageUpdated/PageUpdated\"\nimport { TemplateSection } from \"../TemplateSection/TemplateSection\"\nimport styles from \"./BreadcrumbsTemplate.module.css\"\n\nexport const BreadcrumbsTemplate = () => {\n\treturn (\n\t\t<>\n\t\t\t<NavPage pageNavigation={breadcrumbsPageNavigation} />\n\t\t\t<TemplateSection sectionName=\"introduction\" title=\"Introduction\">\n\t\t\t\t<p>\n\t\t\t\t\tBreadcrumbs are a type of navigation, designed to make it easy to see\n\t\t\t\t\twhere you are within the structure of a website and easily navigate to\n\t\t\t\t\tdifferent areas. The name refers to the story of Hansel and Gretel who\n\t\t\t\t\tleft a trail of breadcrumbs in the hope to find their way back out of\n\t\t\t\t\tthe forest. They are most useful when content is nested several layers\n\t\t\t\t\tdeep.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tBreadcrumbs are most often found at the top of a page and should be\n\t\t\t\t\tplaced just before the main content. There is no semantic HTML element\n\t\t\t\t\tfor breadcrumbs but it can be made from a combination of semantic HTML\n\t\t\t\t\telements plus a small amount of ARIA.\n\t\t\t\t</p>\n\n\t\t\t\t<nav\n\t\t\t\t\taria-label=\"Breadcrumbs (example only)\"\n\t\t\t\t\tclassName={styles.breadcrumbsExample}>\n\t\t\t\t\t<ol>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a href=\"#\">Website root</a>\n\t\t\t\t\t\t\t<p aria-hidden=\"true\">{\">\"}</p>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a href=\"#\">Website level 1</a>\n\t\t\t\t\t\t\t<p aria-hidden=\"true\">{\">\"}</p>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a href=\"#\" aria-current=\"page\">\n\t\t\t\t\t\t\t\tWebsite level 2\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ol>\n\t\t\t\t</nav>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"htmlStructure\" title=\"HTML Structure\">\n\t\t\t\t<p>\n\t\t\t\t\tAlthough there is not one HTML element that can be used to make\n\t\t\t\t\tbreadcrumbs, there are a few elements available that, when used\n\t\t\t\t\ttogether, offer the semantics needed to make accessible breadcrumbs.\n\t\t\t\t</p>\n\t\t\t\t<p>What is needed:</p>\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\tA nav element will let users know that this is a navigation\n\t\t\t\t\t\tlandmark. Landmarks make things easier to find, especially for\n\t\t\t\t\t\tscreen reader users.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tAn ordered list will let users know that the order of the items is\n\t\t\t\t\t\timportant.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tLinks within the list will let users know that they can click to\n\t\t\t\t\t\tnavigate to that area of the website.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tSince the last element in a breadcrumb trail should represent the\n\t\t\t\t\t\tcurrent page, making it a link is optional.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName=\"aria\"\n\t\t\t\ttitle=\"Add Extra Information with ARIA\">\n\t\t\t\t<p>\n\t\t\t\t\tARIA is used to add extra semantic information where HTML is not\n\t\t\t\t\tenough. In this case, there is probably another navigation present on\n\t\t\t\t\tthe page. Therefore we will need to distinguish the breadcrumb\n\t\t\t\t\tnavigation from any other navigation with an aria-label.\n\t\t\t\t</p>\n\n\t\t\t\t<p>\n\t\t\t\t\tIf the last link in the breadcrumb trail is the current page, we can\n\t\t\t\t\talso use aria-current on that link to specify that it is the currently\n\t\t\t\t\tactive page. If the last element is not a link then aria-current is\n\t\t\t\t\toptional.\n\t\t\t\t</p>\n\n\t\t\t\t<p>Aria-hidden can be used to hide any dividers between links.</p>\n\t\t\t</TemplateSection>\n\n\t\t\t<TemplateSection\n\t\t\t\tsectionName=\"breadcrumbsExample\"\n\t\t\t\ttitle=\"Breadcrumbs Example\">\n\t\t\t\t<CodeBlock\n\t\t\t\t\tlanguageType=\"html\"\n\t\t\t\t\tcodeSnippet={`<nav aria-label=\"Breadcrumbs\" class=\"breadcrumbs\">\n\t<ol>\n\t\t<li>\n\t\t\t<a href=\"#\">Website root</a>\n\t\t\t<p aria-hidden=\"true\">></p>\n\t\t</li>\n\t\t<li>\n\t\t\t<a href=\"#\">Website level 1</a>\n\t\t\t<p aria-hidden=\"true\">></p>\n\t\t</li>\n\t\t<li>\n\t\t\t<a href=\"#\" aria-current=\"page\">Website level 2</a>\n\t\t</li>\n\t</ol>\n</nav>`}\n\t\t\t\t/>\n\t\t\t</TemplateSection>\n\n\t\t\t<TemplateSection\n\t\t\t\tsectionName=\"breadcrumbStyling\"\n\t\t\t\ttitle=\"Styling Breadcrumbs\">\n\t\t\t\t<p>\n\t\t\t\t\tUsing an ordered list element within breadcrumbs causes each list item\n\t\t\t\t\tto be numbered. This styling can be removed with CSS and flexbox can\n\t\t\t\t\tbe used to make list items sit side by side. CSS can also be used to\n\t\t\t\t\tcreate dividers between each link, or the divider can be added within\n\t\t\t\t\tthe HTML and hidden with aria-hidden (as in the previous example).\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`.breadcrumbs ol {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 1rem;\n\tdisplay: flex;\n\tgap: 0.5rem;\n}`}\n\t\t\t\t\tlanguageType=\"css\"\n\t\t\t\t/>\n\t\t\t\t<p>\n\t\t\t\t\tBe aware that removing list styles from lists can cause the screen\n\t\t\t\t\treader VoiceOver on Mac to stop announcing items as a list. If this\n\t\t\t\t\thappens, add role=\"list\" to the ol element.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"WCAGCriteria\" title=\"WCAG Criteria\">\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#info-and-relationships\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.3.1 Info and Relationships\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#identify-purpose\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.3.6 Identify Purpose\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#keyboard\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.1.1 Keyboard\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#focus-order\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.3 Focus Order\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#link-purpose-in-context\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.4 Link Purpose\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#multiple-ways\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.5 Multiple Ways\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#focus-visible\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.7 Focus Visible\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#location\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.8 Location\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#target-size\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.5.5 Target Size\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#on-focus\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t3.2.1 On Focus\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#consistent-navigation\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t3.2.3 Consistent Navigation\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"otherResources\" title=\"Other Resources\">\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\tARIA Authoring Practices Guide Breadcrumb Example\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://design-system.service.gov.uk/components/breadcrumbs/\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\tGov.uk Design System - Breadcrumbs\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<PageUpdated date=\"10th April 2023\" />\n\t\t</>\n\t)\n}\n"
  },
  {
    "path": "components/ContentTemplates/ButtonsTemplate.module.css",
    "content": ".exampleButton {\n\tpadding: 0.6rem 1.2rem;\t\n\tcursor: pointer;\n\tbackground-color: var(--primaryLt);\n  color: var(--text);\n  font-size: 0.9rem;\n  font-family: inherit;\n\tborder: 1px solid var(--dark);\n\tborder-radius: 5px;\n\tdisplay: inline-block;\n\tmargin: 0.5rem 0;\n}\n\n.exampleButton span {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: inherit;\n}\n\n.exampleButton:hover, .exampleButton:focus {\n\tbackground-color: var(--primary);\n\tcolor: var(--invertText)\n}\n\n.exampleHover {\n\tpadding: 0.6rem 1.2rem;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n\tcursor: pointer;\n\tbackground-color: var(--primary);\n\tcolor:var(--invertText);\n  font-size: 0.9rem;\n  font-family: inherit;\n\tborder: 1px solid var(--dark);\n\tborder-radius: 5px;\n\tdisplay: inline-block;\n\tmargin: 0.5rem 0;\n}\n\n.exampleFocus {\n\tpadding: 0.6rem 1.2rem;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n\tcursor: pointer;\n\tbackground-color: var(--primary);\n\tcolor:var(--invertText);\n  font-size: 0.9rem;\n  font-family: inherit;\n\tborder: 1px solid var(--dark);\n\tborder-radius: 5px;\n\tdisplay: inline-block;\n\toutline: 2px transparent solid;\n\tbox-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;\n\tmargin: 0.5rem 0;\n}\n\n.exampleActive {\n\tposition: relative;\n\ttop: 2px;\n\tleft: 1px;\n\tpadding: 0.6rem 1.2rem;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n\tcursor: pointer;\n\tbackground-color: var(--primary);\n\tcolor:var(--invertText);\n  font-size: 0.9rem;\n  font-family: inherit;\n\tborder: 2px inset var(--primaryLt);\n\tborder-radius: 5px;\n\tdisplay: inline-block;\n\t\n\tmargin: 0.5rem 0;\n}\n\n.exampleDisabled {\n\tpadding: 0.6rem 1.2rem;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n\tcursor: not-allowed;\n\tbackground-color: var(--primaryLt);\n  font-size: 0.9rem;\n  font-family: inherit;\n\tborder: 1px solid var(--dark);\n\tborder-radius: 5px;\n\tdisplay: inline-block;\n\tmargin: 0.5rem 0;\n}"
  },
  {
    "path": "components/ContentTemplates/ButtonsTemplate.tsx",
    "content": "import { TemplateSection } from \"../TemplateSection/TemplateSection\"\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\"\nimport { FaSave } from \"react-icons/fa\"\nimport { NavPage } from \"../NavPage/NavPage\"\nimport { buttonPageNavigation } from \"../../data/pageNavigationLists\"\nimport { PageUpdated } from \"../PageUpdated/PageUpdated\"\nimport styles from \"./ButtonsTemplate.module.css\"\n\nexport const ButtonsTemplate = () => {\n\tconst handleTextButton = () => {\n\t\talert(\"This is a Text button\")\n\t}\n\n\tconst handleAddToBasketButton = () => {\n\t\talert(\"This is an example Add to Basket button\")\n\t}\n\n\tconst handleTextAndIconButton = () => {\n\t\talert(\"This is an example Text and Icon button\")\n\t}\n\treturn (\n\t\t<>\n\t\t\t<NavPage pageNavigation={buttonPageNavigation} />\n\t\t\t<TemplateSection sectionName=\"introduction\" title=\"Introduction\">\n\t\t\t\t<p>\n\t\t\t\t\tButtons are interactive elements that perform an action when pressed.\n\t\t\t\t\tThat action could be something like submitting a form or opening a\n\t\t\t\t\tmenu.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tButtons have their own semantic HTML element which comes with lots of\n\t\t\t\t\tinbuilt functionality. Using an HTML button means it can be reached by\n\t\t\t\t\tthe tab key and activated with both a mouse and a keyboard\n\t\t\t\t\tautomatically just by adding an onclick event. Using the semantic\n\t\t\t\t\tbutton element will save you lots of time.\n\t\t\t\t</p>\n\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button type=\"submit\" onclick=\"handleClick()\"></button>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<p>\n\t\t\t\t\tIf another element is used to create a button instead, such as a div,\n\t\t\t\t\tthen functionality must be added to make the div behave exactly like a\n\t\t\t\t\tbutton. Adding the onclick event will not automatically make the\n\t\t\t\t\telement keyboard interactive. It also needs to:\n\t\t\t\t</p>\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>Activate when a user presses the enter key</li>\n\t\t\t\t\t<li>Activate when a user presses the space key</li>\n\t\t\t\t\t<li>Be included in the tab sequence</li>\n\t\t\t\t\t<li>Be given the explicit role of button</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"textButtons\" title=\"Text Buttons\">\n\t\t\t\t<p>A text button is a button which has only text inside it.</p>\n\t\t\t\t<button className={styles.exampleButton} onClick={handleTextButton}>\n\t\t\t\t\tText here\n\t\t\t\t</button>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button type=\"button\" onclick=\"handleClick()\">Text here</button>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<p>\n\t\t\t\t\tIt gets its accessible name from the text between the opening and\n\t\t\t\t\tclosing button tags. If your text clearly explains the button's\n\t\t\t\t\tpurpose then this is an accessible button. However, if you have\n\t\t\t\t\tseveral text buttons with the same text you may need to do more to\n\t\t\t\t\tmake them accessible.\n\t\t\t\t</p>\n\t\t\t\t<h3>Buttons with identical text</h3>\n\t\t\t\t<p>\n\t\t\t\t\tLet's say we have multiple products on a page, each with an \"Add to\n\t\t\t\t\tbasket\" button. How do we help screen reader users and speech\n\t\t\t\t\tdictation users differentiate between the different buttons?\n\t\t\t\t</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tProduct 1{\" \"}\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName={styles.exampleButton}\n\t\t\t\t\t\t\tonClick={handleAddToBasketButton}>\n\t\t\t\t\t\t\tAdd to basket\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tProduct 2{\" \"}\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName={styles.exampleButton}\n\t\t\t\t\t\t\tonClick={handleAddToBasketButton}>\n\t\t\t\t\t\t\tAdd to basket\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tProduct 3{\" \"}\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName={styles.exampleButton}\n\t\t\t\t\t\t\tonClick={handleAddToBasketButton}>\n\t\t\t\t\t\t\tAdd to basket\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tProduct 4{\" \"}\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName={styles.exampleButton}\n\t\t\t\t\t\t\tonClick={handleAddToBasketButton}>\n\t\t\t\t\t\t\tAdd to basket\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tProduct 5{\" \"}\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName={styles.exampleButton}\n\t\t\t\t\t\t\tonClick={handleAddToBasketButton}>\n\t\t\t\t\t\t\tAdd to basket\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<p>We could use CSS to visibly hide some extra text:</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`.visibly-hidden {\n\tclip: rect(0 0 0 0); \n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap; \n\twidth: 1px;\n}`}\n\t\t\t\t\tlanguageType={\"css\"}\n\t\t\t\t/>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button type=\"button\" onclick=\"handleClick()\">Add to basket\n\t<span class=\"visibly-hidden\">Product 1</span>\n</button>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<p>\n\t\t\t\t\tThis would then read out \"Add to basket product 1\" to screen reader\n\t\t\t\t\tusers.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tHowever, it's important to be careful of word order when using this\n\t\t\t\t\ttechnique. If we had instead inserted the product name in the middle\n\t\t\t\t\tof the sentence, for example: \"Add product 1 to basket\" this can cause\n\t\t\t\t\tproblems for users of speech input software.\n\t\t\t\t</p>\n\t\t\t\t<p>We could also use an aria-label.</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button type=\"button\" onclick=\"handleClick()\" aria-label=\"Add to basket product 1\">Add to basket</button>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<p>\n\t\t\t\t\tAgain, it is important that the start of the aria-label matches with\n\t\t\t\t\tthe visible text on the button to help users of speech input software\n\t\t\t\t\tbe able to activate the button.{\" \"}\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName=\"textAndIconButtons\"\n\t\t\t\ttitle=\"Text and Icon Buttons\">\n\t\t\t\t<p>\n\t\t\t\t\tSome buttons have both text and icons inside. The icon can help\n\t\t\t\t\tcomplement the text and aid understanding. To prevent the accessible\n\t\t\t\t\tname from repetition, eg \"Button, save icon, save\", the icon should be\n\t\t\t\t\tgiven an empty(null) alt attribute or the state aria-hidden=\"true\"\n\t\t\t\t</p>\n\t\t\t\t<button\n\t\t\t\t\tclassName={styles.exampleButton}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={handleTextAndIconButton}>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<FaSave size=\"1rem\" aria-hidden=\"true\" /> Save\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button type=\"button\" onclick=\"handleClick()\">\n<img src=\"icon-url.png\" alt=\"\" />\n\tText\n</button>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button type=\"button\" onclick=\"handleClick()\">\n<img src=\"icon-url.png\" aria-hidden=\"true\" />\n\tText\n</button>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<p>\n\t\t\t\t\tAn empty alt attribute has the most wide-spread support, so that\n\t\t\t\t\tshould be your go to choice when using icons. However, some icon\n\t\t\t\t\tlibraries don't allow an alt attribute to be passed and that's where\n\t\t\t\t\taria-hidden can be useful.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"iconOnlyButtons\" title=\"Icon-only buttons\">\n\t\t\t\t<p>\n\t\t\t\t\tSome buttons use only an icon to convey their function. In this case\n\t\t\t\t\tit's important to choose icons that are widely recognised and\n\t\t\t\t\tunderstood, otherwise it can be difficult to know their function. The\n\t\t\t\t\ticons should also have a suitable label. This can be done with the alt\n\t\t\t\t\tattribute if using images or the aria-label attribute.\n\t\t\t\t</p>\n\t\t\t\t<button\n\t\t\t\t\tclassName={styles.exampleButton}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={handleTextAndIconButton}>\n\t\t\t\t\t<FaSave size=\"1rem\" aria-label=\"Save\" />\n\t\t\t\t</button>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button type=\"button\" onclick=\"handleClick()\">\n\t<img src=\"icon-url.png\" alt=\"Save\" />\n</button>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button type=\"button\" onclick=\"handleClick()\">\n\t<i class=\"fa-solid fa-floppy-disk\" aria-label=\"Save\"></i>\n</button>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<p>\n\t\t\t\t\tMake sure that the label you give the icon matches the function of the\n\t\t\t\t\tbutton, not necessarily describing the actual icon.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<strong>Do this:</strong>\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button type=\"button\" onclick=\"handleClick()\">\n\t<i class=\"fa-solid fa-magnifying-glass\" aria-label=\"Search\"></i>\n</button>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<p>\n\t\t\t\t\t<strong>Don't do this:</strong>\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button type=\"button\" onclick=\"handleClick()\">\n\t<i class=\"fa-solid fa-magnifying-glass\" aria-label=\"Magnifying glass\"></i>\n</button>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"buttonStates\" title=\"Button States\">\n\t\t\t\t<p>\n\t\t\t\t\tButtons can be used to communicate different states. A toggle button\n\t\t\t\t\tcan communicate both an on and off state. Buttons can also have\n\t\t\t\t\tdefault, hover, focus, active and disabled states.\n\t\t\t\t</p>\n\t\t\t\t<h3>Default, hover, focus and active states</h3>\n\t\t\t\t<p>These states can be handled with CSS.</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Default state: </strong>\n\t\t\t\t\t\tThe normal state of a button when it's not being interacted with.\n\t\t\t\t\t\tAny text or icon should have a contrast ratio of 4.5:1 with the\n\t\t\t\t\t\tbutton background color. The button background color should have a\n\t\t\t\t\t\t3:1 contrast ratio with the background.\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName={styles.exampleButton}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={handleTextButton}>\n\t\t\t\t\t\t\t\tDefault\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Hover state: </strong>\n\t\t\t\t\t\tHow the button looks when hovered over with a mouse cursor. This\n\t\t\t\t\t\tstate is not visible on all devices, most notably touch screens.\n\t\t\t\t\t\tIt's not a requirement to have a hover state but if used then normal\n\t\t\t\t\t\tcolor contrast ratios apply.\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName={styles.exampleHover}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={handleTextButton}>\n\t\t\t\t\t\t\t\tHover\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Focus state: </strong>A button in focus should have a focus\n\t\t\t\t\t\tindicator which makes it easy to see where focus is on the screen.\n\t\t\t\t\t\tThis is often a thicker border or outline around the button and\n\t\t\t\t\t\tshould have a contrast ratio of at least 3:1 with both the button\n\t\t\t\t\t\tbackground color and the background behind the button. If the\n\t\t\t\t\t\tbutton's colors change from default they should still meet the\n\t\t\t\t\t\trequired color contrast ratio between text and background.\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName={styles.exampleFocus}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={handleTextButton}>\n\t\t\t\t\t\t\t\tFocus\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Active state: </strong>A button is active in the moment it\n\t\t\t\t\t\tis pressed. It will often look like it's been pressed.\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName={styles.exampleActive}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={handleTextButton}>\n\t\t\t\t\t\t\t\tActive\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<h3>Disabled state</h3>\n\t\t\t\t<p>\n\t\t\t\t\tA disabled button is a button that is not focusable or clickable. It\n\t\t\t\t\thas been given the disabled attribute. The browser styling often greys\n\t\t\t\t\tout the text making the contrast lower than 3:1 which makes disabled\n\t\t\t\t\tbuttons difficult to see for some people. Often they are also not\n\t\t\t\t\tdiscoverable by users of assistive technology. Therefore, it's best to\n\t\t\t\t\tavoid disabled buttons and add in logic that provides error messages\n\t\t\t\t\tinstead if the button is pressed.\n\t\t\t\t</p>\n\t\t\t\t<button\n\t\t\t\t\tclassName={styles.exampleDisabled}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdisabled\n\t\t\t\t\tonClick={handleTextButton}>\n\t\t\t\t\tDisabled button\n\t\t\t\t</button>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button type=\"button\" onclick=\"handleClick()\" disabled>Disabled button</button>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<h3>Toggle buttons - pressed and unpressed states</h3>\n\t\t\t\t<p>\n\t\t\t\t\tYou might have a button that turns something on or off, or only has\n\t\t\t\t\ttwo states. One example of this might be a light/dark mode.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIn this case you need to add the extra information by using the aria\n\t\t\t\t\tattribute aria-pressed which can either be true or false. This can be\n\t\t\t\t\ttoggled with the use of JavaScript. This lets screen reader users know\n\t\t\t\t\tthe state of the button.The button may also dynamically change the\n\t\t\t\t\ttext/icon to visually convey the state too.\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button type=\"button\" onclick=\"handleClick()\" aria-pressed=\"true\">Toggle button</button>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<h3>Menus and popups - expanded and collapsed state</h3>\n\t\t\t\t<p>\n\t\t\t\t\tIf a button is used to open a menu or popup then it should also\n\t\t\t\t\tcommunicate to screen readers whether the popup is shown or not. This\n\t\t\t\t\tis done with the aria-expanded attribute which can take true or false\n\t\t\t\t\tvalues. If the popup is shown then aria-expanded=\"true\". If the popup\n\t\t\t\t\tis not shown then aria-expanded=\"false\" and the screen reader will\n\t\t\t\t\tannounce that the popup is collapsed. The state of aria-expanded can\n\t\t\t\t\tbe controlled with JavaScript.\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button type=\"button\" onclick=\"handleClick()\" aria-expanded=\"true\">Button with popup</button>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"buttonOrLink\" title=\"Button or Link?\">\n\t\t\t\t<p>\n\t\t\t\t\tHow do you know when it's best to use a button and when it's best to\n\t\t\t\t\tuse a link?\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tDon't let CSS dictate which element you use. The styling can always be\n\t\t\t\t\tchanged. A simple rule of thumb is to think about what the element\n\t\t\t\t\tshould do. Buttons are for actions and links are to take you to new\n\t\t\t\t\tplaces.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIs it performing an action like opening a modal, a menu or some other\n\t\t\t\t\tpopup? Is it applying some styling to a page like a bold or italic\n\t\t\t\t\tbutton in a text editor? Is it allowing you to save something or\n\t\t\t\t\tsearch for something? Then you should probably use a button.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIs it taking you to another page or another area of the page? Then it\n\t\t\t\t\tshould probably be a link.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName=\"touchTargetMinimum\"\n\t\t\t\ttitle=\"Touch Target Minimum\">\n\t\t\t\t<p>\n\t\t\t\t\tWhen it comes to creating accessible buttons for your websites and\n\t\t\t\t\tapplications, it's important that they are easy to activate. To\n\t\t\t\t\tachieve this goal, WCAG suggests that buttons have a minimum target\n\t\t\t\t\tsize of at least 24 by 24 CSS pixels. In doing so, users, especially\n\t\t\t\t\tthose who suffer from mobility impairments like hand tremors or are\n\t\t\t\t\tamputees, have an easier time clicking on them.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"WCAGCriteria\" title=\"WCAG Criteria\">\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#non-text-content\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.1.1 Non-text content\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#info-and-relationships\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.3.1 Info and Relationships\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#identify-purpose\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.3.6 Identify Purpose\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#contrast-minimum\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.4.3 Contrast (minimum)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#non-text-contrast\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.4.11 Non-text Contrast\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.4.13 Content on Hover or Focus\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#keyboard\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.1.1 Keyboard\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#focus-visible\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.7 Focus Visible\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#label-in-name\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.5.3 Label in Name\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#target-size-enhanced\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.5.5 Target Size (Enhanced)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#target-size-minimum\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.5.8 Target Size (Minimum)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#on-focus\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t3.2.1 On Focus\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\n\t\t\t<TemplateSection sectionName=\"otherResources\" title=\"Other Resources\">\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://design-system.service.gov.uk/components/button/\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\tGov.uk Design System Button\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://yatil.net/blog/buttons-vs-links\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\tButtons vs. Links by Eric Eggert\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<PageUpdated date=\"18th February 2023\" />\n\t\t</>\n\t)\n}\n"
  },
  {
    "path": "components/ContentTemplates/CaptchasTemplate.tsx",
    "content": "import { captchasPageNavigation } from \"../../data/pageNavigationLists\"\nimport { NavPage } from \"../NavPage/NavPage\"\nimport { PageUpdated } from \"../PageUpdated/PageUpdated\"\nimport { TemplateSection } from \"../TemplateSection/TemplateSection\"\n\nexport const CaptchasTemplate = () => {\n\treturn (\n\t\t<>\n\t\t\t<NavPage pageNavigation={captchasPageNavigation} />\n\t\t\t<TemplateSection sectionName=\"introduction\" title=\"Introduction\">\n\t\t\t\t<p>\n\t\t\t\t\tCAPTCHA stands for Completely Automated Public Turing test to tell\n\t\t\t\t\tComputers and Humans Apart. CAPTCHAs are tests to prove you are human\n\t\t\t\t\tand not a bot, such as picking out objects from a set of images,\n\t\t\t\t\tlistening to a garbled audio or trying to pick out letters and numbers\n\t\t\t\t\tfrom distorted text.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tCAPTCHAs are inherently not accessible by design. They rely on human\n\t\t\t\t\tsenses and cognition which means that people with certain disabilities\n\t\t\t\t\tare unable to complete them.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName={\"captchaIssues\"}\n\t\t\t\ttitle={\"What's the issue with CAPTCHAs?\"}>\n\t\t\t\t<p>\n\t\t\t\t\tThe easiest way to explain the issues with CAPTCHAs is with examples.\n\t\t\t\t</p>\n\t\t\t\t<h3>Visual</h3>\n\t\t\t\t<p>\n\t\t\t\t\tAny CAPTCHA relying on sight, such as picking all the traffic light\n\t\t\t\t\timages, or writing the letters in a distorted text, are not accessible\n\t\t\t\t\tto people who are blind, are deaf-blind, have low vision or have a\n\t\t\t\t\treading disability such as dyslexia.\n\t\t\t\t</p>\n\t\t\t\t<h3>Audio</h3>\n\t\t\t\t<p>\n\t\t\t\t\tAny CAPTCHA relying on audio, such as picking out a word in the middle\n\t\t\t\t\tof a distorted soundtrack, are not accessible to people who are deaf,\n\t\t\t\t\thard of hearing or those who have audio processing disorders.\n\t\t\t\t</p>\n\t\t\t\t<h3>Maths challenge</h3>\n\t\t\t\t<p>\n\t\t\t\t\tAny CAPTCHA that relies on doing calculations, even those considered\n\t\t\t\t\tsimple such as 1 + 2, are not accessible to some people with cognitive\n\t\t\t\t\tdisabilities, learning disabilities or those who have anxiety.\n\t\t\t\t</p>\n\t\t\t\t<h3>Alignment challenges</h3>\n\t\t\t\t<p>\n\t\t\t\t\tAny CAPTCHA relying on aligning two images are not accessible to\n\t\t\t\t\tpeople with vision disabilities or motor disabilities.\n\t\t\t\t</p>\n\t\t\t\t<h3>Click to prove you're not a robot</h3>\n\t\t\t\t<p>\n\t\t\t\t\tEven having a checkbox CAPTCHA can be difficult for some people\n\t\t\t\t\tbecause if they can't click it, sometimes another more complicated\n\t\t\t\t\tCAPTCHA is triggered instead.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName={\"accessibleCAPTCHA\"}\n\t\t\t\ttitle={\"Accessible CAPTCHA\"}>\n\t\t\t\t<p>\n\t\t\t\t\tThe best way to make CAPTCHA accessible is to remove it. Unless you\n\t\t\t\t\thave a large problem with spam then CAPTCHA is probably not needed.\n\t\t\t\t\tYou can try using things like honeypots for form submission. These are\n\t\t\t\t\thidden form fields that only bots can find. Or consider two factor\n\t\t\t\t\tauthentication for creating accounts and logging into services.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIf you must use CAPTCHA then you must provide multiple ways for people\n\t\t\t\t\tto attempt the CAPTCHA. This means that if people can't fill in a\n\t\t\t\t\tvisual CAPTCHA due to a disability, they can attempt an audio CAPTCHA\n\t\t\t\t\tinstead.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tEven having two types of CAPTCHA does not make your site accessible\n\t\t\t\t\tfor everyone. If using CAPTCHA is the only way to get to a certain\n\t\t\t\t\tpart of a website or perform a specific action, then you also need to\n\t\t\t\t\tprovide a way for people who can't get past the CAPTCHAs to get help.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"WCAGCriteria\" title=\"WCAG Criteria\">\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#non-text-content\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.1.1 Non-text content\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName={\"otherResources\"} title={\"Other Resources\"}>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/turingtest/\" className=\"blockLink\">\n\t\t\t\t\t\t\tThe inaccessibility of CAPTCHAS\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<PageUpdated date=\"28th June 2024\" />\n\t\t</>\n\t)\n}\n"
  },
  {
    "path": "components/ContentTemplates/ChartsTemplate.tsx",
    "content": "import { WorkInProgress } from \"../WorkInProgress/WorkInProgress\"\n\nexport const ChartsTemplate = () => {\n\treturn <WorkInProgress />\n}\n"
  },
  {
    "path": "components/ContentTemplates/FormsTemplate.tsx",
    "content": "import { formsPageNavigation } from \"../../data/pageNavigationLists\"\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\"\nimport { NavPage } from \"../NavPage/NavPage\"\nimport { PageUpdated } from \"../PageUpdated/PageUpdated\"\nimport { TemplateSection } from \"../TemplateSection/TemplateSection\"\n\nexport const FormsTemplate = () => {\n\treturn (\n\t\t<>\n\t\t\t<NavPage pageNavigation={formsPageNavigation} />\n\t\t\t<TemplateSection sectionName=\"introduction\" title=\"Introduction\">\n\t\t\t\t<p>\n\t\t\t\t\tThe web is filled with all types of digital forms. Digital forms are\n\t\t\t\t\tused to collect user information in an organized way. Whether\n\t\t\t\t\tinputting personal health information, completing a simple quiz, or\n\t\t\t\t\tplacing an order for a local restaurant, forms are there to capture\n\t\t\t\t\tdata.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tExamples of digital form elements include radio dial buttons, editable\n\t\t\t\t\ttext fields, drop-down select elements, and text areas. When a form is\n\t\t\t\t\tnot accessible, barriers are created that prevent the accurate input\n\t\t\t\t\tof data. Users may encounter difficulty using a keyboard to move\n\t\t\t\t\tthrough the forms, or they may miss information needed to complete\n\t\t\t\t\tdata input accurately.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tAdditionally, assistive technology such as screen readers may not be\n\t\t\t\t\table to read the forms properly. It is imperative that users are able\n\t\t\t\t\tto interact with, understand, and complete forms on web pages with\n\t\t\t\t\taccuracy and without frustration.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName=\"whatToConsider\"\n\t\t\t\ttitle=\"What Should We Consider When Building Accessible Forms?\">\n\t\t\t\t<p>\n\t\t\t\t\tThere are some key considerations when it comes to building forms.\n\t\t\t\t</p>\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\tForms should be simple, understandable and have clear labels and\n\t\t\t\t\t\tinstructions on how to input data.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tForms must be keyboard operable. Users should be able to use the tab\n\t\t\t\t\t\tkey to navigate through all form controls.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tForms must be programmatically labelled to match the form control.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tForms should provide validation and error notifications that do not\n\t\t\t\t\t\trely on just one sensory characteristic to alert users.\n\t\t\t\t\t</li>\n\n\t\t\t\t\t<li>\n\t\t\t\t\t\tAny time limits are communicated up front, and users are able to\n\t\t\t\t\t\textend time limits if necessary.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName=\"creatingForms\"\n\t\t\t\ttitle=\"Creating Simple, Understandable Forms\">\n\t\t\t\t<p>\n\t\t\t\t\tUsers should be able to understand what the form is asking for and how\n\t\t\t\t\tto enter the data into these fields. A form should be demarcated with\n\t\t\t\t\tthe &lt;form&gt; element. Inside the form element, there should be\n\t\t\t\t\tclearly identified sections and inputs with labels that ask for\n\t\t\t\t\tinformation in the required format.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tProvide simple instructions for filling out the form, including any\n\t\t\t\t\trequired formatting guidelines. For example, if putting in a phone\n\t\t\t\t\tnumber or security number, the visual label before the text field\n\t\t\t\t\tshould be:{\" \"}\n\t\t\t\t</p>\n\t\t\t\t<p>Phone number (XXX-XXX-XXXX): [text field]</p>\n\t\t\t\t<p>\n\t\t\t\t\tThis is better than just having “Phone number” as the visual label, as\n\t\t\t\t\tit explicitly lets the user know the expected number format without\n\t\t\t\t\thaving to guess.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tAdditionally, forms should have good visual contrast between the text\n\t\t\t\t\tand background, as well as a clear delineation of the field input area\n\t\t\t\t\tand background area. This will make it easier for users to visually\n\t\t\t\t\tnavigate, especially those with low vision or visual perceptual\n\t\t\t\t\tdifficulties.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName=\"labelsAndInputControls\"\n\t\t\t\ttitle=\"Form Labels and Input Controls\">\n\t\t\t\t<p>\n\t\t\t\t\tInputs are created using the &lt;input&gt; element. This element takes\n\t\t\t\t\ta type which specifies to the user what kind of data should be\n\t\t\t\t\tentered. Use the appropriate &lt;input&gt; type for each field, such\n\t\t\t\t\tas “text”, “email”, or “number”.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tPlaceholder text can be helpful for providing examples or additional\n\t\t\t\t\tinformation, but it should not be used as a substitute for a semantic\n\t\t\t\t\tlabel. This is because it disappears when the input is in focus, which\n\t\t\t\t\tcauses an extra load on memory.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tLet’s revisit our phone number example. the example shows a simple\n\t\t\t\t\tcode example of a form with an area to place your phone number.\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<form>\n\t<label for=\"phone\">Phone Number (XXX-XXX-XXXX):</label>\n\t<input type=\"tel\" id=\"phone\" name=\"phone\">\n</form>\n`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<p>\n\t\t\t\t\tThis code will work and create a form with the text “Phone number:”\n\t\t\t\t\tand an editable text field next to it to place a number. In the edit\n\t\t\t\t\tfield, there will be the text “enter phone number” as an additional\n\t\t\t\t\tvisual cue thanks to the placeholder attribute (remember that screen\n\t\t\t\t\treaders do not read placeholder text, so important information should\n\t\t\t\t\tbe placed elsewhere).\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tWith the code in this format, the description “Phone number” is\n\t\t\t\t\t*visually* determined, and it is *programmatically* determined.\n\t\t\t\t\tMeaning the text “Phone Number” is attached meaningfully to the input\n\t\t\t\t\tarea.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tTo make sure a label and input are programmatically linked as well as\n\t\t\t\t\tvisually linked we need to use attributes. The &lt;label&gt; element\n\t\t\t\t\tshould have a “for” attribute and the &lt;input&gt; element should\n\t\t\t\t\thave an “id” attribute. The values of the for attribute and id\n\t\t\t\t\tattribute must match to connect the label to the input. In this\n\t\t\t\t\texample, the label represents both the visual description users see on\n\t\t\t\t\tthe page and the programmatic description that is read by a screen\n\t\t\t\t\treader.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tWhen the label area is selected by a user, the focus of the browser\n\t\t\t\t\tgoes to the input field. This makes the tap/ click area larger for the\n\t\t\t\t\tuser, which is especially helpful for those with dexterity and\n\t\t\t\t\tcognitive impairments. It also makes explicitly clear that these two\n\t\t\t\t\tareas belong together.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName=\"keyboardAccessibleForms\"\n\t\t\t\ttitle=\"Keyboard Accessible Forms\">\n\t\t\t\t<p>\n\t\t\t\t\tAll forms should be navigable by using the keyboard only. Form\n\t\t\t\t\tcontrols are natively keyboard accessible when using the &lt;form&gt;\n\t\t\t\t\telement. Users should be able to press the tab or arrow buttons and\n\t\t\t\t\tmove through all form elements and links. The form elements should be\n\t\t\t\t\tactivated when the arrow or tab buttons are used (or given focus),\n\t\t\t\t\tthen activated using the enter or spacebar key.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tWhen using JavaScript to create interactions and changes of state, the\n\t\t\t\t\tnative keyboard accessibility of a form may become inoperable. Because\n\t\t\t\t\tthere are interactions you can create that are only accessible by\n\t\t\t\t\tmouse, extra care should be taken to ensure they can also be accessed\n\t\t\t\t\tusing the keyboard.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tAvoid using tables to style forms, instead use CSS. Placing a form in\n\t\t\t\t\ta &lt;table&gt; tag may cause navigation issues for assistive\n\t\t\t\t\ttechnology and those using a keyboard to move around the page.\n\t\t\t\t\tManually testing your forms with a keyboard is imperative for catching\n\t\t\t\t\terrors caused by JavaScript and general layout issues.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName=\"formErrors\"\n\t\t\t\ttitle=\"Error Validation and Changes in State\">\n\t\t\t\t<p>\n\t\t\t\t\tIt is essential that users know when they have placed the wrong\n\t\t\t\t\tinformation in the form. Error messages and alerts should be clear,\n\t\t\t\t\teasy to understand, and given in multiple ways.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tThis alert can be in the form of a popup box (navigable by keyboard)\n\t\t\t\t\tor an alert next to the form control. The alert should be perceivable\n\t\t\t\t\tby everyone. Therefore, alerts should not be limited to a sound, or\n\t\t\t\t\ttext, or be conveyed by changing the element to a red color. The alert\n\t\t\t\t\tshould also be readable by a screen reader.\n\t\t\t\t</p>\n\t\t\t\t{\n\t\t\t\t\t// INFO: move this section!\n\t\t\t\t}\n\t\t\t\t<p>\n\t\t\t\t\tAdditionally, users should know when an input field is required. This\n\t\t\t\t\tcan be done using the “required” attribute. An example using the Phone\n\t\t\t\t\tnumber form control would go as follows:\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<form>\n\t<label for=\"phone\">Phone Number (XXX-XXX-XXXX):</label>\n\t<input type=\"tel\" id=\"phone\" name=\"phone\" required>\n</form>\n`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<p>\n\t\t\t\t\tWhat would be a good way to convey an error if someone entered their\n\t\t\t\t\tphone number in an incorrect format? Preferably, the error message\n\t\t\t\t\twould appear close to the input, specifying what the error is in as\n\t\t\t\t\tmuch detail as possible. An icon next to the text would help\n\t\t\t\t\tdifferentiate it from other text. The error should also be added to a\n\t\t\t\t\t&lt;div&gt; element with role=alert in order to be read out to a\n\t\t\t\t\tscreen reader user.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"WCAGCriteria\" title=\"WCAG Criteria\">\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#info-and-relationships\">\n\t\t\t\t\t\t\t1.3.1 Info and Relationships\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#sensory-characteristics\">\n\t\t\t\t\t\t\t1.3.3 Sensory Characteristics\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#identify-input-purpose\">\n\t\t\t\t\t\t\t1.3.5 Identify Input Purpose\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#use-of-color\">\n\t\t\t\t\t\t\t1.4.1 Use of Color\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#keyboard\">2.1.1 Keyboard</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#timing-adjustable\">\n\t\t\t\t\t\t\t2.2.1 Timing Adjustable\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#timeouts\">2.2.6 Timeouts</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#headings-and-labels\">\n\t\t\t\t\t\t\t2.4.6 Headings and Labels\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#focus-visible\">\n\t\t\t\t\t\t\t2.4.7 Focus Visible\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#label-in-name\">\n\t\t\t\t\t\t\t2.5.3 Label in Name\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#on-input\">3.3.2 On Input</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#error-identification\">\n\t\t\t\t\t\t\t3.3.1 Error Identification\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#labels-or-instructions\">\n\t\t\t\t\t\t\t3.3.2 Labels or Instructions\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#error-suggestion\">\n\t\t\t\t\t\t\t3.3.3 Error Suggestion\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#error-prevention-legal-financial-data\">\n\t\t\t\t\t\t\t3.3.4 Error Prevention\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"https://www.w3.org/TR/WCAG21/#name-role-value\">\n\t\t\t\t\t\t\t4.1.2 Name, Role, Value\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<PageUpdated date=\"25th July 2023\" />\n\t\t</>\n\t)\n}\n"
  },
  {
    "path": "components/ContentTemplates/HeadingsTemplate.tsx",
    "content": "import Image from \"next/legacy/image\"\nimport { NavPage } from \"../NavPage/NavPage\"\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\"\nimport { headingsPageNavigation } from \"../../data/pageNavigationLists\"\nimport { TemplateSection } from \"../TemplateSection/TemplateSection\"\nimport { PageUpdated } from \"../PageUpdated/PageUpdated\"\n\nexport const HeadingsTemplate = () => {\n\treturn (\n\t\t<>\n\t\t\t<NavPage pageNavigation={headingsPageNavigation} />\n\t\t\t<article>\n\t\t\t\t<TemplateSection sectionName=\"intro\" title=\"Introduction\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tHTML headings are tags that are used to hold titles and subheadings\n\t\t\t\t\t\ton a web page. They range from H1, which holds the overall title of\n\t\t\t\t\t\tthe page, to H2 - H6, which hold subheadings. The importance of the\n\t\t\t\t\t\theading decreases as the number increases.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tA good way to think about headings is to imagine a table of\n\t\t\t\t\t\tcontents. The headings make up the important parts of your content\n\t\t\t\t\t\tthat you would want users to find quickly.\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"imageContainer\">\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsrc=\"/images/headingsTemplate/contents.png\"\n\t\t\t\t\t\t\talt=\"screenshot of a table of contents for article about 20 coffee chats with developers, displaying headings for each section\"\n\t\t\t\t\t\t\twidth={400}\n\t\t\t\t\t\t\theight={400}\n\t\t\t\t\t\t\tlayout=\"intrinsic\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection\n\t\t\t\t\tsectionName=\"whyHeadings\"\n\t\t\t\t\ttitle=\"Why are HTML Headings Important?\">\n\t\t\t\t\t<p>Headings are important for a number of reasons.</p>\n\t\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\tThey give order and structure to the web page, making it easier\n\t\t\t\t\t\t\tfor users to understand the layout and content of the page.\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\tThey allow the browser to index and structure the page visually,\n\t\t\t\t\t\t\twhich helps users find what they are looking for.\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\tThey allow screen reader users to skip to specific sections of the\n\t\t\t\t\t\t\tpage, so they can find the information they need quickly.\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection\n\t\t\t\t\tsectionName=\"includedInHeadings\"\n\t\t\t\t\ttitle=\"What Should Be Included in a Heading?\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tWhen using headings, it is important to include descriptive titles\n\t\t\t\t\t\tand subheadings that accurately describe the content on the page.\n\t\t\t\t\t\tThis will help users to find what they are looking for more easily.\n\t\t\t\t\t\tHeadings should also be concise and to the point. They should\n\t\t\t\t\t\tclearly summarize the content that follows.\n\t\t\t\t\t</p>\n\t\t\t\t</TemplateSection>\n\n\t\t\t\t<TemplateSection\n\t\t\t\t\tsectionName=\"goodHeadings\"\n\t\t\t\t\ttitle=\"How to Write a Good Heading\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tWriting a good heading is all about being descriptive, and\n\t\t\t\t\t\tremembering how to nest heading sections within one another in\n\t\t\t\t\t\tsequential order.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>Below is a code snippet example with semantic section headings.</p>\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tlanguageType=\"html\"\n\t\t\t\t\t\tcodeSnippet={`<h1> Yoga for Developers </h1>\n\t<h2> What is Yoga? </h2>\n\t\t<h3> The History of Yoga </h3>\n\t\t\t<h4> Yoga's Origin </h4>\n\t\t\t<h4> Yoga in Modern Times </h4>\n\t<h2> The Benefit of Yoga </h2>\n\t\t<h3> Strength Conditioning </h3>\n\t\t\t<h4> Power Yoga </h4>\n\t\t<h3> Increasing Flexibility</h3>\n\t\t\t<h4> Gentle Stretches </h4>\n\t\t\t\t<h5> Stretches for the hands </h5>\n\t\t\t\t\t<h6> Prayer Pose </h6>\n\t\t\t\t\t<h6> Nerve Gliding Exercises </h6>`}\n\t\t\t\t\t/>\n\t\t\t\t</TemplateSection>\n\n\t\t\t\t<TemplateSection\n\t\t\t\t\tsectionName=\"avoidHeadings\"\n\t\t\t\t\ttitle=\"What Should We Avoid When Using Headings?\">\n\t\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\tAvoid using more than one H1 on a page, as this can confuse the\n\t\t\t\t\t\t\tstructure and hierarchy of the page. Instead, the H1 should be\n\t\t\t\t\t\t\tused for the most important topic on the page.\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\tHeadings should not be chosen for style purposes - use CSS to\n\t\t\t\t\t\t\tstyle sections instead.\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\tHeadings should not be placed in non sequential order to ensure\n\t\t\t\t\t\t\tthat the structure of the page makes sense.\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection sectionName=\"WCAGCriteria\" title=\"WCAG Criteria\">\n\t\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#section-headings\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t2.4.10 Section Headings\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t2.4.6 Headings and Labels\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection\n\t\t\t\t\tsectionName=\"QuizQuestions\"\n\t\t\t\t\ttitle=\"Test Your Knowledge\">\n\t\t\t\t\t<ol className=\"list\">\n\t\t\t\t\t\t<li>How many H1s should we have on our webpage?</li>\n\t\t\t\t\t\t<li>Why is heading order important?</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\tWhy is it important to have accurate and descriptive headings?\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\tHow does non-semantic headings affect users of screen readers?\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>What should we use to change the style of our headings?</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\tIf you wanted to add another subsection under an h2 heading that\n\t\t\t\t\t\t\tis directly related to the h2 subject, what heading level would\n\t\t\t\t\t\t\tyou use?\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\tIf you wanted to add a new subsection after an h2 that is not\n\t\t\t\t\t\t\trelated to the current subsection of h2, which heading level would\n\t\t\t\t\t\t\tyou use to make a new section?\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ol>\n\t\t\t\t</TemplateSection>\n\t\t\t</article>\n\t\t\t<PageUpdated date=\"8th April 2023\" />\n\t\t</>\n\t)\n}\n"
  },
  {
    "path": "components/ContentTemplates/IconsTemplate.tsx",
    "content": "import Link from \"next/link\"\n\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\"\nimport { NavPage } from \"../NavPage/NavPage\"\nimport { PageUpdated } from \"../PageUpdated/PageUpdated\"\nimport { TemplateSection } from \"../TemplateSection/TemplateSection\"\nimport { IPageNavigationItem } from \"../../data/pageNavigationLists\"\n\nexport const iconsPageNavigation: IPageNavigationItem[] = [\n\t{ linkName: \"Introduction\", href: \"#introduction\" },\n\t{ linkName: \"Decorative Icons\", href: \"#decorativeIcons\" },\n\t{ linkName: \"Informative Icons\", href: \"#informativeIcons\" },\n\t{ linkName: \"Text Alternatives\", href: \"#textAlternatives\" },\n\t{ linkName: \"Icon Links\", href: \"#iconLinks\" },\n\t{ linkName: \"Icon Buttons\", href: \"#iconButtons\" },\n\t{ linkName: \"Use of Colour\", href: \"#useOfColour\" },\n\t{ linkName: \"Target Size\", href: \"#targetSize\" },\n\t{ linkName: \"WCAG Criteria\", href: \"#WCAGCriteria\" },\n\t// { linkName: \"Other Resources\", href: \"#otherResources\" },\n]\n\nexport const IconsTemplate = () => {\n\treturn (\n\t\t<>\n\t\t\t<NavPage pageNavigation={iconsPageNavigation} />\n\t\t\t<article>\n\t\t\t\t<TemplateSection sectionName=\"introduction\" title=\"Introduction\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tIcons are small stylized graphical images that are often used on\n\t\t\t\t\t\twebpages to complement text. They are also often used alone instead\n\t\t\t\t\t\tof text in order to save space. They are commonly included in\n\t\t\t\t\t\tbuttons and links.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tIcons should be added to a page using the inbuilt HTML img element\n\t\t\t\t\t\tor as an svg. This way, alternative text can be added to the icon if\n\t\t\t\t\t\tneeded.\n\t\t\t\t\t</p>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection sectionName=\"decorativeIcons\" title=\"Decorative Icons\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tAn icon is decorative if it doesn't add any information to a page.\n\t\t\t\t\t\tThis is often the case when icons are used to complement text,\n\t\t\t\t\t\tespecially as part of links and buttons. If a SAVE button included\n\t\t\t\t\t\tboth the text \"Save\" and an icon of a floppy disk the icon is\n\t\t\t\t\t\tdecorative. It should have an empty alternative text to avoid the\n\t\t\t\t\t\tword \"Save\" being announced twice by screen readers.\n\t\t\t\t\t</p>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection\n\t\t\t\t\tsectionName=\"informativeIcons\"\n\t\t\t\t\ttitle=\"Informative and Functional Icons\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tIf an icon is informative or functional it needs to have alternative\n\t\t\t\t\t\ttext. Examples could include an envelope icon next to an email\n\t\t\t\t\t\taddress, a magnifying glass used as a search button or a cog to\n\t\t\t\t\t\tstand for settings. In each case, the alternative text should\n\t\t\t\t\t\tdescribe the function, for example \"search\" rather than \"magnifying\n\t\t\t\t\t\tglass\".\n\t\t\t\t\t</p>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection\n\t\t\t\t\tsectionName=\"textAlternatives\"\n\t\t\t\t\ttitle=\"Text Alternatives\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThe text alternative for an icon depends upon its purpose. Is the\n\t\t\t\t\t\ticon purely decorative? Or does it serve a functional role like an\n\t\t\t\t\t\ticon pointing to the homepage?\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tIn HTML the text alternative is added to the img element which takes\n\t\t\t\t\t\tan alt attribute. The alt attribute should be present on every img\n\t\t\t\t\t\telement even if the icon is decorative. If the icon is an svg it\n\t\t\t\t\t\tmust be given the role of img and a title to make it accessible.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThe alternative text can be read out by screen readers or converted\n\t\t\t\t\t\tinto braille for refreshable braille displays. Without it, screen\n\t\t\t\t\t\treader users may hear the whole image url instead, which can often\n\t\t\t\t\t\tbe a string of incomprehensible letters and numbers.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tAn icon may need different alternative text depending on where it is\n\t\t\t\t\t\tplaced on a webpage. For example, an icon button of a magnifying\n\t\t\t\t\t\tglass may serve as a search button in one place and as a zoom button\n\t\t\t\t\t\tin another.\n\t\t\t\t\t</p>\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<img src=\"url\" alt=\"The text alternative goes here\" />`}\n\t\t\t\t\t\tlanguageType=\"html\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<svg role=\"img\" height=\"210\" width=\"400\">\n\t<title>The text alternative goes here</title>\n\t<path d=\"M120 10 L55 200 L265 180 Z\" />\n</svg>`}\n\t\t\t\t\t\tlanguageType=\"html\"\n\t\t\t\t\t/>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection sectionName=\"iconLinks\" title=\"Icon Links\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tYou can turn an icon into a clickable link that takes you to another\n\t\t\t\t\t\twebpage. Since icon links don't have a visible link text, you need\n\t\t\t\t\t\tto use a different method to give the link an accessible name. These\n\t\t\t\t\t\tmethods can include adding an aria-label, using a visibly-hidden\n\t\t\t\t\t\tclass or adding an alt attribute to the image wrapped inside the\n\t\t\t\t\t\tlink. See the <Link href={\"/links\"}>Links Page</Link> for detail of\n\t\t\t\t\t\thow to use these techniques.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThe important thing to remember when using icons as links is to\n\t\t\t\t\t\tdescribe the link destination rather than the content of the image.\n\t\t\t\t\t</p>\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<a href=\"https://google.com\" aria-label=\"Google\">\n\t<FaGoogle />\n</a>\n\n<a href=\"https://google.com\">\n\t<FaGoogle />\n\t<span class=\"visibly-hidden\">Google</span>\n</a>\n\n<a href=\"https://google.com\">\n\t<img src=\"url\" alt=\"Google\" />\n</a>`}\n\t\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t\t/>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection sectionName=\"iconButtons\" title=\"Icon Buttons\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSome buttons use only an icon to convey their function. In this case\n\t\t\t\t\t\tit's important to choose icons that are widely recognised and\n\t\t\t\t\t\tunderstood, otherwise it can be difficult to know their function.\n\t\t\t\t\t\tThe icons should also have a suitable label. This can be done with\n\t\t\t\t\t\tthe alt attribute or the aria-label attribute on the button.\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<button type=\"button\" onclick=\"handleClick()\">\n\t<img src=\"icon-url.png\" alt=\"Save\" />\n</button>`}\n\t\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t\t/>\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<button type=\"button\" onclick=\"handleClick()\">\n\t<i class=\"fa-solid fa-floppy-disk\" aria-label=\"Save\"></i>\n</button>`}\n\t\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t\t/>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection sectionName={\"useOfColour\"} title={\"Use of Colour\"}>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tIcons are often used to communicate status. The colour of the icon\n\t\t\t\t\t\tshould not be the only way to do this. Instead, use different icons\n\t\t\t\t\t\tor complement the icon with text. For example, if you have an icon\n\t\t\t\t\t\tto indicate online status, avoid green for online and red for\n\t\t\t\t\t\toffline as people with red-green colour vision deficiencies will\n\t\t\t\t\t\thave difficulty telling the two colours apart.\n\t\t\t\t\t</p>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection sectionName={\"targetSize\"} title={\"Target Size\"}>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tIcons are often quite small and if used as icon buttons they can be\n\t\t\t\t\t\tdifficult to press. Therefore, they should have a minimum target\n\t\t\t\t\t\tsize to make sure they can be activated even for users with\n\t\t\t\t\t\tdexterity limitations.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThe minimum target size should be at least 24 x 24 CSS pixels unless\n\t\t\t\t\t\tthe interactive element has enough space so that it does not\n\t\t\t\t\t\tintersect another element, it has an equivalent larger control\n\t\t\t\t\t\telsewhere on the same page, it is inline, or the presentation is\n\t\t\t\t\t\tconsidered essential.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tIdeally, the target size is even larger than 24 CSS pixels, making\n\t\t\t\t\t\tit easier to press. On mobile devices, 44 x 44 CSS pixels is the\n\t\t\t\t\t\trecommended size. This allows for the reduced accuracy of touch.\n\t\t\t\t\t</p>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection sectionName=\"WCAGCriteria\" title=\"WCAG Criteria\">\n\t\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#non-text-content\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t1.1.1 Non-text content\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#info-and-relationships\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t1.3.1 Info and Relationships\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#identify-purpose\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t1.3.6 Identify Purpose\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#use-of-color\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t1.4.1 Use of Color\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#non-text-contrast\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t1.4.11 Non-text Contrast\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#link-purpose-in-context\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t2.4.4 Link Purpose (in Context)\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#link-purpose-link-only\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t2.4.9 Link Purpose (Link Only)\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#label-in-name\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t2.5.3 Label in Name\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#target-size-enhanced\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t2.5.5 Target Size (Enhanced)\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#target-size-minimum\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t2.5.8 Target Size (Minimum)\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</TemplateSection>\n\t\t\t\t{/* <TemplateSection sectionName=\"otherResources\" title=\"Other Resources\">\n\t\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/WAI/tutorials/images/\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\tW3C Images Tutorial\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</TemplateSection> */}\n\t\t\t</article>\n\t\t\t<PageUpdated date=\"8th July 2024\" />\n\t\t</>\n\t)\n}\n"
  },
  {
    "path": "components/ContentTemplates/ImagesTemplate.tsx",
    "content": "import Image from \"next/legacy/image\"\nimport { NavPage } from \"../NavPage/NavPage\"\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\"\nimport { imagePageNavigation } from \"../../data/pageNavigationLists\"\nimport { TemplateSection } from \"../TemplateSection/TemplateSection\"\nimport { PageUpdated } from \"../PageUpdated/PageUpdated\"\n\nexport const ImagesTemplate = () => {\n\treturn (\n\t\t<>\n\t\t\t<NavPage pageNavigation={imagePageNavigation} />\n\t\t\t<article>\n\t\t\t\t<TemplateSection sectionName=\"introduction\" title=\"Introduction\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tA picture is worth more than a thousand words, as the old adage\n\t\t\t\t\t\tgoes. Images help bring texts to life, they complement complex\n\t\t\t\t\t\texplanations and often lead to greater understanding and better web\n\t\t\t\t\t\texperiences. For many people they help make things easier to\n\t\t\t\t\t\tunderstand. However, not everyone can see images and therefore a\n\t\t\t\t\t\ttext alternative is needed so that everyone has access to the\n\t\t\t\t\t\tinformation conveyed in the image.\n\t\t\t\t\t</p>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection\n\t\t\t\t\tsectionName=\"textAlternatives\"\n\t\t\t\t\ttitle=\"Text Alternatives\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThe text alternative for an image depends upon its purpose. Is the\n\t\t\t\t\t\timage purely decorative? Does it help to describe or explain the\n\t\t\t\t\t\ttext? Or does it serve a functional role like an icon pointing to\n\t\t\t\t\t\tthe homepage?\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tIn HTML the text alternative is added to the image element which\n\t\t\t\t\t\ttakes an alt attribute. The alt attribute should be present on every\n\t\t\t\t\t\timg element. If the image is an svg it must be given the role of\n\t\t\t\t\t\timage and a title to make it accessible.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThe alternative text can be read out by screen readers or converted\n\t\t\t\t\t\tinto braille for refreshable braille displays. Without it, screen\n\t\t\t\t\t\treader users may hear the whole image url instead, which can often\n\t\t\t\t\t\tbe a string of incomprehensible letters and numbers.\n\t\t\t\t\t</p>\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<img src=\"url\" alt=\"The text alternative goes here\" />`}\n\t\t\t\t\t\tlanguageType=\"html\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<svg role=\"img\" height=\"210\" width=\"400\">\n\t<title>The text alternative goes here</title>\n\t<path d=\"M120 10 L55 200 L265 180 Z\" />\n</svg>`}\n\t\t\t\t\t\tlanguageType=\"html\"\n\t\t\t\t\t/>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection\n\t\t\t\t\tsectionName=\"decorativeImages\"\n\t\t\t\t\ttitle=\"Decorative Images\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tDecorative images usually add no extra information to a page and a\n\t\t\t\t\t\tperson’s understanding is not hindered if the images are not\n\t\t\t\t\t\tvisible. Background patterns and shapes are often decorative. Icons\n\t\t\t\t\t\tare also sometimes decorative if they are combined with a link and\n\t\t\t\t\t\tthe link text describes the icon. Decorative images should have an\n\t\t\t\t\t\tempty (sometimes also called null) alt attribute.\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"imageContainer\">\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsrc=\"/images/imagesTemplate/oldPaperTexture.jpg\"\n\t\t\t\t\t\t\talt=\"Old brown paper texture\"\n\t\t\t\t\t\t\twidth={300}\n\t\t\t\t\t\t\theight={200}\n\t\t\t\t\t\t\tlayout=\"intrinsic\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsrc=\"/images/imagesTemplate/hexagonsPattern.jpg\"\n\t\t\t\t\t\t\talt=\"Blue tiled hexagons\"\n\t\t\t\t\t\t\twidth={300}\n\t\t\t\t\t\t\theight={200}\n\t\t\t\t\t\t\tlayout=\"intrinsic\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<img src=\"/oldPaperTexture.jpg\" alt=\"\" />\n<img src=\"/hexagonsPattern.jpg\" alt=\"\" />`}\n\t\t\t\t\t\tlanguageType=\"html\"\n\t\t\t\t\t/>\n\t\t\t\t</TemplateSection>\n\n\t\t\t\t<TemplateSection\n\t\t\t\t\tsectionName=\"informativeImages\"\n\t\t\t\t\ttitle=\"Informative Images\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tInformative images compliment written information by illustrating\n\t\t\t\t\t\tconcepts and examples visually. An image of a cake alongside a\n\t\t\t\t\t\trecipe, a diagram visualising an instruction and a telephone icon\n\t\t\t\t\t\tpreceding a phone number are all examples of informative images.\n\t\t\t\t\t\tThese should have a short and succinct text alternative.\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"imageContainer\">\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsrc=\"/images/imagesTemplate/cupcakes.jpg\"\n\t\t\t\t\t\t\talt=\"Cupcakes with pink icing and small sugar heart decorations\"\n\t\t\t\t\t\t\twidth={300}\n\t\t\t\t\t\t\theight={200}\n\t\t\t\t\t\t\tlayout=\"intrinsic\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<img src=\"/cupcakes.jpg\" alt=\"Cupcakes with pink icing and small sugar heart decorations\" />`}\n\t\t\t\t\t\tlanguageType=\"html\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<h3>Complex Informative Images</h3>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSome informative images such as graphs can convey a lot of complex\n\t\t\t\t\t\tinformation. In such cases the text alternative needs to convey the\n\t\t\t\t\t\tsame information which can be difficult to do in a short and\n\t\t\t\t\t\tsuccinct alt attribute. In this case the text alternative is split\n\t\t\t\t\t\tinto two parts. The alt attribute should summarise the image and\n\t\t\t\t\t\talso explain where a longer form text explanation can be found. The\n\t\t\t\t\t\tlonger text can be found on the same page or as a link to a separate\n\t\t\t\t\t\tpage.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThe longer text should convey the same complex information as the\n\t\t\t\t\t\timage. In the case of graphs the data should be explained along with\n\t\t\t\t\t\tany trends or relationships. Avoid using colour as the only way of\n\t\t\t\t\t\texplaining the information as not everyone perceives colour in the\n\t\t\t\t\t\tsame way.\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"imageContainer\">\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsrc=\"/images/imagesTemplate/drill-instruction.png\"\n\t\t\t\t\t\t\talt=\"Drawn instructions for how to use a handheld drill\"\n\t\t\t\t\t\t\twidth={200}\n\t\t\t\t\t\t\theight={175}\n\t\t\t\t\t\t\tlayout=\"intrinsic\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<img src=\"drill-instructions.png\" alt=\"How to use a handheld drill. Further instructions below.\" />`}\n\t\t\t\t\t\tlanguageType=\"html\"\n\t\t\t\t\t/>\n\t\t\t\t</TemplateSection>\n\n\t\t\t\t<TemplateSection\n\t\t\t\t\tsectionName=\"functionalImages\"\n\t\t\t\t\ttitle=\"Functional Images\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tIf images are used as part of a link or button they are usually\n\t\t\t\t\t\tthere to perform a function. Examples include using a magnifying\n\t\t\t\t\t\tglass to signify a search field, a floppy disk icon as a save button\n\t\t\t\t\t\tor a logo as a link back to the home page. The text alternative\n\t\t\t\t\t\tshould match the action performed by the link or button.\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"imageContainer\">\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsrc=\"/images/imagesTemplate/searchBtn.png\"\n\t\t\t\t\t\t\talt=\"Magnifying glass used as search button example\"\n\t\t\t\t\t\t\twidth={150}\n\t\t\t\t\t\t\theight={150}\n\t\t\t\t\t\t\tlayout=\"intrinsic\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsrc=\"/images/imagesTemplate/playBtn.png\"\n\t\t\t\t\t\t\talt=\"Triangle used as play button example\"\n\t\t\t\t\t\t\twidth={150}\n\t\t\t\t\t\t\theight={150}\n\t\t\t\t\t\t\tlayout=\"intrinsic\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<img src=\"searchBtn.png\" alt=\"Search\" />\n<img src=\"playBtn.png\" alt=\"Play\" />`}\n\t\t\t\t\t\tlanguageType=\"html\"\n\t\t\t\t\t/>\n\t\t\t\t</TemplateSection>\n\n\t\t\t\t<TemplateSection\n\t\t\t\t\tsectionName=\"goodAltText\"\n\t\t\t\t\ttitle=\"How to write good alt text\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tWriting good text alternatives is not always easy and there are many\n\t\t\t\t\t\tdiffering opinions about how to do it well. The text alternative\n\t\t\t\t\t\tshould get across all the important information. A good rule of\n\t\t\t\t\t\tthumb is to imagine you are describing an image to someone over the\n\t\t\t\t\t\tphone. Which details would you tell them about? Which details would\n\t\t\t\t\t\tyou leave out? The more complex the image, the more detailed your\n\t\t\t\t\t\talternative text needs to be.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>Let's take a look at the following image:</p>\n\t\t\t\t\t<div className=\"imageContainer\">\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsrc=\"/images/imagesTemplate/vw-beetle-car.jpg\"\n\t\t\t\t\t\t\talt=\"VW Beetle Car in pale green in front of a pitched roof house painted in the same colour\"\n\t\t\t\t\t\t\twidth={600}\n\t\t\t\t\t\t\theight={400}\n\t\t\t\t\t\t\tlayout=\"intrinsic\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThe focus of this image would depend on the context of where it's\n\t\t\t\t\t\tused. Is the focus the car or the house? Let's look at a couple of\n\t\t\t\t\t\talternatives.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<strong>Alternative 1: The house is for sale</strong>\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThe main focus should be on describing the house. The car is\n\t\t\t\t\t\tprobably not important as that won't be included in the house sale.\n\t\t\t\t\t\tLet's try it.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<strong>Basic: </strong>House with pitched roof and brown front\n\t\t\t\t\t\tdoor.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<strong>More detailed: </strong>Pale green, one storey house with\n\t\t\t\t\t\tpitched roof, large windows and steps up to a brown front door.\n\t\t\t\t\t\tSurrounded by a white picket fence.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<strong>Too detailed? </strong>Pale green, one storey house of\n\t\t\t\t\t\twooden construction. White painted trim surrounds large windows with\n\t\t\t\t\t\t3 panels on either side of a stained wood front door. The house is\n\t\t\t\t\t\tsurrounded by a small garden and white picket fence with steps\n\t\t\t\t\t\tleading from the road to the porch. There is both on-road parking\n\t\t\t\t\t\tout the front and a driveway to the left of the house. The garden is\n\t\t\t\t\t\twell-established with palms, various trees, bushes and vines.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<strong>Alternative 2: A car magazine</strong>\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThis time the car is the main focus and the house needs less\n\t\t\t\t\t\tdescription. However, the house adds to the aesthetic and emotion of\n\t\t\t\t\t\tthe image.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<strong>Basic: </strong>Vintage car parked on a street.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<strong>More detailed: </strong>Soft, pale green vintage VW Beetle\n\t\t\t\t\t\tparked in front of a house painted in the same pale green.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<strong>Too detailed? </strong>Soft, pale green vintage VW Beetle in\n\t\t\t\t\t\texcellent condition with shiny silver trim and new tyres. The car is\n\t\t\t\t\t\tparked on a quiet street in front of a one storey house painted in\n\t\t\t\t\t\tthe same color in a sleepy suburb.\n\t\t\t\t\t</p>\n\t\t\t\t</TemplateSection>\n\n\t\t\t\t<TemplateSection sectionName=\"imagesOfText\" title=\"Images of Text\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tWherever possible, images of text should be avoided as the text\n\t\t\t\t\t\tcan’t be enlarged in the same way as text in HTML. However, if you\n\t\t\t\t\t\tmust have an image of text then the alt text should match the text\n\t\t\t\t\t\tin the image.\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"imageContainer\">\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsrc=\"/images/imagesTemplate/make-the-day-great.jpg\"\n\t\t\t\t\t\t\talt=\"Make the day great sign\"\n\t\t\t\t\t\t\twidth={300}\n\t\t\t\t\t\t\theight={200}\n\t\t\t\t\t\t\tlayout=\"intrinsic\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<img src=\"make-the-day-great.jpg\" alt=\"Make the day great sign\" />`}\n\t\t\t\t\t\tlanguageType=\"html\"\n\t\t\t\t\t/>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection\n\t\t\t\t\tsectionName=\"imagesAndColour\"\n\t\t\t\t\ttitle=\"Images and Colour\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tColour should not be the only way to represent meaning in an image\n\t\t\t\t\t\tbecause not everyone perceives colour in the same way. If colour is\n\t\t\t\t\t\tused in graphs, charts and diagrams then there should also be\n\t\t\t\t\t\tanother way to tell the colours apart, such as different patterns or\n\t\t\t\t\t\tsymbols.\n\t\t\t\t\t</p>\n\t\t\t\t\t{\n\t\t\t\t\t\t// TODO: Add an example here of a pie chart or bar chart\n\t\t\t\t\t}\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection sectionName=\"imageMaps\" title=\"Image Maps\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tAn image map is a larger image with clickable hotspots, each of\n\t\t\t\t\t\twhich open a different section. An example could be a floor plan of\n\t\t\t\t\t\ta local building which opens up an enlarged map of each room when\n\t\t\t\t\t\tclicked. The hotspots are made with the area element and each area\n\t\t\t\t\t\telement should have its own alt attribute. The overall image should\n\t\t\t\t\t\talso have an alt attribute.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLet's take a look at the image below. The image itself has an alt\n\t\t\t\t\t\tattribute which describes the whole image. Each area is clickable\n\t\t\t\t\t\tand leads to a Wikipedia article. Each area also has an alt\n\t\t\t\t\t\tattribute describing just that section of the image.\n\t\t\t\t\t</p>\n\t\t\t\t\t<map name=\"primary\">\n\t\t\t\t\t\t<area\n\t\t\t\t\t\t\tshape=\"circle\"\n\t\t\t\t\t\t\tcoords=\"190,130,70\"\n\t\t\t\t\t\t\thref=\"https://en.wikipedia.org/wiki/Doughnut\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\talt=\"Doughnut\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<area\n\t\t\t\t\t\t\tshape=\"circle\"\n\t\t\t\t\t\t\tcoords=\"380,250,100\"\n\t\t\t\t\t\t\thref=\"https://en.wikipedia.org/wiki/Coffee\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\talt=\"Coffee\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</map>\n\t\t\t\t\t<Image\n\t\t\t\t\t\tuseMap=\"#primary\"\n\t\t\t\t\t\tsrc=\"/images/imagesTemplate/donut-coffee.png\"\n\t\t\t\t\t\twidth={600}\n\t\t\t\t\t\theight={400}\n\t\t\t\t\t\talt=\"Illustration of a pink doughnut with sprinkles next to a cup of black coffee\"\n\t\t\t\t\t\tlayout=\"intrinsic\"\n\t\t\t\t\t/>\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<map name=\"primary\">\n\t<area\n\t\tshape=\"circle\"\n\t\tcoords=\"190,130,70\"\n\t\thref=\"url\"\n\t\talt=\"Doughnut\"\n\t/>\n\t<area\n\t\tshape=\"circle\"\n\t\tcoords=\"380,250,100\"\n\t\thref=\"url\"\n\t\talt=\"Coffee\"\n\t/>\n</map>\n<img\n\tusemap=\"#primary\"\n\tsrc=\"donut-coffee.png\"\n\talt=\"Illustration of a pink doughnut with sprinkles next to a cup of black coffee\" \n/>`}\n\t\t\t\t\t\tlanguageType=\"html\"\n\t\t\t\t\t/>\n\t\t\t\t</TemplateSection>\n\t\t\t\t{/* TODO: <TemplateSection sectionName=\"checklist\"  title=\"Images Checklist\">\n\t\t\t\t\t\n\t\t\t\t\t<p>Add some points here</p>\n\t\t\t\t</TemplateSection> */}\n\t\t\t\t<TemplateSection sectionName=\"WCAGCriteria\" title=\"WCAG Criteria\">\n\t\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#non-text-content\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t1.1.1 Non-text content\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#use-of-color\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t1.4.1 Use of Color\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#images-of-text\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t1.4.5 Images of Text\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#images-of-text-no-exception\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\t1.4.9 Images of Text (No Exception)\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</TemplateSection>\n\t\t\t\t<TemplateSection sectionName=\"otherResources\" title=\"Other Resources\">\n\t\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/WAI/tutorials/images/\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\tW3C Images Tutorial\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/WAI/tutorials/images/decision-tree/\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\tW3C An alt decision tree\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://jakearchibald.com/2021/great-alt-text/\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\tWriting great alt text: Emotion matters\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://tink.uk/thoughts-on-skin-tone-and-text-descriptions.md-notes-on-synthetic-speech/\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\tThoughts on skin tone and text descriptions\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map\"\n\t\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t\tMDN: The Image Map element\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</TemplateSection>\n\t\t\t</article>\n\n\t\t\t<PageUpdated date=\"26th November 2022\" />\n\t\t</>\n\t)\n}\n"
  },
  {
    "path": "components/ContentTemplates/LinksTemplate.module.css",
    "content": ".srOnly{\n\tborder: 0;\n    clip: rect(0,0,0,0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n}"
  },
  {
    "path": "components/ContentTemplates/LinksTemplate.tsx",
    "content": "import { TemplateSection } from \"../TemplateSection/TemplateSection\"\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\"\nimport { NavPage } from \"../NavPage/NavPage\"\nimport { linkPageNavigation } from \"../../data/pageNavigationLists\"\nimport { PageUpdated } from \"../PageUpdated/PageUpdated\"\n\nexport const LinksTemplate = () => {\n\treturn (\n\t\t<>\n\t\t\t<NavPage pageNavigation={linkPageNavigation} />\n\t\t\t<TemplateSection sectionName=\"introduction\" title=\"Introduction\">\n\t\t\t\t<p>\n\t\t\t\t\tLinks, also known as hyperlinks, are a fundamental element in HTML.\n\t\t\t\t\tThey connect different pages, or parts of pages, to one another.\n\t\t\t\t</p>\n\n\t\t\t\t<p>\n\t\t\t\t\tIn HTML, links are created using the anchor element\n\t\t\t\t\t<strong>{`${\" <a>\"}`}</strong>. This element allows you to make text\n\t\t\t\t\tor images clickable, and has inbuilt interactivity allowing users to\n\t\t\t\t\tactivate the link with a mouse click, a touch device or by pressing\n\t\t\t\t\tEnter on a keyboard. It is also automatically reachable with the tab\n\t\t\t\t\tkey.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tThe accessible name for links created using the anchor element comes\n\t\t\t\t\tfrom the content between the opening and closing tag. If the content\n\t\t\t\t\tbetween the opening and closing tags is not text, or the text is very\n\t\t\t\t\tgeneric the accessible name should be added in another way, for\n\t\t\t\t\texample with ARIA.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tAn important attribute for accessibility is the href attribute. This\n\t\t\t\t\tspecifies the destination of the link. If the href is not present then\n\t\t\t\t\tthe link is not accessible.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\n\t\t\t<TemplateSection\n\t\t\t\tsectionName=\"accessibleLinkNames\"\n\t\t\t\ttitle=\"Accessible Link Names\">\n\t\t\t\t<div>\n\t\t\t\t\t<h3>Descriptive Link Text</h3>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLink text is the text between the opening and closing anchor tag\n\t\t\t\t\t\tthat describes a hyperlink on a webpage. It's important to have\n\t\t\t\t\t\tdescriptive link text to provide clear context about where the link\n\t\t\t\t\t\tleads and helps users understand the purpose of the link. This is\n\t\t\t\t\t\thelpful for people with cognitive disabilities, screen reader users\n\t\t\t\t\t\tand voice input users.\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<a href=\"https://accessibleweb.dev\">Visit Accessible Web Dev</a> \n<!--The descriptive name in this case is \"Visit Accessible Web Dev\" -->`}\n\t\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<h3>Non-descriptive Link Text</h3>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tIf possible, avoid using vague, non-descriptive phrases as link text\n\t\t\t\t\t\tsuch as \"Click Here\" or \"Read More\". These phrases are difficult to\n\t\t\t\t\t\tunderstand without surrounding context and can pose problems for\n\t\t\t\t\t\tscreen reader users and voice input users. It is also common to see\n\t\t\t\t\t\tthese phrases repeated multiple times on a page, for example on an\n\t\t\t\t\t\te-commerce site listing several product cards, making it more\n\t\t\t\t\t\tdifficult to differentiate between the different link destinations.\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tIf you must use non-descriptive text, you can make it more\n\t\t\t\t\t\taccessible by using methods to overwrite the visible text. Two such\n\t\t\t\t\t\tmethods are using aria-label or hiding additional text with CSS.\n\t\t\t\t\t</p>\n\t\t\t\t\t<h4>Aria-label</h4>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThe first method is to use an aria-label. This will overwrite the\n\t\t\t\t\t\tvisible text and be read out to screen reader users instead. It's\n\t\t\t\t\t\timportant to keep in mind that the aria-label should start with the\n\t\t\t\t\t\tsame text as shown in the visible text so that the link still works\n\t\t\t\t\t\tfor voice input users. If the visible link says \"Read more\" the\n\t\t\t\t\t\taria-label might be \"Read more about accessible buttons\"\n\t\t\t\t\t</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tAn aria-label can also be used to give an image or icon link an\n\t\t\t\t\t\taccessible name when there is no visible link text.\n\t\t\t\t\t</p>\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<a href=\"https://accessibleweb.dev/buttons\" aria-label=\"Read more about accessible buttons\">Read more</a>`}\n\t\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t\t/>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSome downsides to aria-label are that it doesn't always get\n\t\t\t\t\t\ttranslated by in-browser translation tools. It also completely\n\t\t\t\t\t\toverwrites the visible text which can be problematic if the two do\n\t\t\t\t\t\tnot match.\n\t\t\t\t\t</p>\n\t\t\t\t\t<h4>Hiding elements with CSS</h4>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tAnother solution is to use CSS to hide some extra text. This can be\n\t\t\t\t\t\tdone by adding a visibly hidden <strong>{`${\"<span>\"}`}</strong>{\" \"}\n\t\t\t\t\t\telement within the <strong>{`${\"<a>\"}`}</strong> element to provide\n\t\t\t\t\t\tdescriptive text that gets read out to screen readers but is not\n\t\t\t\t\t\tvisible to sighted users.\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`<a href=\"https://accessibleweb.dev/buttons\">Read more\n\t<span class=\"visibly-hidden\">about accessible buttons</span>\n</a>`}\n\t\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<CodeBlock\n\t\t\t\t\t\tcodeSnippet={`.visibly-hidden {\n    border: 0;\n    clip: rect(0,0,0,0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n}\n/* You may also see this class called screen-reader-only or sr-only in\nother places on the web */`}\n\t\t\t\t\t\tlanguageType={\"css\"}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</TemplateSection>\n\n\t\t\t<TemplateSection sectionName=\"linkStates\" title=\"Link State and Style\">\n\t\t\t\t<p>\n\t\t\t\t\tTo improve the accessibility of your website, it's crucial to make\n\t\t\t\t\tlinks easy to distinguish from non-interactive elements on a page.\n\t\t\t\t</p>\n\n\t\t\t\t<p>Here's how to achieve this:</p>\n\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Underline links by default: </strong>\n\t\t\t\t\t\tLinks should be underlined by default. This provides a clear visual\n\t\t\t\t\t\tindicator that a piece of text or an element is clickable. It's a\n\t\t\t\t\t\tuniversal convention that helps all users understand what's\n\t\t\t\t\t\tclickable.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Focus state: </strong>A focused link should have a focus\n\t\t\t\t\t\tindicator which makes it easy to see where focus is on the screen.\n\t\t\t\t\t\tThis is often a thicker border or outline around the link and should\n\t\t\t\t\t\thave a contrast ratio of at least 3:1 with the background.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Ensure sufficient color contrast: </strong>\n\t\t\t\t\t\tMake sure the color of your links contrasts well with the background\n\t\t\t\t\t\tcolor or surrounding text color. This ensures that people with\n\t\t\t\t\t\tvisual impairments or color vision deficiencies can easily\n\t\t\t\t\t\tdistinguish the links from the surrounding text. The contrast ratio\n\t\t\t\t\t\tshould be at least 4.5:1 for WCAG level AA compliance. Color should\n\t\t\t\t\t\tnot be the only way to distinguish links from surrounding text.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Don't rely on hover state to convey links: </strong>\n\t\t\t\t\t\tHover is not available on touch devices or for people navigating the\n\t\t\t\t\t\tweb with keyboard, screen readers or other input devices. Therefore\n\t\t\t\t\t\thover states only, such as underline or color change on hover,\n\t\t\t\t\t\tshould not be relied upon to convey that something is a link.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"linkImage\" title=\"Image and Icon Links\">\n\t\t\t\t<p>\n\t\t\t\t\tYou can turn an image or icon into a clickable link that takes you to\n\t\t\t\t\tanother webpage. Since image and icon links don't have a visible link\n\t\t\t\t\ttext, you need to use a different method to give the link an\n\t\t\t\t\taccessible name. These methods can include adding an aria-label, using\n\t\t\t\t\ta visibly-hidden class or adding an alt attribute to the image text\n\t\t\t\t\twrapped inside the link.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tThe important thing to remember when using images and icons as links\n\t\t\t\t\tis to describe the link destination rather than the content of the\n\t\t\t\t\timage.\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<a href=\"https://google.com\" aria-label=\"Google\">\n\t<FaGoogle />\n</a>\n\n<a href=\"https://google.com\">\n\t<FaGoogle />\n\t<span class=\"visibly-hidden\">Google</span>\n</a>\n\n<a href=\"https://google.com\">\n\t<img src=\"url\" alt=\"Google\" />\n</a>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName=\"touchTargetMinimum\"\n\t\t\t\ttitle=\"Touch Target Minimum\">\n\t\t\t\t<p>\n\t\t\t\t\tWhen it comes to creating accessible links, it's important that they\n\t\t\t\t\tare easy to activate. To do this, WCAG recommends that links that are\n\t\t\t\t\tnot within text have a target size of at least 24 x 24 CSS pixels.\n\t\t\t\t\tDoing this makes it easier for users who have motor dexterity issues\n\t\t\t\t\tto click them.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"WCAGCriteria\" title=\"WCAG Criteria\">\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#non-text-content\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.1.1 Non-text content\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#info-and-relationships\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.3.1 Info and Relationships\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#identify-purpose\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.3.6 Identify Purpose\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#contrast-minimum\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.4.3 Contrast (minimum)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#non-text-contrast\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.4.11 Non-text Contrast\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.4.13 Content on Hover or Focus\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#keyboard\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.1.1 Keyboard\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#link-purpose-in-context\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.4 Link Purpose (in Context)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#focus-visible\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.7 Focus Visible\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#link-purpose-link-only\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.9 Link Purpose (Link Only)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#focus-not-obscured-minimum\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.11 Focus Not Obscured (Minimum)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#focus-not-obscured-enhanced\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.12 Focus Not Obscured (Enhanced)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#focus-appearance\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.13 Focus Appearance\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#label-in-name\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.5.3 Label in Name\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#target-size-enhanced\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.5.5 Target Size (Enhanced)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG22/#target-size-minimum\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.5.8 Target Size (Minimum)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#on-focus\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t3.2.1 On Focus\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"otherResources\" title=\"Other Resources\">\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.tpgi.com/well-color-us-surprised-this-sc-can-be-a-tricky-customer/\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\tWell Color Us Surprised - This SC Can Be a Tricky Customer\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://webaim.org/blog/wcag-2-0-and-link-colors/\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\tWCAG 2.0 and link colors\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\n\t\t\t<PageUpdated date=\"5th January 2024\" />\n\t\t</>\n\t)\n}\n"
  },
  {
    "path": "components/ContentTemplates/ListsTemplate.tsx",
    "content": "import { WorkInProgress } from \"../WorkInProgress/WorkInProgress\"\n\nexport const ListsTemplate = () => {\n\treturn <WorkInProgress />\n}\n"
  },
  {
    "path": "components/ContentTemplates/MenusTemplate.tsx",
    "content": "import { WorkInProgress } from \"../WorkInProgress/WorkInProgress\"\n\nexport const MenusTemplate = () => {\n\treturn <WorkInProgress />\n}\n"
  },
  {
    "path": "components/ContentTemplates/ModalsTemplate.tsx",
    "content": "import { TemplateSection } from \"../TemplateSection/TemplateSection\"\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\"\nimport { NavPage } from \"../NavPage/NavPage\"\nimport { modalPageNavigation } from \"../../data/pageNavigationLists\"\nimport { PageUpdated } from \"../PageUpdated/PageUpdated\"\n\nexport const ModalsTemplate = () => {\n\treturn (\n\t\t<>\n\t\t\t<NavPage pageNavigation={modalPageNavigation} />\n\t\t\t<TemplateSection sectionName=\"introduction\" title=\"Introduction\">\n\t\t\t\t<p>\n\t\t\t\t\tModals are elements of a website or application that are appear on top\n\t\t\t\t\tof the main window. They are usually activated by the click of a\n\t\t\t\t\tbutton or some event. The main window may still visible underneath\n\t\t\t\t\talthough you should not be able to interact with it when the modal is\n\t\t\t\t\topen. Modals go by many names, including modal window, dialog, popup\n\t\t\t\t\tand even lightbox. On this page we will use the term modal throughout\n\t\t\t\t\tto describe this pattern.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tBefore 2023, there was no semantic HTML element that could be used to\n\t\t\t\t\tcreate a modal. That means developers combined HTML elements to create\n\t\t\t\t\ttheir own modals. Many different patterns for modals exist out in the\n\t\t\t\t\twild but unfortunately many are not accessible.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIn 2023, the dialog element was added to the HTML specification in an\n\t\t\t\t\tattempt to minimise the need for developers to build their own modals.\n\t\t\t\t\tOn this page you will find examples of two accessible modals, one with\n\t\t\t\t\tthe dialog element and one without.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName=\"howAModalShouldWork\"\n\t\t\t\ttitle=\"How a modal should work\">\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\tThings behind the modal should become inactive when the modal is\n\t\t\t\t\t\topen.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tThe focus should move to an element within the modal when it opens.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tThe focus should move back to the original activating element when\n\t\t\t\t\t\tthe modal closes.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tThe focus should be trapped within the modal when open - it should\n\t\t\t\t\t\tnot be possible to tab to something outside of the modal when it is\n\t\t\t\t\t\topen.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tIt should be possible to close the modal by pressing the Escape key.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tThe modal should not be part of the tab order when it is closed.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"usingDialog\" title={\"Using <dialog>\"}>\n\t\t\t\t<p>\n\t\t\t\t\tThe HTML &lt;dialog&gt; element has full support since Chrome 37, Edge\n\t\t\t\t\t79, Firefox 98 and Safari 15.4. If you need to support browsers older\n\t\t\t\t\tthan this then using a different method is suggested.\n\t\t\t\t</p>\n\t\t\t\t<h3>HTML</h3>\n\t\t\t\t<p>\n\t\t\t\t\tThe &lt;dialog&gt; element will handle focus if using a keyboard to\n\t\t\t\t\tnavigate without the need for additional JavaScript. On opening the\n\t\t\t\t\tmodal, focus will be placed on the first interactive item. If no\n\t\t\t\t\tinteractive item exists then the focus is placed on the modal itself.\n\t\t\t\t\tAll content behind the modal is made inert. Using the Escape key\n\t\t\t\t\tcloses the modal. However, clicking on the modal backdrop does not\n\t\t\t\t\tautomatically close the modal.\n\t\t\t\t</p>\n\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button id=\"openDialogBtn\">Open dialog</button>\n<dialog id=\"dialog\" aria-labelledby=\"dialog_heading\">\n  <h2 id=\"dialog_heading\">This is a heading</h2>\n  <p>This is some placeholder text within the dialog.</p>\n  <button type=\"button\" id=\"cancelBtn\">Cancel</button>\n</dialog>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<h3>CSS</h3>\n\t\t\t\t<p>\n\t\t\t\t\tThe modal comes with some basic built in styles. The backdrop can be\n\t\t\t\t\tcustomised using the ::backdrop pseudo-element. Dialog styles can be\n\t\t\t\t\toverwritten by styling the dialog element directly.\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`dialog::backdrop {\n  background: rgb(0 0 0 / 70%);\n}\n\ndialog {\n  border: 1px solid #000;\n  box-shadow: 0 19px 38px rgb(0 0 0 / 12%), 0 15px 12px rgb(0 0 0 / 22%);\n}`}\n\t\t\t\t\tlanguageType={\"css\"}\n\t\t\t\t/>\n\t\t\t\t<h3>JavaScript</h3>\n\t\t\t\t<p>\n\t\t\t\t\tUsing the showModal() method will open the dialog element in a modal\n\t\t\t\t\twindow (on top of the other content) and apply an implicit state of\n\t\t\t\t\taria-modal=\"true\". The modal can be closed with the close() method. No\n\t\t\t\t\textra JavaScript is needed to handle keyboard focus, making background\n\t\t\t\t\telements inert or closing the modal with the Escape key.\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`const openDialogBtn = document.getElementById(\"openDialogBtn\");\nconst dialog = document.getElementById(\"dialog\");\nconst cancelBtn = document.getElementById(\"cancelBtn\");\n\nopenDialogBtn.addEventListener(\"click\", () => dialog.showModal());\ncancelBtn.addEventListener(\"click\", () => dialog.close());`}\n\t\t\t\t\tlanguageType={\"javascript\"}\n\t\t\t\t/>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"customModals\" title=\"Custom Modals\">\n\t\t\t\t<p>\n\t\t\t\t\tIf you need to support browsers older than those listed above, then\n\t\t\t\t\tyou may need to build a custom modal component. In this case you will\n\t\t\t\t\tneed to add accessible information yourself.\n\t\t\t\t</p>\n\t\t\t\t<h3>HTML</h3>\n\t\t\t\t<p>\n\t\t\t\t\tIn this case, the div used to create the modal is given a\n\t\t\t\t\trole=\"dialog\" to indicate that this is a modal. It is labelled with\n\t\t\t\t\taria-labelledby so that it announces the heading when the modal\n\t\t\t\t\tappears. It is also given a tabindex=\"-1\" so that focus can be\n\t\t\t\t\tmanually handled with JavaScript.\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<div id=\"wrapper\">  \n  <button type=\"button\" id=\"openModal\">Open Modal</button>\n</div>\n\n<div class=\"modalBackground hidden\"></div>\n<div role=\"dialog\" id=\"modal\" aria-labelledby=\"modal_heading\" class=\"hidden\" tabindex=\"-1\">\n   <h2 id=\"modal_heading\">This is a heading</h2>\n   <p>This is some placeholder text within the modal.</p>\n   <button type=\"button\" id=\"cancelBtn\">Cancel</button>\n</div>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<h3>CSS</h3>\n\t\t\t\t<p>\n\t\t\t\t\tFor this modal we can use the [role=\"dialog] attribute to add the\n\t\t\t\t\tstyling. All of the positioning needs to be added as none of it is\n\t\t\t\t\tinbuilt, unlike the dialog element.\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`.hidden {\n  display: none;\n}\n\n[role=\"dialog\"] {\n  position: absolute;\n  padding: 15px;\n  border: 1px solid #000;\n  background-color: #fff;\n  min-width: 300px;\n  top: 2rem;\n  left: 50vw; \n  transform: translateX(-50%); \n  overflow: hidden;\n  box-shadow: 0 19px 38px rgb(0 0 0 / 12%), 0 15px 12px rgb(0 0 0 / 22%);\n  }\n\n.modalBackground {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgb(0 0 0 / 70%);\n}\n`}\n\t\t\t\t\tlanguageType={\"css\"}\n\t\t\t\t/>\n\t\t\t\t<h3>JavaScript</h3>\n\t\t\t\t<p>\n\t\t\t\t\tIn a custom modal you need to handle focus and inert manually. When\n\t\t\t\t\tthe modal is opened, focus moves from the button to something inside\n\t\t\t\t\tthe modal. In this case it moves to the modal itself, but it could\n\t\t\t\t\talso move to the heading or the first interactive element. The page\n\t\t\t\t\tcontent is wrapped in a div with id=\"wrapper\" so can be selected. Once\n\t\t\t\t\tthe modal is open the inert attribute is applied to the main content\n\t\t\t\t\tso that focus is trapped within the modal.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tWhen the modal is closed, the inert attribute needs to be removed from\n\t\t\t\t\tthe main content. This must happen before you set focus back to the\n\t\t\t\t\topening button. If not, then the button won't be found. An event\n\t\t\t\t\tlistener also needs adding for the Escape key so that it also runs the\n\t\t\t\t\tcloseModal function. In this custom component it is also possible to\n\t\t\t\t\tadd an event to the modal backdrop to close the modal on click.\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`const wrapper = document.getElementById(\"wrapper\")\nconst openModalBtn = document.getElementById(\"openModal\");\nconst cancelBtn = document.getElementById(\"cancelBtn\");\nconst modal = document.getElementById(\"modal\");\nconst modalBackground = document.querySelector(\".modalBackground\");\n\n\nconst openModal = () => {\n  modal.classList.remove(\"hidden\");\n  modalBackground.classList.remove(\"hidden\");\n  modal.focus();\n  wrapper.setAttribute(\"inert\", \"\");  \n}\n\nconst closeModal = () => {\n modal.classList.add(\"hidden\");\n modalBackground.classList.add(\"hidden\");\n wrapper.removeAttribute(\"inert\")\n openModalBtn.focus()\n}\n\nopenModalBtn.addEventListener(\"click\", openModal)\ncancelBtn.addEventListener(\"click\", closeModal)\nmodalBackground.addEventListener(\"click\", closeModal)\nwindow.addEventListener(\"keyup\", (e) => {\n  if (e.key === \"Escape\" && !modal.classList.contains(\"hidden\")) {\n    closeModal()\n  }\n})`}\n\t\t\t\t\tlanguageType={\"javascript\"}\n\t\t\t\t/>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"WCAGCriteria\" title=\"WCAG Criteria\">\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#keyboard\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.1.1 Keyboard\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#no-keyboard-trap\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.1.2 No Keyboard Trap\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#name-role-value\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t4.1.2 Name, role, value\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"otherResources\" title=\"Other Resources\">\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\tMDN web docs - The Dialog element\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://adrianroselli.com/2020/10/dialog-focus-in-screen-readers.html\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\tDialog Focus in Screen Readers by Adrian Roselli\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\tUse the dialog element (reasonably) by Scott O'Hara\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t<PageUpdated date=\"23rd June 2023\" />\n\t\t</>\n\t)\n}\n"
  },
  {
    "path": "components/ContentTemplates/NavigationTemplate.tsx",
    "content": "import { navigationPageNavigation } from \"../../data/pageNavigationLists\"\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\"\nimport { NavPage } from \"../NavPage/NavPage\"\nimport { PageUpdated } from \"../PageUpdated/PageUpdated\"\nimport { TemplateSection } from \"../TemplateSection/TemplateSection\"\n\n// TODO: Add information about using aria-current\n// TODO: Add working examples to complement the code examples\n\nexport const NavigationTemplate = () => {\n\treturn (\n\t\t<>\n\t\t\t<NavPage pageNavigation={navigationPageNavigation} />\n\t\t\t<TemplateSection sectionName=\"introduction\" title=\"Introduction\">\n\t\t\t\t<p>\n\t\t\t\t\tA website navigation is a section of the page aimed at helping you\n\t\t\t\t\tfind the main sections of a website. HTML has a semantic &lt;nav&gt;\n\t\t\t\t\telement which should be used around all navigations on the page. This\n\t\t\t\t\telement is a landmark element and can be used by screen reader users\n\t\t\t\t\tto more easily find their way around the page.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"simpleNav\" title=\"A Simple Navigation\">\n\t\t\t\t<p>\n\t\t\t\t\tIn its simplest form a navigation is a list of links to other pages\n\t\t\t\t\twithin a larger website or to other regions of the same page. A nav\n\t\t\t\t\telement wraps an unordered list of links in order to communicate how\n\t\t\t\t\tlong the navigation is.\n\t\t\t\t</p>\n\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<nav>\n\t<ul>\n\t\t<li>\n\t\t\t<a href\"/\">Link 1</a>\n\t\t</li>\n\t\t<li>\n\t\t\t<a href\"/\">Link 2</a>\n\t\t</li>\n\t\t<li>\n\t\t\t<a href\"/\">Link 3</a>\n\t\t</li>\n\t</ul>\n</nav>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName={\"hamburgerMenus\"} title={\"Hamburger Menus\"}>\n\t\t\t\t<p>\n\t\t\t\t\tOften on mobile there is not space for a full navigation and a common\n\t\t\t\t\tpattern is to use a hamburger menu. This is usually a button with an\n\t\t\t\t\ticon that looks like three layers of a hamburger and represents the\n\t\t\t\t\tplace to find the navigation. Pressing the button opens the navigation\n\t\t\t\t\tand often the icon will change to a cross to signify a close button.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tTo make a hamburger menu accessible it must be reachable and operable\n\t\t\t\t\tby keyboard only. If a button element is used then this will happen\n\t\t\t\t\tautomatically. It should have a clear label stating the function of\n\t\t\t\t\tthe button and it should also announce whether it is opened or closed\n\t\t\t\t\tto screen reader users. For this, aria-label and aria-expanded are\n\t\t\t\t\tuseful and JavaScript will be needed to toggle the navigation open and\n\t\t\t\t\tclosed.\n\t\t\t\t</p>\n\t\t\t\t{\n\t\t\t\t\t// TODO: Fix this code block!\n\t\t\t\t}\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<button id=\"hamburgerMenu\" class=\"navButton\" aria-label=\"Navigation menu\" aria-expanded=\"false\" aria-controls=\"primaryNav\">\n\tMenu\n</button>\n<nav id=\"primaryNav\" class=\"hidden\">\n\t<ul class=\"primaryNavList\">\n\t\t<li>\n\t\t\t<a href=\"#\">Item 1</a>\n\t\t</li>\n\t\t<li>\n\t\t\t<a href=\"#\">Item 2</a>\n\t\t</li>\n\t\t<li>\n\t\t\t<a href=\"#\">Item 3</a>\n\t\t</li>\n\t</ul>\n</nav>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`.navButton {\n  position: relative;\n}\n\n.primaryNavList {\n  position: absolute;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  border: 1px solid black;\n  width: 10rem;\n  z-index: 1;\n}\n\n.primaryNavList li {\n  padding: 1rem;\n}\n\n.hidden {\n  display: none;\n}`}\n\t\t\t\t\tlanguageType={\"css\"}\n\t\t\t\t/>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`const navButton = document.getElementById(\"hamburgerMenu\");\nconst disclosure = document.getElementById(\"primaryNav\");\nconst listItems = disclosure.querySelectorAll(\"li a\");\n\nfunction openNavigation() {\n  navButton.setAttribute(\"aria-expanded\", \"true\");\n  disclosure.classList.remove(\"hidden\");\n}\n\nfunction closeNavigation() {\n  navButton.setAttribute(\"aria-expanded\", \"false\");\n  disclosure.classList.add(\"hidden\");\n}\n\nfunction toggleNavigation() {\n  const open = navButton.getAttribute(\"aria-expanded\");\n  open === \"false\" ? openNavigation() : closeNavigation();\n}\n\n// This function closes an open disclosure if a user tabs away from the last anchor element in the list. It is reliant on the ul container having a class to check whether the relatedTarget is within the disclosure. If not, it will close.\nfunction handleBlur() {\n  const navList = event.currentTarget.closest(\".primaryNavList\");\n  if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {\n    closeNavigation();\n  }\n}\n\nnavButton.addEventListener(\"click\", toggleNavigation);\n\n// add event to the last item in the nav list to trigger the disclosure to close if the user tabs out of the disclosure\nlistItems[listItems.length - 1].addEventListener(\"blur\", handleBlur);\n\n// Close the disclosure if a user presses the escape key\nwindow.addEventListener(\"keyup\", (e) => {\n  if (e.key === \"Escape\") {\n    navButton.focus();\n    closeNavigation();\n  }\n});`}\n\t\t\t\t\tlanguageType={\"javascript\"}\n\t\t\t\t/>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName={\"megaMenus\"} title={\"Mega Menus\"}>\n\t\t\t\t<p>\n\t\t\t\t\tMega menus are more complex navigations with nested links to different\n\t\t\t\t\tsections and pages. Examples can often be found on popular clothing\n\t\t\t\t\tchain websites.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tThe top level of a mega menu is usually broken up into broad\n\t\t\t\t\tcategories. These categories can be made with buttons that trigger a\n\t\t\t\t\tpopup to open when pressed. The list of navigation links is then\n\t\t\t\t\tshown.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIn the example below a very simple \"Mega Menu\" is shown with only two\n\t\t\t\t\tsections. These can be extended as necessary.\n\t\t\t\t</p>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<nav>\n  <ul class=\"nav-list\">\n    <li class=\"nav-group\">\n      <button id=\"navItem1\" class=\"navItem\" aria-expanded=\"false\" aria-controls=\"disclosure1\">Nav 1 &#9660;</button>\n      <ul class=\"disclosure hidden\" id=\"disclosure1\">\n        <li>\n          <a href=\"#\">Dropdown 1 - item 1</a>\n        </li>\n        <li>\n          <a href=\"#\">Dropdown 1 - item 2</a>\n        </li>\n        <li>\n          <a href=\"#\">Dropdown 1 - item 3</a>\n        </li>\n      </ul>\n    </li>\n    <li class=\"nav-group\">\n      <button id=\"navItem2\" class=\"navItem\" aria-expanded=\"false\" aria-controls=\"disclosure2\">Nav list 2 &#9660;</button>\n      <ul class=\"disclosure hidden\" id=\"disclosure2\">\n        <li>\n          <a href=\"#\">Dropdown 2 - item 1</a>\n        </li>\n        <li>\n          <a href=\"#\">Dropdown 2 - item 2</a>\n        </li>\n      </ul>\n    </li>\n  </ul>\n</nav>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`.disclosure {\n  position: absolute;\n  border: 1px solid black;\n  width: 12rem;\n  padding: 0.5rem 1rem;\n  z-index: 1;\n}\n\n.disclosure li {\n  margin: 0.5rem 0;\n}\n\n.hidden {\n  display: none;\n}`}\n\t\t\t\t\tlanguageType={\"css\"}\n\t\t\t\t/>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`const navButtons = document.querySelectorAll(\".navItem\");\nconst disclosures = document.querySelectorAll(\".disclosure\");\n\nfunction openNavigation(button) {\n  button.setAttribute(\"aria-expanded\", \"true\");\n  // The ul is a direct sibling to the button\n  const disclosure = button.nextElementSibling;\n  disclosure.classList.remove(\"hidden\");\n}\n\nfunction closeNavigation(button) {\n  button.setAttribute(\"aria-expanded\", \"false\");\n  const disclosure = button.nextElementSibling;\n  disclosure.classList.add(\"hidden\");\n}\n\nfunction toggleNavigation(index) {\n  // First we close any open dropdowns not related to the current button in focus by looping over all nav buttons\n  navButtons.forEach((button, buttonIndex) => {\n    if (buttonIndex != index) {\n      closeNavigation(button);\n    }\n  });\n  const currentButton = event.target;\n  const open = currentButton.getAttribute(\"aria-expanded\");\n  open === \"false\"\n    ? openNavigation(currentButton)\n    : closeNavigation(currentButton);\n}\n\n// This function closes an open disclosure if a user tabs away from the last anchor element in the list. It is reliant on the top-level list item of the top level ul having a class to find the group containing button + disclosure it controls\nfunction handleBlur(button) {\n  const navList = event.currentTarget.closest(\".nav-group\");\n  if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {\n    closeNavigation(button);\n  }\n}\n\n// Adds the toggle event to every top level button\nnavButtons.forEach((button, index) => {\n  button.addEventListener(\"click\", () => toggleNavigation(index));\n});\n\n// This adds the handleBlur event to the last anchor element in each disclosure\ndisclosures.forEach((disclosure) => {\n  const listItems = disclosure.querySelectorAll(\"li a\");\n  listItems[listItems.length - 1].addEventListener(\"blur\", (event) => {\n    handleBlur(disclosure.previousElementSibling);\n  });\n});\n\n// This adds a global event listener to close any open disclosures when the escape key is pressed\nwindow.addEventListener(\"keyup\", (e) => {\n  if (e.key === \"Escape\") {\n    const navButtonsArr = Array.from(navButtons);\n    const currentOpenButtonIndex = navButtonsArr.findIndex(\n      (button) => button.getAttribute(\"aria-expanded\") === \"true\"\n    );\n    // If there is an open disclosure, close it and send focus back to the button that controls it.\n    if (currentOpenButtonIndex >= 0) {\n      const currentOpenButton = navButtons[currentOpenButtonIndex];\n      currentOpenButton.focus();\n      closeNavigation(currentOpenButton);\n    }\n  }\n});`}\n\t\t\t\t\tlanguageType={\"javascript\"}\n\t\t\t\t/>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName={\"linksOrder\"} title={\"Order of Links\"}>\n\t\t\t\t<p>\n\t\t\t\t\tTo help users find their way around easily, it's important that the\n\t\t\t\t\trelative order of links remains the same across all pages within a web\n\t\t\t\t\tsite.\n\t\t\t\t</p>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection\n\t\t\t\tsectionName={\"multipleNavs\"}\n\t\t\t\ttitle={\"Multiple Navigations Per Page\"}>\n\t\t\t\t<p>\n\t\t\t\t\tIt is common to have more than one navigation per page, for example a\n\t\t\t\t\tprimary navigation that takes people between different pages of the\n\t\t\t\t\twebsite and a secondary navigation that takes people to different\n\t\t\t\t\tsections within a page.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tWhen there are multiple navigations using the nav element it is\n\t\t\t\t\timportant to differentiate them for screen reader users by labelling\n\t\t\t\t\tthem. Use aria-label or aria-labelledby to let screen reader users\n\t\t\t\t\tknow the different functions of the navigation elements.\n\t\t\t\t</p>\n\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<nav aria-label=\"Site\">\n...\n</nav>\n`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t\t<CodeBlock\n\t\t\t\t\tcodeSnippet={`<nav aria-label=\"Within page\">\n...\n</nav>`}\n\t\t\t\t\tlanguageType={\"html\"}\n\t\t\t\t/>\n\t\t\t</TemplateSection>\n\t\t\t<TemplateSection sectionName=\"WCAGCriteria\" title=\"WCAG Criteria\">\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#info-and-relationships\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.3.1 Info and Relationships\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#reflow\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.4.10 Reflow\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t1.4.13 Content on Hover and Focus\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#keyboard\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.1.1 Keyboard\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#link-purpose-in-context\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.4 Link Purpose (in Context)\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#focus-visible\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.7 Focus visible\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#location\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t2.4.8 Location\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#consistent-navigation\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t3.2.3 Consistent Navigation\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/WCAG21/#name-role-value\"\n\t\t\t\t\t\t\tclassName=\"blockLink\">\n\t\t\t\t\t\t\t4.1.2 Name, Role, Value\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection>\n\t\t\t{/* <TemplateSection sectionName=\"otherResources\" title=\"Other Resources\">\n\t\t\t\t<ul className=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a href=\"#\" className=\"blockLink\">\n\t\t\t\t\t\t\t###\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</TemplateSection> */}\n\t\t\t<PageUpdated date=\"27th August 2023\" />\n\t\t</>\n\t)\n}\n"
  },
  {
    "path": "components/ContentTemplates/PaginationTemplate.tsx",
    "content": "import { WorkInProgress } from \"../WorkInProgress/WorkInProgress\"\n\nexport const PaginationTemplate = () => {\n\treturn <WorkInProgress />\n}\n"
  },
  {
    "path": "components/ContentTemplates/TablesTemplate.tsx",
    "content": "import { WorkInProgress } from \"../WorkInProgress/WorkInProgress\"\n\nexport const TablesTemplate = () => {\n\treturn <WorkInProgress />\n}\n"
  },
  {
    "path": "components/ContentTemplates/VideoTemplate.tsx",
    "content": "import { WorkInProgress } from \"../WorkInProgress/WorkInProgress\"\n\nexport const VideoTemplate = () => {\n\treturn <WorkInProgress />\n}\n"
  },
  {
    "path": "components/CopyCodeBlock/CopyCodeBlock.module.css",
    "content": ".codeCopyBtn {\n\tcolor: var(--text);\n\tbackground-color: var(--primaryLt);\n\tpadding: 4px 8px;\n\tposition: absolute;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.25rem;\n\tborder: none;\n\tborder-radius: var(--borderRadius);\n\tright: 14px;\n\ttop: 18px;\n\tfont-size: 0.8rem;\n\tcursor: pointer;\n}\n"
  },
  {
    "path": "components/CopyCodeBlock/CopyCodeBlock.tsx",
    "content": "import { useState } from \"react\"\nimport { FaCopy, FaCheckSquare } from \"react-icons/fa\"\nimport styles from \"./CopyCodeBlock.module.css\"\n\ninterface CodeSnippet {\n\tcode: string\n}\n\nconst CopyCodeBlock = ({ code }: CodeSnippet) => {\n\tconst [copyOk, setCopyOk] = useState(false)\n\n\tconst handleClick = () => {\n\t\tnavigator.clipboard.writeText(code)\n\n\t\tsetCopyOk(true)\n\t\tsetTimeout(() => {\n\t\t\tsetCopyOk(false)\n\t\t}, 3000)\n\t}\n\n\treturn (\n\t\t<button\n\t\t\tclassName={styles.codeCopyBtn}\n\t\t\tonClick={handleClick}\n\t\t\taria-label=\"Copy code snippet to clipboard\">\n\t\t\t{copyOk ? (\n\t\t\t\t<>\n\t\t\t\t\t<FaCheckSquare />\n\t\t\t\t\tCopied\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<FaCopy />\n\t\t\t\t\tCopy\n\t\t\t\t</>\n\t\t\t)}\n\t\t</button>\n\t)\n}\n\nexport default CopyCodeBlock\n"
  },
  {
    "path": "components/Footer/Footer.module.css",
    "content": ".footer {\n    background-color: var(--bg);\n    padding: 16px;\n    color: var(--text);\n    margin-top: 2rem;\n    border-top: 1px solid var(--primaryLt);\n}\n\n\n.footerList {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    line-height: 1.6;\n}\n\n.footerList li {\n    margin: 14px 0 14px 0;\n}\n\n.footerLink, .footerLink:visited {\n    text-decoration: none;\n    font-size: 0.9rem;\n}\n\n.footerLink:hover {\n    text-decoration: underline;\n}\n\n.footerBottom {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin: 0rem;\n    padding: 16px 0 0 0;\n}\n\n.footerCopyrightText {\n    margin: 0;\n    font-size: 0.9rem;\n}\n\n.footerLogos {\n    color: var(--text)\n}\n\n@media only screen and (min-width: 55rem) {\n\n    .footerList {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;  \n    }\n    \n    .footerList li {\n        margin: 0;\n    }\n    \n} \n"
  },
  {
    "path": "components/Footer/Footer.tsx",
    "content": "import Link from \"next/link\"\nimport styles from \"./Footer.module.css\"\nimport { BsGithub, BsBoxArrowUpRight } from \"react-icons/bs\"\n\nexport const Footer = () => {\n\treturn (\n\t\t<footer className={styles.footer}>\n\t\t\t<div className={styles.footerTop}>\n\t\t\t\t<ul className={styles.footerList}>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<Link href=\"/about\" className={styles.footerLink}>\n\t\t\t\t\t\t\tAbout the maintainers\n\t\t\t\t\t\t</Link>\n\t\t\t\t\t</li>\n\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://github.com/AccessibleForAll/AccessibleWebDev/blob/main/CONTRIBUTING.md\"\n\t\t\t\t\t\t\tclassName={styles.footerLink}>\n\t\t\t\t\t\t\tBecome a Contributor\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"https://github.com/sponsors/EmmaDawsonDev\"\n\t\t\t\t\t\t\tclassName={styles.footerLink}>\n\t\t\t\t\t\t\tSupport Us\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"mailto:emma.l.dawson@gmail.com\"\n\t\t\t\t\t\t\tclassName={styles.footerLink}>\n\t\t\t\t\t\t\tContact Us\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<Link href=\"/\" className={styles.footerLink}>\n\t\t\t\t\t\t\tAccessibility Statement - coming soon\n\t\t\t\t\t\t</Link>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t\t<div className={styles.footerBottom}>\n\t\t\t\t<p className={styles.footerCopyrightText}>\n\t\t\t\t\t© Accessible Web Dev by <strong>Accessible For All</strong>. Making\n\t\t\t\t\taccessibility accessible for everyone!\n\t\t\t\t</p>\n\n\t\t\t\t<a href=\"https://github.com/AccessibleForAll\">\n\t\t\t\t\t<BsGithub\n\t\t\t\t\t\tclassName={styles.footerLogos}\n\t\t\t\t\t\tsize=\"1.5rem\"\n\t\t\t\t\t\taria-label=\"Github\"\n\t\t\t\t\t/>\n\t\t\t\t</a>\n\t\t\t</div>\n\t\t</footer>\n\t)\n}\n"
  },
  {
    "path": "components/Header/Header.module.css",
    "content": ".topBanner {\n\tbackground-color: var(--bg);\n\tcolor: var(--text);\n\theight: var(--headerHeight);\n\twidth: 100%;\n\tpadding: 0 16px;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tposition: fixed;\n\ttop: 0;\n\tborder-bottom: 1px solid var(--primaryLt);\n\tz-index: 1;\n}\n\n.topBanner a {\n\ttext-decoration: none;\n\tfont-weight: bold;\n}\n\n.buttonsContainer {\n\tdisplay: flex;\n\tgap: 0.5rem;\n\talign-items: center;\n\tposition: relative;\n}\n\n.topBanner button {\n\tcursor: pointer;\n}\n\n.hamburgerBtn {\n\tdisplay: grid;\n\tplace-items: center;\n\tborder: none;\n\tpadding: 0;\n\tbackground-color: transparent;\n\tcolor: var(--text);\n}\n\n\n\n@media (min-width: 800px) {\n\t.topBanner .hamburgerBtn {\n\t\tdisplay: none;\n\t}\n\n}\n\n"
  },
  {
    "path": "components/Header/Header.tsx",
    "content": "import Link from \"next/link\"\nimport { IoMenuSharp, IoCloseSharp } from \"react-icons/io5\"\nimport { ThemeSwitcher } from \"../ThemeSwitcher/ThemeSwitcher\"\n\nimport styles from \"./Header.module.css\"\n\nexport interface IHeaderProps {\n\thandleNavClick: () => void\n\tshowNavMobile: boolean\n}\n\nexport const Header = ({ handleNavClick, showNavMobile }: IHeaderProps) => {\n\treturn (\n\t\t<>\n\t\t\t<header>\n\t\t\t\t<div className={styles.topBanner}>\n\t\t\t\t\t<Link href=\"/\">AWD</Link>\n\t\t\t\t\t<div className={styles.buttonsContainer}>\n\t\t\t\t\t\t<ThemeSwitcher />\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName={styles.hamburgerBtn}\n\t\t\t\t\t\t\tonClick={handleNavClick}\n\t\t\t\t\t\t\taria-label=\"Navigation menu\"\n\t\t\t\t\t\t\taria-expanded={showNavMobile}>\n\t\t\t\t\t\t\t{!showNavMobile && (\n\t\t\t\t\t\t\t\t<IoMenuSharp size=\"1.5rem\" aria-hidden=\"true\" />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{showNavMobile && (\n\t\t\t\t\t\t\t\t<IoCloseSharp size=\"1.5rem\" aria-hidden=\"true\" />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</header>\n\t\t</>\n\t)\n}\n"
  },
  {
    "path": "components/Layout/Layout.module.css",
    "content": ".layoutContainer {\n  display: flex;\n  min-height: calc(100vh - var(--headerHeight));\n  margin-top: 3rem;\n}\n\n.layoutContainer main {\n\tpadding: 16px;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.columnContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  \n  \n}\n\n@media (min-width: 800px) {\n  .columnContainer {    \n    flex-grow: 1; \n    margin-left: 15rem;  \n  }\n}"
  },
  {
    "path": "components/Layout/Layout.tsx",
    "content": "import { useState } from \"react\"\nimport { Footer } from \"../Footer/Footer\"\nimport { Header } from \"../Header/Header\"\nimport { NavPrimary } from \"../Nav/NavPrimary\"\nimport { NavPrimaryMobile } from \"../Nav/NavPrimaryMobile\"\nimport { SkipLink } from \"../SkipLink/SkipLink\"\nimport styles from \"./Layout.module.css\"\n\ninterface ILayoutProps {\n\tactiveNavLink: string\n\tchildren: JSX.Element\n}\n\nexport const Layout = ({ activeNavLink, children }: ILayoutProps) => {\n\tconst [showNavMobile, setShowNavMobile] = useState<boolean>(false)\n\n\tconst handleNavClick = () => {\n\t\tsetShowNavMobile((prevState) => !prevState)\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<SkipLink />\n\t\t\t<Header handleNavClick={handleNavClick} showNavMobile={showNavMobile} />\n\t\t\t<div className={styles.layoutContainer}>\n\t\t\t\t<NavPrimary activeNavLink={activeNavLink} />\n\t\t\t\t{showNavMobile && (\n\t\t\t\t\t<NavPrimaryMobile\n\t\t\t\t\t\tactiveNavLink={activeNavLink}\n\t\t\t\t\t\thandleNavClick={handleNavClick}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<div className={styles.columnContainer}>\n\t\t\t\t\t<main id=\"main\">{children}</main>\n\t\t\t\t\t<Footer />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t)\n}\n"
  },
  {
    "path": "components/MaintainerCard/MaintainerCard.module.css",
    "content": ".maintainerContainer {\n    align-items: center;\n    border: 0.15rem solid var(--primaryLt);\n    border-radius: 0.5rem;\n    display: flex;\n    flex-direction: column;\n    margin: 4.5rem 0 0 0;\n    padding: 1rem;\n    width: 20rem;\n}\n\n.maintainerImage {\n    background-color: var(--primaryLt);\n    border-radius: 50%;\n    height: 8rem;\n    margin-top: -5rem;\n    position: absolute;\n    width: 8rem;\n}\n\n.maintainerFullName {\n    font-size: 2rem;\n    margin-bottom: 0;\n    margin-top: 3.5rem;\n}\n\n.maintainerDescription {\n    font-size: 1rem;\n    margin-top: 0.5rem;\n    align-self: center;\n}\n\n.linkButton {\n    background-color: var(--primaryLt);\n    border-radius: 5px;\n    cursor: pointer;\n    font-size: 1rem;\n    margin-top: 1rem;\n    padding: 0.5rem 1rem;\n    text-decoration: none;\n}\n"
  },
  {
    "path": "components/MaintainerCard/MaintainerCard.tsx",
    "content": "/* eslint-disable @next/next/no-img-element */\nimport styles from \"./MaintainerCard.module.css\"\nimport { IMaintainer } from \"../../data/maintainers\"\n\nexport interface IMaintainerCardProps {\n\tmaintainer: IMaintainer\n}\n\nexport const MaintainerCard = ({ maintainer }: IMaintainerCardProps) => {\n\tconst { image, fullName, description, githubLink } = maintainer\n\treturn (\n\t\t<section className={styles.maintainerContainer}>\n\t\t\t{image ? (\n\t\t\t\t<img className={styles.maintainerImage} src={image} alt={fullName} />\n\t\t\t) : (\n\t\t\t\t<p className={styles.maintainerImage}>{image}</p>\n\t\t\t)}\n\n\t\t\t<p className={styles.maintainerFullName}>{fullName}</p>\n\t\t\t<p className={styles.maintainerDescription}>{description}</p>\n\n\t\t\t<a className={styles.linkButton} href={githubLink}>\n\t\t\t\t{`${fullName}'s Github`}\n\t\t\t</a>\n\t\t</section>\n\t)\n}\n"
  },
  {
    "path": "components/Nav/NavItem.tsx",
    "content": "import Link from \"next/link\"\nimport styles from \"./NavPrimary.module.css\"\nimport { IPage } from \"../../data/pages\"\n\nexport interface INavItemProps {\n\tpage: IPage\n\tactiveNavLink: string\n\thandleNavClick?: () => void\n}\n\nexport const NavItem = ({\n\tpage,\n\tactiveNavLink,\n\thandleNavClick,\n}: INavItemProps) => {\n\tconst isLinkActive = activeNavLink === page.href\n\treturn (\n\t\t<li className={`${styles.navListItem} ${isLinkActive ? \"active\" : \"\"}`}>\n\t\t\t<Link\n\t\t\t\thref={page.href}\n\t\t\t\tonClick={handleNavClick}\n\t\t\t\taria-current={isLinkActive ? \"page\" : false}>\n\t\t\t\t{page.name}\n\t\t\t</Link>\n\t\t</li>\n\t)\n}\n"
  },
  {
    "path": "components/Nav/NavPrimary.module.css",
    "content": ".navPrimary {\n  display: none;  \n}\n\n.navPrimaryMobile {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: var(--headerHeight);\n  bottom: 0;\n  background-color: var(--bg);\n  z-index: 1;\n  overflow: scroll;\n}\n\n.navList {\n  margin: 8px 0 0 0;\n  padding: 0; \n}\n\n.navListItem {\n  list-style: none;\n  margin: 2px;\n  margin-left: 16px;\n}\n\n.navListItem a {\n  text-decoration: none;\n  padding: 8px;\n  display: inline-block;\n  border-radius: 5px;\n}\n\n.navListItem a:hover {\n  background-color: var(--primaryLt);\n  color: var(--text);\n}\n\n.navList a:focus {\n  background-color: var(--primary);\n  color: var(--invertText);\n}\n\n@media (min-width: 800px) {\n  .navPrimary {\n    width: 15rem;\n    display: block;\n    position: fixed;\n    overflow-y: auto;\n    height: calc(100vh - var(--headerHeight));\n    top: var(--headerHeight);\n    left: 0;\n    border-right: 1px solid var(--primaryLt);\n  }\n\n  .navPrimaryMobile {\n    display: none;\n  }\n}"
  },
  {
    "path": "components/Nav/NavPrimary.tsx",
    "content": "import { NavItem } from \"./NavItem\"\nimport { pages } from \"../../data/pages\"\nimport styles from \"./NavPrimary.module.css\"\n\nexport interface INavProps {\n\tactiveNavLink: string\n}\n\nexport const NavPrimary = ({ activeNavLink }: INavProps) => {\n\n\treturn (\n\t\t<nav aria-label=\"Primary\" className={styles.navPrimary}>\n\t\t\t<ul className={styles.navList}>\n\t\t\t\t{pages.map((page, index) =>(\n\t\t\t\t\t<NavItem\n\t\t\t\t\t        key={page.name + index}\n\t\t\t\t\t        page={page}\n\t\t\t\t\t        activeNavLink={activeNavLink}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</ul>\n\t\t</nav>\n\t)\n}\n"
  },
  {
    "path": "components/Nav/NavPrimaryMobile.tsx",
    "content": "import { NavItem } from \"./NavItem\"\nimport { pages } from \"../../data/pages\"\nimport styles from \"./NavPrimary.module.css\"\n\nexport interface INavProps {\n\tactiveNavLink: string\n\thandleNavClick: () => void\n}\n\nexport const NavPrimaryMobile = ({\n\tactiveNavLink,\n\thandleNavClick,\n}: INavProps) => {\n\treturn (\n\t\t<nav aria-label=\"Primary\" className={styles.navPrimaryMobile}>\n\t\t\t<ul className={styles.navList}>\n\t\t\t\t{pages.map((page, index) => (\n\t\t\t\t\t<NavItem\n\t\t\t\t\t\tkey={page.name + index}\n\t\t\t\t\t\tpage={page}\n\t\t\t\t\t\tactiveNavLink={activeNavLink}\n\t\t\t\t\t\thandleNavClick={handleNavClick}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</ul>\n\t\t</nav>\n\t)\n}\n"
  },
  {
    "path": "components/NavPage/NavPage.module.css",
    "content": ".pageNav {\n\tbackground-color: var(--highlight);\n\tpadding: 8px 16px;\n}\n\n.pageNavTitle {\n\tfont-weight: bold;\n\tfont-size: 1.1rem;\n\tcursor: pointer;\n}\n\n.pageNavList {\n\tlist-style: none;\n\tmargin: 8px 0;\n\tpadding: 0;\n\tline-height: 1.6;\n}\n\n.pageNavList li {\n\tmargin: 14px 0;\n}\n"
  },
  {
    "path": "components/NavPage/NavPage.tsx",
    "content": "import styles from \"./NavPage.module.css\"\nimport { IPageNavigationItem } from \"../../data/pageNavigationLists\"\n\ninterface INavPageProps {\n\tpageNavigation: IPageNavigationItem[]\n}\n\nexport const NavPage = ({ pageNavigation }: INavPageProps) => {\n\treturn (\n\t\t<details className={styles.pageNav}>\n\t\t\t<summary className={styles.pageNavTitle}>On This Page</summary>\n\n\t\t\t<nav aria-label=\"On This Page\">\n\t\t\t\t<ul className={styles.pageNavList}>\n\t\t\t\t\t{pageNavigation.map((item, index) => (\n\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t<a href={item.href}>{item.linkName}</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t</details>\n\t)\n}\n"
  },
  {
    "path": "components/PageUpdated/PageUpdated.module.css",
    "content": ".pageLastUpdated {\r\n\tmargin-top: 5rem;\r\n}\r\n\r\n@media (min-width: 800px) {\r\n\t.pageLastUpdated {\r\n\t\ttext-align: right;\r\n\t}\r\n}"
  },
  {
    "path": "components/PageUpdated/PageUpdated.tsx",
    "content": "import styles from \"./PageUpdated.module.css\"\ninterface IPageUpdatedProps {\n\tdate: string\n}\nexport const PageUpdated = ({ date }: IPageUpdatedProps) => (\n\t<p className={styles.pageLastUpdated}>\n\t\t<strong>Page last updated: </strong>\n\t\t{date}\n\t</p>\n)\n"
  },
  {
    "path": "components/SkipLink/SkipLink.module.css",
    "content": ".skipToMainContent {\n  display: flex;\n  justify-content: center;\n}\n\n.skipToMainContent a {\n  position: absolute;\n  color: var(--text);\n\tbackground-color: var(--bg);\n  text-decoration: none;\n  padding: 0.3rem;\n  border: 1px solid var(--primary);\n  z-index: 100;\n  transform: translateY(-500px); \n  transition: all .4s ease-in-out;\n}\n\n.skipToMainContent a:focus {\n  transform: translateY(8px);\n}\n"
  },
  {
    "path": "components/SkipLink/SkipLink.tsx",
    "content": "import styles from \"./SkipLink.module.css\"\n\nexport const SkipLink = () => (\n\t<div className={styles.skipToMainContent}>\n\t\t<a href=\"#main\">Skip to main content</a>\n\t</div>\n)\n"
  },
  {
    "path": "components/TemplateSection/TemplateSection.module.css",
    "content": ".infoSection {\n\tmargin-top: 2rem;\n\twidth: 100%;\n\tmax-width: 52rem;\n}"
  },
  {
    "path": "components/TemplateSection/TemplateSection.tsx",
    "content": "import { ReactNode } from \"react\"\nimport styles from \"./TemplateSection.module.css\"\n\ninterface ITemplateSectionProps {\n\tsectionName: string\n\ttitle: string\n\tchildren: ReactNode\n}\n\nexport const TemplateSection = ({\n\tsectionName,\n\ttitle,\n\tchildren,\n}: ITemplateSectionProps) => {\n\treturn (\n\t\t<section aria-labelledby={sectionName} className={styles.infoSection}>\n\t\t\t<h2 id={sectionName}>{title}</h2>\n\t\t\t{children}\n\t\t</section>\n\t)\n}\n"
  },
  {
    "path": "components/ThemeSwitcher/ThemeSwitcher.module.css",
    "content": ".themeBtn {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n\tborder: 1px solid var(--primaryLt);\n\tpadding: 0.2rem 0.5rem;\n\tborder-radius: var(--borderRadius);\n\tbackground-color: transparent;\n\tcursor: pointer;\n\tcolor: var(--text);\n\tfont-size: .8rem;\n}\n\n.themeSwitcher {\n\tposition: absolute;\n\ttop: 8px;\n\tright: 32px;\n\twidth: 10em;\n\tbackground-color: var(--bg);\n\tpadding: 0.5rem;\n\tborder: 1px solid var(--primaryLt);\n\tborder-radius: var(--borderRadius);\n\tlist-style: none;\n}\n\n.themeSwitcher li {\n\tmargin-bottom: 0.25rem;\n}\n\n.themeSwitcherBtn {\n\tbackground-color: none;\n\tcolor: var(--text);\n\tdisplay: flex;\n\tgap: 0.5rem;\n\talign-items: center;\n\tcursor: pointer;\n\tpadding: 0.5rem;\n\twidth: 100%;\n\tborder: none;\n\tbackground-color: var(--bg);\n\tfont-size: 0.8rem;\n}\n\n.themeSwitcher li.activeBtn {\n\tborder-left: 3px solid var(--primary);\n}\n\n.themeSwitcherBtn:hover {\n\tbackground-color: var(--primaryLt);\n\tfont-weight: bold;\n}\n\n.themeSwitcherBtn:focus {\n\tbackground-color: var(--primaryLt);\n\tfont-weight: bold;\n}\n\n@media (min-width: 800px) {\n\t.themeSwitcher {\n\t\ttop: 8px;\n\t\tright: 0;\n\t}\n}\n"
  },
  {
    "path": "components/ThemeSwitcher/ThemeSwitcher.tsx",
    "content": "import { useState, useRef, useEffect, FocusEvent } from \"react\"\nimport { BsCircleHalf } from \"react-icons/bs\"\nimport { useTheme } from \"next-themes\"\nimport useOnClickOutside from \"../../customHooks/useOnClickOutside\"\n\nimport styles from \"./ThemeSwitcher.module.css\"\nimport { themes } from \"./themes\"\n\nexport const ThemeSwitcher = () => {\n\tconst [showThemeSwitcher, setShowThemeSwitcher] = useState<boolean>(false)\n\tconst { theme, setTheme } = useTheme()\n\n\tconst buttonRef = useRef<HTMLButtonElement>(null)\n\tconst divRef = useRef<HTMLDivElement>(null)\n\n\tconst handleThemeSwitcher = () => {\n\t\tsetShowThemeSwitcher((prevState) => !prevState)\n\t}\n\n\tconst handleChangeTheme = (theme: string) => {\n\t\tsetTheme(theme)\n\t\thandleThemeSwitcher()\n\t\tbuttonRef.current?.focus()\n\t}\n\n\tconst handleThemeSwitcherKB = (e: { key: string }) => {\n\t\tif (e.key === \"Esc\" || e.key === \"Escape\") {\n\t\t\thandleThemeSwitcher()\n\t\t\tbuttonRef.current?.focus()\n\t\t}\n\t}\n\n\tconst handleBlur = (e: FocusEvent) => {\n\t\tif (!e.currentTarget.contains(e.relatedTarget) && showThemeSwitcher) {\n\t\t\tsetShowThemeSwitcher(false)\n\t\t}\n\t}\n\n\tconst handleClickOutside = () => {\n\t\tsetShowThemeSwitcher(false)\n\t}\n\n\tuseOnClickOutside(divRef, handleClickOutside)\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener(\"keyup\", handleThemeSwitcherKB)\n\n\t\treturn () => document.removeEventListener(\"keyup\", handleThemeSwitcherKB)\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [])\n\n\treturn (\n\t\t<div ref={divRef}>\n\t\t\t<button\n\t\t\t\tclassName={styles.themeBtn}\n\t\t\t\ttype=\"button\"\n\t\t\t\tid=\"themeSwitcherBtn\"\n\t\t\t\taria-controls=\"themeSwitcherMenu\"\n\t\t\t\tonClick={handleThemeSwitcher}\n\t\t\t\taria-expanded={showThemeSwitcher}\n\t\t\t\tref={buttonRef}>\n\t\t\t\t<BsCircleHalf\n\t\t\t\t\tclassName={styles.themeIcon}\n\t\t\t\t\tsize=\"1rem\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t/>\n\t\t\t\tTheme\n\t\t\t</button>\n\t\t\t{showThemeSwitcher && (\n\t\t\t\t<ul\n\t\t\t\t\tclassName={styles.themeSwitcher}\n\t\t\t\t\tid=\"themeSwitcherMenu\"\n\t\t\t\t\taria-labelledby=\"themeSwitcherBtn\"\n\t\t\t\t\tonBlur={handleBlur}>\n\t\t\t\t\t{themes.map(({ label, value, Icon }) => (\n\t\t\t\t\t\t<li key={label} className={theme === value ? styles.activeBtn : \"\"}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName={styles.themeSwitcherBtn}\n\t\t\t\t\t\t\t\tonClick={() => handleChangeTheme(value)}\n\t\t\t\t\t\t\t\taria-pressed={theme === value}>\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\tsize=\"0.7rem\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\tclassName={styles.themeIcon}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n"
  },
  {
    "path": "components/ThemeSwitcher/themes.ts",
    "content": "import { BsCircleHalf, BsFillSunFill, BsFillMoonFill } from \"react-icons/bs\"\n\nexport const themes = [\n\t{ label: \"Device settings\", value: \"system\", Icon: BsCircleHalf },\n\t{ label: \"Light mode\", value: \"light\", Icon: BsFillSunFill },\n\t{ label: \"Dark mode\", value: \"dark\", Icon: BsFillMoonFill },\n]\n"
  },
  {
    "path": "components/TipOfTheDay/TipOfTheDay.module.css",
    "content": ".card {\n\tbackground-color: var(--bg);\n\tborder: 1px solid var(--primaryLt);\n\tpadding: 1rem;\n\tborder-radius: 12px;\n\tcolor: var(--text);\n\tmax-width: 100%;\n}\n\n\n"
  },
  {
    "path": "components/TipOfTheDay/TipOfTheDay.tsx",
    "content": "import { useEffect, useState } from \"react\"\nimport styles from \"./TipOfTheDay.module.css\"\nimport { Tips } from \"../../data/tipsOfTheDay\"\n\ninterface ITip {\n\ttitle: string\n\tdescription: string\n\ttipLink: string\n\ttipLinkLabel: string\n}\n\nexport const TipOfTheDay = () => {\n\tconst [randomIndex, setRandomIndex] = useState<number>(0)\n\tconst [loading, setLoading] = useState<boolean>(true)\n\tconst tipIndex: ITip = Tips[randomIndex]\n\n\tuseEffect(() => {\n\t\tconst randomNumber = Math.floor(Math.random() * Tips.length)\n\n\t\tsetRandomIndex(randomNumber)\n\t\tsetLoading(false)\n\t}, [])\n\n\tconst createTipOfTheDay = () => {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<h2>Tip of the day: {tipIndex.title}</h2>\n\t\t\t\t<p>{tipIndex.description}</p>\n\t\t\t\t<a href={tipIndex.tipLink}>{tipIndex.tipLinkLabel}</a>\n\t\t\t</>\n\t\t)\n\t}\n\tconst tip = loading ? null : createTipOfTheDay()\n\n\treturn <div className={styles.card}>{tip}</div>\n}\n"
  },
  {
    "path": "components/WorkInProgress/WorkInProgress.module.css",
    "content": ".WIPContainer {\n  background-color: var(--highlight);\n  padding: 32px;\n}"
  },
  {
    "path": "components/WorkInProgress/WorkInProgress.tsx",
    "content": "import styles from \"./WorkInProgress.module.css\"\n\nexport const WorkInProgress = () => {\n\treturn (\n\t\t<section className={styles.WIPContainer}>\n\t\t\t<h2>This section is a work in progress</h2>\n\t\t\t<p>Please come back at a later date.</p>\n\t\t\t<a href=\"https://github.com/AccessibleForAll/AccessibleWebDev/discussions\">\n\t\t\t\tLet us know what information you're looking for.\n\t\t\t</a>\n\t\t</section>\n\t)\n}\n"
  },
  {
    "path": "customHooks/useOnClickOutside.ts",
    "content": "import { RefObject } from \"react\"\nimport { useEventListener } from \"usehooks-ts\"\n\ntype Handler = (event: MouseEvent) => void\n\nfunction useOnClickOutside<T extends HTMLElement = HTMLElement>(\n\tref: RefObject<T>,\n\thandler: Handler,\n\tmouseEvent: \"mousedown\" | \"mouseup\" = \"mousedown\"\n): void {\n\tuseEventListener(mouseEvent, (event) => {\n\t\tconst el = ref?.current\n\n\t\t// Do nothing if clicking ref's element or descendent elements\n\t\tif (!el || el.contains(event.target as Node)) {\n\t\t\treturn\n\t\t}\n\n\t\thandler(event)\n\t})\n}\n\nexport default useOnClickOutside\n"
  },
  {
    "path": "data/maintainers.ts",
    "content": "export interface IMaintainer {\n\timage: string\n\tfullName: string\n\tdescription: string\n\tgithubLink: string\n}\n\nexport const currentMaintainers: IMaintainer[] = [\n\t{\n\t\timage: \"https://avatars.githubusercontent.com/u/57045550?v=4&s=150\",\n\t\tfullName: \"Emma Dawson\",\n\t\tdescription:\n\t\t\t\"Emma is a full stack developer from Stockholm with a passion for accessibility and open source. She wants to make web accessibility easy to learn for everyone.\",\n\t\tgithubLink: \"https://github.com/EmmaDawsonDev\",\n\t},\n\t{\n\t\timage: \"https://avatars.githubusercontent.com/u/1682188?v=4&s=150\",\n\t\tfullName: \"Cristian Toffanin\",\n\t\tdescription:\n\t\t\t\"Cristian is a full stack developer based in the Netherlands. He's always curious and always learning. He's currently learning about accessibility (Emma's mentee).\",\n\t\tgithubLink: \"https://github.com/ctoffanin\",\n\t},\n]\n"
  },
  {
    "path": "data/pageNavigationLists.ts",
    "content": "export interface IPageNavigationItem {\n\tlinkName: string\n\thref: string\n}\n\nexport const audioPageNavigation: IPageNavigationItem[] = [\n\t{ linkName: \"Introduction\", href: \"#introduction\" },\n\t{ linkName: \"Transcripts\", href: \"#transcripts\" },\n\t{ linkName: \"Captions\", href: \"#captions\" },\n\t{ linkName: \"How To Add Closed Captions To Your Video?\", href: \"#howToAdd\" },\n\t{ linkName: \"Sign Language\", href: \"#signLanguage\" },\n\t{ linkName: \"Accessible media players\", href: \"#accessibleMediaPlayers\" },\n\t{ linkName: \"WCAG Criteria\", href: \"#WCAGCriteria\" },\n\t{ linkName: \"Other Resources\", href: \"#otherResources\" },\n]\n\nexport const breadcrumbsPageNavigation: IPageNavigationItem[] = [\n\t{ linkName: \"Introduction\", href: \"#introduction\" },\n\t{ linkName: \"HTML Structure\", href: \"#htmlStructure\" },\n\t{ linkName: \"Add Extra Information with ARIA\", href: \"#aria\" },\n\t{ linkName: \"Breadcrumbs Example\", href: \"#breadcrumbsExample\" },\n\t{ linkName: \"Styling Breadcrumbs\", href: \"#breadcrumbStyling\" },\n\t{ linkName: \"WCAG Criteria\", href: \"#WCAGCriteria\" },\n\t{ linkName: \"Other Resources\", href: \"#otherResources\" },\n]\n\nexport const buttonPageNavigation: IPageNavigationItem[] = [\n\t{ linkName: \"Introduction\", href: \"#introduction\" },\n\t{ linkName: \"Text Buttons\", href: \"#textButtons\" },\n\t{ linkName: \"Text and Icon Buttons\", href: \"#textAndIconButtons\" },\n\t{ linkName: \"Icon-only Buttons\", href: \"#iconOnlyButtons\" },\n\t{ linkName: \"Button States\", href: \"#buttonStates\" },\n\t{ linkName: \"Button or Link?\", href: \"#buttonOrLink\" },\n\t{ linkName: \"Touch Target Minimum\", href: \"#touchTargetMinimum\" },\n\t{ linkName: \"WCAG Criteria\", href: \"#WCAGCriteria\" },\n\t{ linkName: \"Other Resources\", href: \"#otherResources\" },\n]\n\nexport const captchasPageNavigation: IPageNavigationItem[] = [\n\t{\n\t\tlinkName: \"Introduction\",\n\t\thref: \"#introduction\",\n\t},\n\t{ linkName: \"What's the issue with CAPTCHAs?\", href: \"#captchaIssues\" },\n\t{ linkName: \"Accessible CAPTCHA\", href: \"#accessibleCAPTCHA\" },\n\t{ linkName: \"WCAG Criteria\", href: \"#WCAGCriteria\" },\n\t{ linkName: \"Other Resources\", href: \"#otherResources\" },\n]\n\nexport const imagePageNavigation: IPageNavigationItem[] = [\n\t{ linkName: \"Introduction\", href: \"#introduction\" },\n\t{ linkName: \"Text Alternatives\", href: \"#textAlternatives\" },\n\t{ linkName: \"Decorative Images\", href: \"#decorativeImages\" },\n\t{ linkName: \"Informative Images\", href: \"#informativeImages\" },\n\t{ linkName: \"Functional Images\", href: \"#functionalImages\" },\n\t{ linkName: \"How to write good alt text\", href: \"#goodAltText\" },\n\t{ linkName: \"Images of Text\", href: \"#imagesOfText\" },\n\t{ linkName: \"Images and Colour\", href: \"#imagesAndColour\" },\n\t{ linkName: \"Image Maps\", href: \"#imageMaps\" },\n\t// { linkName: \"Image Checklist\", href: \"#checklist\" },\n\t{ linkName: \"WCAG Criteria\", href: \"#WCAGCriteria\" },\n\t{ linkName: \"Other Resources\", href: \"#otherResources\" },\n]\n\nexport const headingsPageNavigation: IPageNavigationItem[] = [\n\t{ linkName: \"Introduction\", href: \"#intro\" },\n\t{ linkName: \"Why are HTML Headings Important?\", href: \"#whyHeadings\" },\n\t{\n\t\tlinkName: \"What Should Be Included in a Heading?\",\n\t\thref: \"#includedInHeadings\",\n\t},\n\t{ linkName: \"How to Write a Good Heading\", href: \"#goodHeadings\" },\n\t{\n\t\tlinkName: \"What Should We Avoid When Using Headings?\",\n\t\thref: \"#avoidHeadings\",\n\t},\n\t{ linkName: \"WCAG Criteria\", href: \"#WCAGCriteria\" },\n\t{ linkName: \"Test Your Knowledge\", href: \"#QuizQuestions\" },\n]\n\nexport const formsPageNavigation: IPageNavigationItem[] = [\n\t{ linkName: \"Introduction\", href: \"#introduction\" },\n\t{\n\t\tlinkName: \"What Should We Consider When Building Accessible Forms?\",\n\t\thref: \"#whatToConsider\",\n\t},\n\t{\n\t\tlinkName: \"Creating Simple, Understandable Forms\",\n\t\thref: \"#creatingForms\",\n\t},\n\t{\n\t\tlinkName: \"Keyboard Accessible Forms\",\n\t\thref: \"#keyboardAccessibleForms\",\n\t},\n\t{ linkName: \"Error Validation and Changes in State\", href: \"#formErrors\" },\n\t{ linkName: \"WCAG Criteria\", href: \"#WCAGCriteria\" },\n]\n\nexport const linkPageNavigation: IPageNavigationItem[] = [\n\t{ linkName: \"Introduction\", href: \"#introduction\" },\n\t{ linkName: \"Accessible Link Names\", href: \"#accessibleLinkNames\" },\n\t{ linkName: \"Link State and Style\", href: \"#linkStates\" },\n\t{ linkName: \"Image and Icon Links\", href: \"#linkImage\" },\n\t{ linkName: \"Touch Target Minimum\", href: \"#touchTargetMinimum\" },\n\t{ linkName: \"WCAG Criteria\", href: \"#WCAGCriteria\" },\n\t{ linkName: \"Other Resources\", href: \"#otherResources\" },\n]\n\nexport const modalPageNavigation: IPageNavigationItem[] = [\n\t{ linkName: \"Introduction\", href: \"#introduction\" },\n\t{ linkName: \"How a modal should work\", href: \"#howAModalShouldWork\" },\n\t{ linkName: \"Using <dialog>\", href: \"#usingDialog\" },\n\t{ linkName: \"Custom Modals\", href: \"#customModals\" },\n\t{ linkName: \"WCAG Criteria\", href: \"#WCAGCriteria\" },\n\t{ linkName: \"Other Resources\", href: \"#otherResources\" },\n]\n\nexport const navigationPageNavigation: IPageNavigationItem[] = [\n\t{ linkName: \"Introduction\", href: \"#introduction\" },\n\t{ linkName: \"A Simple Navigation\", href: \"#simpleNav\" },\n\t{ linkName: \"Hamburger Menus\", href: \"#hamburgerMenus\" },\n\t{ linkName: \"Mega Menus\", href: \"#megaMenus\" },\n\t{ linkName: \"Order of Links\", href: \"#linksOrder\" },\n\t{ linkName: \"Multiple Navigations Per Page\", href: \"#multipleNavs\" },\n\t{ linkName: \"WCAG Criteria\", href: \"#WCAGCriteria\" },\n\t//{ linkName: \"Other Resources\", href: \"#otherResources\" },\n]\n"
  },
  {
    "path": "data/pages.ts",
    "content": "export interface IPage {\n\tname: string\n\thref: string\n\tcontent?: string\n}\n\nexport const pages: IPage[] = [\n\t{ name: \"Home\", href: \"/\" },\n\t// { name: \"Alerts\", href: \"/alerts\", content: \"alerts\" },\n\t// {\n\t// \tname: \"Animations\",\n\t// \thref: \"/animations\",\n\t// \tcontent: \"animations\",\n\t// },\n\t{ name: \"Audio\", href: \"/audio\", content: \"audio\" },\n\t{ name: \"Breadcrumbs\", href: \"/breadcrumbs\", content: \"breadcrumbs\" },\n\t{ name: \"Buttons\", href: \"/buttons\", content: \"buttons\" },\n\t{\n\t\tname: \"CAPTCHAs\",\n\t\thref: \"/captchas\",\n\t\tcontent: \"captchas\",\n\t},\n\t// {\n\t// \tname: \"Charts\",\n\t// \thref: \"/charts\",\n\t// \tcontent: \"charts\",\n\t// },\n\t{ name: \"Forms\", href: \"/forms\", content: \"forms\" },\n\t{ name: \"Headings\", href: \"/headings\", content: \"headings\" },\n\t{ name: \"Icons\", href: \"/icons\", content: \"icons\" },\n\t{ name: \"Images\", href: \"/images\", content: \"images\" },\n\t{ name: \"Links\", href: \"/links\", content: \"links\" },\n\t// { name: \"Lists\", href: \"/lists\", content: \"lists\" },\n\t// { name: \"Menus\", href: \"/menus\", content: \"menus\" },\n\t{ name: \"Modals\", href: \"/modals\", content: \"modals\" },\n\t{ name: \"Navigation\", href: \"/navigation\", content: \"navigation\" },\n\t// { name: \"Pagination\", href: \"/pagination\", content: \"pagination\" },\n\t// { name: \"Tables\", href: \"/tables\", content: \"tables\" },\n\t// { name: \"Video\", href: \"/video\", content: \"video\" },\n]\n"
  },
  {
    "path": "data/tipsOfTheDay.ts",
    "content": "export interface ITips {\n\ttitle: string\n\tdescription: string\n\ttipLink: string\n\ttipLinkLabel: string\n}\n\nexport const Tips: ITips[] = [\n\t{\n\t\ttitle: \"Test with Assistive Technology\",\n\t\tdescription:\n\t\t\t\"Test your website using assistive technologies such as screen readers and keyboard-only navigation to identify and fix accessibility issues.\",\n\t\ttipLink: \"https://www.w3.org/WAI/test-evaluate/preliminary/\",\n\t\ttipLinkLabel: \"Read more about assistive technology...\",\n\t},\n\t{\n\t\ttitle: \"Make Forms Accessible\",\n\t\tdescription:\n\t\t\t\"Ensure that all form elements have labels, are navigable via keyboard, and provide clear instructions for users filling out the form.\",\n\t\ttipLink: \"https://www.w3.org/TR/WCAG21/#forms\",\n\t\ttipLinkLabel: \"Read more about forms...\",\n\t},\n\t{\n\t\ttitle: \"Provide Descriptive Links\",\n\t\tdescription:\n\t\t\t\"Use clear and descriptive link text that conveys the purpose and destination of the link, as screen readers often provide a list of links and users need to understand where each link will take them.\",\n\t\ttipLink:\n\t\t\t\"https://www.w3.org/WAI/tutorials/forms/labels/#descriptive-link-text\",\n\t\ttipLinkLabel: \"Read more about descriptive technologies...\",\n\t},\n\t{\n\t\ttitle: \"Use Sufficient Color Contrast\",\n\t\tdescription:\n\t\t\t\"Ensure that there is enough contrast between foreground and background colors to make text readable for users with low vision.\",\n\t\ttipLink: \"https://www.w3.org/TR/WCAG21/#contrast-minimum\",\n\t\ttipLinkLabel: \"Read more about color contrast...\",\n\t},\n\t{\n\t\ttitle: \"Ensure Keyboard Accessibility\",\n\t\tdescription:\n\t\t\t\"Make sure all interactive elements on your website can be accessed and used via keyboard alone, as some users may not be able to use a mouse or other pointing device.\",\n\t\ttipLink: \"https://www.w3.org/TR/WCAG21/#keyboard-accessible\",\n\t\ttipLinkLabel: \"Read more about keyboard accessibility...\",\n\t},\n\t{\n\t\ttitle: \"Use Semantic HTML\",\n\t\tdescription:\n\t\t\t\"Use appropriate HTML tags to help convey the meaning and structure of your content, which makes it easier for screen readers and other assistive technologies to navigate.\",\n\t\ttipLink: \"https://webaim.org/techniques/semanticstructure/\",\n\t\ttipLinkLabel: \"Read more about semantic HTML...\",\n\t},\n\t{\n\t\ttitle: \"Use Alt Text for Images\",\n\t\tdescription:\n\t\t\t\"Include descriptive text in the alt attribute of image tags to help screen readers and visually impaired users understand the content of the image.\",\n\t\ttipLink: \"https://www.w3.org/WAI/tutorials/images/\",\n\t\ttipLinkLabel: \"Read more about alt text...\",\n\t},\n]\n"
  },
  {
    "path": "docs-style-guide.md",
    "content": "# About this guide 👋\n\nWelcome to our simple and straightforward style guide! We created this guide for our community of tech and non-tech experts to ensure we communicate effectively and inclusively. This guide is divided into four sections:\n\n- 🌎 [Inclusive Language](inclusive-language)\n- 📝 [Grammar & Mechanics](grammar-and-mechanics)\n- 🤔 [Clarity](clarity)\n- ♿ [Accessibility](accessibility)\n\n## Inclusive Language 🌎\n\nInclusive language is an essential aspect of communication. It promotes equality, respects diversity, and avoids offense. Here are some best practices to follow:\n\n- Use gender-neutral words for common terms\n  - ❌ **Not this:** A maintainer should try to be kind yet constructive in **his** feedback.\n  - ✅ **Use this:** A maintainer should try to be kind yet constructive in **their** feedback.\n\n- Avoid using terms that have colonialistic or racist connotations.\n  - ❌ **Not this:** Contributors should push their pull requests to the **master** branch.\n  - ✅ **Use this:** Contributors should push their pull requests to the **main** branch.\n\n## Grammar & Mechanics 📝\n\nGrammar and mechanics help ensure that your writing is clear, concise, and easy to understand. Here are some best practices to follow:\n\n### Commas\n\n- Use commas when describing lists.\n  - ❌ **Not this:** You can also add your **timeline testimonials and upcoming events** that you are participating in.\n  - ✅ **Use this:** You can also add your **timeline, testimonials, and upcoming events** that you are participating in.\n\n- Use commas in introductory elements.\n  - ❌ **Not this:** **If you do not have one yet** you can create one for free with an email address and password.\n  - ✅ **Use this:** **If you do not have one yet,** you can create one for free with an email address and password.\n\n- Use commas before the seven, so-called, coordinating conjunctions (and, but, so, for, nor, yet, or) to separate two independent clauses.\n  - ❌ **Not this:** There are 4 ways you can add your profile **but** for this Quickstart, we will use the GitHub UI.\n  - ✅ **Use this:** There are 4 ways you can add your profile, **but** for this Quickstart, we will use the GitHub UI.\n\n### Capitalisation\n\n- Only capitalize terms that describe a product, its feature, the first letter of a sentence, or a person’s name.\n  - ❌ **Not this:** There are 4 ways you can add your profile, but for this **quickstart** we will use the **github ui**.\n  - ✅ **Use this:** There are 4 ways you can add your profile, but for this Quickstart, we will use the **GitHub UI**.\n\n## Clarity 🤔\n\nClarity in writing helps ensure that your audience understands your message and intentions. Here are some best practices to follow:\n\n### Active vs. Passive\n\nUsing the active voice in writing makes your message more direct and engaging.\n\n- ❌ **Not this:** This repo is **maintained** by a team of people.\n- ✅ **Use this:** A team of people **maintains** this repo.\n\n### Jargon\n\nUsing technical and coding jargon can alienate non-technical readers.\n\n- ❌ **Not this:** Before submitting your code review, it is always helpful to add comments such as **LGTM!** in the textbox.\n- ✅ **Use this:** Before submitting your code review, it is always helpful to add comments such as **Great job!** in the textbox.\n\n## Accessibility ♿\n\n### Bullet Points\n\n- Avoid describing things only by their color or position.\n  - ❌ **Not this:** see **the** **image** above.\n  - ✅ **Use this:** See **Image 2.2**.\n\n### Emojis\n\n- Avoid using emojis as bullet points or numbered lists.\n- ❌ **Not this:** 1️⃣ Fork the repository\n- 2️⃣ Visit the Accessibleforall repository\n  - ✅ **Use this:** **1.** Fork the repository\n- **2️.** Visit the Accessibleforall repository\n\n- Avoid using emojis in the middle of a sentence.\n  - ❌  **Not this:** There are 4️⃣ ways you can add your profile, but for this Quickstart we will use the GitHub UI.\n- ✅ **Use this:** There are **4** ways you can fix your profile, but for this tutorial, we will use the GitHub UI.\n\n- Use them sparingly at the end of a sentence.\n  - ❌ **Not this:** Join the conversation on our Discord community! 😀 😄 🎉\n  - ✅ **Use this:** Join the conversation on our Discord community! 😀\n\n### Headings\n\n- Use descriptive titles for headings.\n  - ❌ **Not this:** `<h1> Yoga</h1>`\n- ✅ **Use this:** `<h1>Yoga for Developers</h1>`\n\n- Place headings in sequential order.\n- ❌ **Not this:** `<h1>Yoga for Developers</h1>`\n  `<h3>What is Yoga?</h3>`\n  `<h2>The History of Yoga</h2>`\n  - ✅ **Use this:**  `<h1>Yoga for Developers</h1>`\n  `<h2>What is Yoga?</h2>`\n  `<h3>The History of Yoga</h3>`\n\n### Images\n\n- Use descriptive alt text for images.\n- ❌ **Not this:** `![Cat_2019-06-14.jpg](https://en.wikipedia.org/wiki/File:June_odd-eyed-cat.jpg)`\n- ✅ **Use this:**  `![A white cat with a blue eye and golden eye is sitting on a grey couch](https://en.wikipedia.org/wiki/File:June_odd-eyed-cat.jpg)`\n\nHave some ideas for improving the guide? Raise an issue on our [GitHub page](https://github.com/AccessibleForAll/AccessibleWebDev/issues/new/choose). We would love to receive your feedback!\n"
  },
  {
    "path": "next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
  },
  {
    "path": "next-i18next.config.js",
    "content": "module.exports = {\n\ti18n: {\n\t\tlocales: [\"en\", \"sv\"],\n\t\tdefaultLocale: \"en\",\n\t},\n}\n"
  },
  {
    "path": "next.config.js",
    "content": "/** @type {import('next').NextConfig} */\n\nconst { i18n } = require(\"./next-i18next.config\")\n\nconst nextConfig = {\n\treactStrictMode: true,\n\tswcMinify: true,\n\ti18n,\n}\n\nmodule.exports = nextConfig\n"
  },
  {
    "path": "package.json",
    "content": "{\n\t\"name\": \"accessible-web-dev\",\n\t\"version\": \"0.1.0\",\n\t\"private\": true,\n\t\"scripts\": {\n\t\t\"dev\": \"next dev\",\n\t\t\"build\": \"next build\",\n\t\t\"start\": \"next start\",\n\t\t\"lint\": \"next lint\",\n\t\t\"prepare\": \"husky install\"\n\t},\n\t\"dependencies\": {\n\t\t\"next\": \"^13.5.6\",\n\t\t\"next-i18next\": \"^12.1.0\",\n\t\t\"next-themes\": \"^0.2.1\",\n\t\t\"react\": \"^18.3.1\",\n\t\t\"react-dom\": \"^18.3.1\",\n\t\t\"react-icons\": \"^4.4.0\",\n\t\t\"react-syntax-highlighter\": \"^15.5.0\",\n\t\t\"usehooks-ts\": \"^2.7.2\"\n\t},\n\t\"devDependencies\": {\n\t\t\"@babel/core\": \"^7.19.3\",\n\t\t\"@types/node\": \"18.0.5\",\n\t\t\"@types/react\": \"18.0.15\",\n\t\t\"@types/react-dom\": \"18.0.6\",\n\t\t\"@types/react-syntax-highlighter\": \"^15.5.6\",\n\t\t\"@typescript-eslint/eslint-plugin\": \"^5.44.0\",\n\t\t\"babel-loader\": \"^8.2.5\",\n\t\t\"eslint\": \"8.20.0\",\n\t\t\"eslint-config-next\": \"^13.5.6\",\n\t\t\"eslint-config-prettier\": \"^8.5.0\",\n\t\t\"eslint-plugin-jsx-a11y\": \"^6.10.2\",\n\t\t\"husky\": \"^8.0.0\",\n\t\t\"lint-staged\": \"^13.0.3\",\n\t\t\"prettier\": \"^2.7.1\",\n\t\t\"typescript\": \"4.7.4\"\n\t},\n\t\"lint-staged\": {\n\t\t\"**/*.{js,jsx,ts,tsx}\": [\n\t\t\t\"eslint --fix\",\n\t\t\t\"prettier --write\"\n\t\t]\n\t}\n}\n"
  },
  {
    "path": "pages/404.tsx",
    "content": "/* eslint-disable @next/next/no-img-element */\nimport notFoundImage from \"../public/404.png\"\nimport Image from \"next/legacy/image\"\nimport Head from \"next/head\"\nimport { Layout } from \"../components/Layout/Layout\"\nimport { useTranslation } from \"next-i18next\"\nimport { serverSideTranslations } from \"next-i18next/serverSideTranslations\"\nimport { GetStaticProps } from \"next\"\n\nconst PageNotFound = () => {\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tconst { t } = useTranslation(\"common\")\n\treturn (\n\t\t<>\n\t\t\t<Head>\n\t\t\t\t<title>{`Page Not Found - Accessible Web Dev`}</title>\n\t\t\t\t<meta name=\"description\" content=\"404 - Page Not Found\" />\n\t\t\t</Head>\n\t\t\t<Layout activeNavLink={\"\"}>\n\t\t\t\t<>\n\t\t\t\t\t<h1>404 - Not Found</h1>\n\t\t\t\t\t<div className=\"center\">\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsrc={notFoundImage.src}\n\t\t\t\t\t\t\talt=\"Page not found\"\n\t\t\t\t\t\t\twidth={800}\n\t\t\t\t\t\t\theight={600}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t</Layout>\n\t\t</>\n\t)\n}\n\nexport const getStaticProps: GetStaticProps = async (context) => {\n\tconst locale: string = context?.locale || \"\"\n\n\treturn {\n\t\tprops: {\n\t\t\t...(await serverSideTranslations(locale, [\"common\"])),\n\t\t\t// Will be passed to the page component as props\n\t\t},\n\t}\n}\n\nexport default PageNotFound\n"
  },
  {
    "path": "pages/[content].tsx",
    "content": "import type { GetStaticPaths, GetStaticProps, NextPage } from \"next\"\n\nimport { Layout } from \"../components/Layout/Layout\"\nimport Head from \"next/head\"\nimport { capitalizeRoute } from \"../utils\"\nimport { pages } from \"../data/pages\"\nimport { useTranslation } from \"next-i18next\"\nimport { serverSideTranslations } from \"next-i18next/serverSideTranslations\"\n\n// Components\nimport { AlertsTemplate } from \"../components/ContentTemplates/AlertsTemplate\"\nimport { AnimationsTemplate } from \"../components/ContentTemplates/AnimationsTemplate\"\nimport { AudioTemplate } from \"../components/ContentTemplates/AudioTemplate\"\nimport { BreadcrumbsTemplate } from \"../components/ContentTemplates/BreadcrumbsTemplate\"\nimport { ButtonsTemplate } from \"../components/ContentTemplates/ButtonsTemplate\"\nimport { CaptchasTemplate } from \"../components/ContentTemplates/CaptchasTemplate\"\nimport { ChartsTemplate } from \"../components/ContentTemplates/ChartsTemplate\"\nimport { FormsTemplate } from \"../components/ContentTemplates/FormsTemplate\"\nimport { HeadingsTemplate } from \"../components/ContentTemplates/HeadingsTemplate\"\nimport { IconsTemplate } from \"../components/ContentTemplates/IconsTemplate\"\nimport { ImagesTemplate } from \"../components/ContentTemplates/ImagesTemplate\"\nimport { LinksTemplate } from \"../components/ContentTemplates/LinksTemplate\"\nimport { ListsTemplate } from \"../components/ContentTemplates/ListsTemplate\"\nimport { MenusTemplate } from \"../components/ContentTemplates/MenusTemplate\"\nimport { ModalsTemplate } from \"../components/ContentTemplates/ModalsTemplate\"\nimport { NavigationTemplate } from \"../components/ContentTemplates/NavigationTemplate\"\nimport { TablesTemplate } from \"../components/ContentTemplates/TablesTemplate\"\nimport { VideoTemplate } from \"../components/ContentTemplates/VideoTemplate\"\nimport { PaginationTemplate } from \"../components/ContentTemplates/PaginationTemplate\"\n\ninterface IProps {\n\tpage: string\n}\n\nconst ContentPage: NextPage<IProps> = ({ page }) => {\n\tconst title = capitalizeRoute(page)\n\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tconst { t } = useTranslation(\"common\")\n\n\treturn (\n\t\t<>\n\t\t\t<Head>\n\t\t\t\t<title>{`${title} - Accessible Web Dev`}</title>\n\t\t\t\t<meta\n\t\t\t\t\tname=\"description\"\n\t\t\t\t\tcontent={`Learn how to make ${title} accessible`}\n\t\t\t\t/>\n\t\t\t\t<meta property=\"og:title\" content={`${title} - Accessible Web Dev`} />\n\t\t\t\t<meta\n\t\t\t\t\tproperty=\"og:description\"\n\t\t\t\t\tcontent={`Learn how to make ${title} accessible`}\n\t\t\t\t/>\n\t\t\t\t<meta property=\"og:url\" content={`https://accessibleweb.dev/${page}`} />\n\n\t\t\t\t<meta\n\t\t\t\t\tproperty=\"twitter:url\"\n\t\t\t\t\tcontent={`https://accessibleweb.dev/${page}`}\n\t\t\t\t/>\n\t\t\t\t<meta name=\"twitter:title\" content={`${title} - Accessible Web Dev`} />\n\t\t\t\t<meta\n\t\t\t\t\tname=\"twitter:description\"\n\t\t\t\t\tcontent={`Learn how to make ${title} accessible`}\n\t\t\t\t/>\n\t\t\t</Head>\n\t\t\t<Layout activeNavLink={`/${page}`}>\n\t\t\t\t<>\n\t\t\t\t\t<h1>{`Accessible ${title}`}</h1>\n\t\t\t\t\t{page === \"alerts\" && <AlertsTemplate />}\n\t\t\t\t\t{page === \"animations\" && <AnimationsTemplate />}\n\t\t\t\t\t{page === \"audio\" && <AudioTemplate />}\n\t\t\t\t\t{page === \"breadcrumbs\" && <BreadcrumbsTemplate />}\n\t\t\t\t\t{page === \"buttons\" && <ButtonsTemplate />}\n\t\t\t\t\t{page === \"captchas\" && <CaptchasTemplate />}\n\t\t\t\t\t{page === \"charts\" && <ChartsTemplate />}\n\t\t\t\t\t{page === \"forms\" && <FormsTemplate />}\n\t\t\t\t\t{page === \"headings\" && <HeadingsTemplate />}\n\t\t\t\t\t{page === \"icons\" && <IconsTemplate />}\n\t\t\t\t\t{page === \"images\" && <ImagesTemplate />}\n\t\t\t\t\t{page === \"links\" && <LinksTemplate />}\n\t\t\t\t\t{page === \"lists\" && <ListsTemplate />}\n\t\t\t\t\t{page === \"menus\" && <MenusTemplate />}\n\t\t\t\t\t{page === \"modals\" && <ModalsTemplate />}\n\t\t\t\t\t{page === \"navigation\" && <NavigationTemplate />}\n\t\t\t\t\t{page === \"pagination\" && <PaginationTemplate />}\n\t\t\t\t\t{page === \"tables\" && <TablesTemplate />}\n\t\t\t\t\t{page === \"video\" && <VideoTemplate />}\n\t\t\t\t</>\n\t\t\t</Layout>\n\t\t</>\n\t)\n}\n\nexport const getStaticPaths: GetStaticPaths = async (context) => {\n\tconst locales = context?.locales || []\n\tconst paths = pages.filter((page) => page.content)\n\n\tconst pathsWithLocales = paths.flatMap((path) => {\n\t\treturn locales.map((locale) => {\n\t\t\treturn {\n\t\t\t\tparams: {\n\t\t\t\t\tcontent: path.content,\n\t\t\t\t},\n\t\t\t\tlocale: locale,\n\t\t\t}\n\t\t})\n\t})\n\n\treturn {\n\t\tpaths: pathsWithLocales,\n\t\tfallback: false,\n\t}\n}\n\nexport const getStaticProps: GetStaticProps = async (context) => {\n\tconst content = context.params?.content || \"\"\n\tconst locale: string = context?.locale || \"\"\n\n\treturn {\n\t\tprops: {\n\t\t\t...(await serverSideTranslations(locale, [\"common\"])),\n\t\t\tpage: content,\n\t\t},\n\t}\n}\n\nexport default ContentPage\n"
  },
  {
    "path": "pages/_app.tsx",
    "content": "import \"../styles/globals.css\"\nimport type { AppProps } from \"next/app\"\nimport Head from \"next/head\"\nimport { appWithTranslation } from \"next-i18next\"\nimport { ThemeProvider } from \"next-themes\"\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n\treturn (\n\t\t<>\n\t\t\t<Head>\n\t\t\t\t<meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" />\n\t\t\t\t<link rel=\"icon\" href=\"/favicon.ico\" />\n\t\t\t\t<link\n\t\t\t\t\trel=\"apple-touch-icon\"\n\t\t\t\t\tsizes=\"180x180\"\n\t\t\t\t\thref=\"/apple-touch-icon.png\"\n\t\t\t\t/>\n\t\t\t\t<link\n\t\t\t\t\trel=\"icon\"\n\t\t\t\t\ttype=\"image/png\"\n\t\t\t\t\tsizes=\"32x32\"\n\t\t\t\t\thref=\"/favicon-32x32.png\"\n\t\t\t\t/>\n\t\t\t\t<link\n\t\t\t\t\trel=\"icon\"\n\t\t\t\t\ttype=\"image/png\"\n\t\t\t\t\tsizes=\"16x16\"\n\t\t\t\t\thref=\"/favicon-16x16.png\"\n\t\t\t\t/>\n\t\t\t\t<link rel=\"manifest\" href=\"/site.webmanifest\" />\n\n\t\t\t\t<meta property=\"og:type\" content=\"website\" />\n\t\t\t\t<meta\n\t\t\t\t\tproperty=\"og:image\"\n\t\t\t\t\tcontent=\"https://accessibleweb.dev/images/websiteScreenshot.png\"\n\t\t\t\t/>\n\n\t\t\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" />\n\t\t\t\t<meta property=\"twitter:domain\" content=\"accessibleweb.dev\" />\n\t\t\t\t<meta\n\t\t\t\t\tname=\"twitter:image\"\n\t\t\t\t\tcontent=\"https://accessibleweb.dev/images/websiteScreenshot.png\"\n\t\t\t\t/>\n\t\t\t</Head>\n\t\t\t<ThemeProvider attribute=\"class\">\n\t\t\t\t<Component {...pageProps} />\n\t\t\t</ThemeProvider>\n\t\t</>\n\t)\n}\n\nexport default appWithTranslation(MyApp)\n"
  },
  {
    "path": "pages/about.tsx",
    "content": "import type { GetStaticProps, NextPage } from \"next\"\nimport { Layout } from \"../components/Layout/Layout\"\nimport Head from \"next/head\"\nimport { useTranslation } from \"next-i18next\"\nimport { serverSideTranslations } from \"next-i18next/serverSideTranslations\"\nimport { MaintainerCard } from \"../components/MaintainerCard/MaintainerCard\"\nimport { currentMaintainers, IMaintainer } from \"../data/maintainers\"\nimport styles from \"../styles/about.module.css\"\n\ninterface IAboutProps {\n\tcurrentMaintainerData: IMaintainer[]\n}\n\nconst About: NextPage<IAboutProps> = ({ currentMaintainerData }) => {\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tconst { t } = useTranslation(\"common\")\n\treturn (\n\t\t<>\n\t\t\t<Head>\n\t\t\t\t<title>{`About - Accessible Web Dev`}</title>\n\t\t\t\t<meta\n\t\t\t\t\tname=\"description\"\n\t\t\t\t\tcontent=\"About the Accessible Web Dev site & team\"\n\t\t\t\t/>\n\t\t\t\t<meta property=\"og:title\" content=\"Accessible Web Dev - About\" />\n\t\t\t\t<meta property=\"og:description\" content=\"About Accessible Web Dev\" />\n\t\t\t\t<meta property=\"og:url\" content=\"https://accessibleweb.dev/about\" />\n\n\t\t\t\t<meta\n\t\t\t\t\tproperty=\"twitter:url\"\n\t\t\t\t\tcontent=\"https://accessibleweb.dev/about\"\n\t\t\t\t/>\n\t\t\t\t<meta name=\"twitter:title\" content=\"Accessible Web Dev - About\" />\n\t\t\t\t<meta name=\"twitter:description\" content=\"About Accessible Web Dev\" />\n\t\t\t</Head>\n\t\t\t<Layout activeNavLink=\"\">\n\t\t\t\t<div>\n\t\t\t\t\t<h1>About Us</h1>\n\t\t\t\t\t<section>\n\t\t\t\t\t\t<h2>Current Maintainers</h2>\n\t\t\t\t\t\t<div className={styles.aboutRow}>\n\t\t\t\t\t\t\t{currentMaintainerData.map((maintainer, index) => (\n\t\t\t\t\t\t\t\t<MaintainerCard key={index} maintainer={maintainer} />\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</section>\n\t\t\t\t</div>\n\t\t\t</Layout>\n\t\t</>\n\t)\n}\n\nexport const getStaticProps: GetStaticProps = async (context) => {\n\tconst locale: string = context?.locale || \"\"\n\n\tconst currentMaintainerData = currentMaintainers\n\n\treturn {\n\t\tprops: {\n\t\t\t...(await serverSideTranslations(locale, [\"common\"])),\n\t\t\t// Will be passed to the page component as props\n\t\t\tcurrentMaintainerData: currentMaintainerData,\n\t\t},\n\t}\n}\n\nexport default About\n"
  },
  {
    "path": "pages/api/hello.ts",
    "content": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\nimport type { NextApiRequest, NextApiResponse } from \"next\"\n\ntype Data = {\n\tname: string\n}\n\nexport default function handler(\n\treq: NextApiRequest,\n\tres: NextApiResponse<Data>\n) {\n\tres.status(200).json({ name: \"John Doe\" })\n}\n"
  },
  {
    "path": "pages/docs/Style Guide.md",
    "content": "# About this guide 👋\n\nWelcome to our simple and straightforward style guide! We created this guide for our community of tech and non-tech experts to ensure we communicate effectively and inclusively. This guide is divided into four sections:\n\n- 🌎 [Inclusive Language](inclusive-language)\n- 📝 [Grammar & Mechanics](grammar-and-mechanics)\n- 🤔 [Clarity](clarity)\n- ♿ [Accessibility](accessibility)\n\n## Inclusive Language 🌎\n\nInclusive language is an essential aspect of communication. It promotes equality, respects diversity, and avoids offense. Here are some best practices to follow:\n\n- Use gender-neutral words for common terms\n  - ❌ **Not this:** A maintainer should try to be kind yet constructive in **his** feedback.\n  - ✅ **Use this:** A maintainer should try to be kind yet constructive in **their** feedback.\n\n- Avoid using terms that have colonialistic or racist connotations.\n  - ❌ **Not this:** Contributors should push their pull requests to the **master** branch.\n  - ✅ **Use this:** Contributors should push their pull requests to the **main** branch.\n\n## Grammar & Mechanics 📝\n\nGrammar and mechanics help ensure that your writing is clear, concise, and easy to understand. Here are some best practices to follow:\n\n### Commas\n\n- Use commas when describing lists.\n  - ❌ **Not this:** You can also add your **timeline testimonials and upcoming events** that you are participating in.\n  - ✅ **Use this:** You can also add your **timeline, testimonials, and upcoming events** that you are participating in.\n\n- Use commas in introductory elements.\n  - ❌ **Not this:** **If you do not have one yet** you can create one for free with an email address and password.\n  - ✅ **Use this:** If you do not have one yet, you can create one for free with an email address and password.\n\n- Use commas before the seven, so-called, coordinating conjunctions (and, but, so, for, nor, yet, or) to separate two independent clauses.\n  - ❌ **Not this:** There are 4 ways you can add your profile **but** for this Quickstart, we will use the GitHub UI.\n  - ✅ **Use this:** There are 4 ways you can add your profile, **but** for this Quickstart, we will use the GitHub UI.\n\n### Capitalisation\n\n- Only capitalize terms that describe a product, its feature, the first letter of a sentence, or a person’s name.\n  - ❌ **Not this:** There are 4 ways you can add your profile but****for this **quickstart**we will use the **github ui**.\n  - ✅ **Use this:** There are 4 ways you can add your profile, **but** for this Quickstart, we will use the **GitHub UI**.\n\n## Clarity 🤔\n\nClarity in writing helps ensure that your audience understands your message and intentions. Here are some best practices to follow:\n\n### Active vs. Passive\n\nUsing the active voice in writing makes your message more direct and engaging.\n\n- ❌ **Not this:** Gitpod **was** an open-source application that provides a prebuilt development environment in your browser - powered by VS Code.\n- ✅ **Use this:** Gitpod **is** an open-source application that provides a prebuilt development environment in your browser - powered by VS Code.\n\n### Jargon\n\nUsing technical jargon can alienate non-technical readers.\n\n- ❌ **Not this:** Gitpod **was** an open-source application that provides a prebuilt development environment in your browser - powered by VS Code.\n- ✅ **Use this:** Gitpod **is** an open-source application that provides a prebuilt development environment in your browser - powered by VS Code.\n\n## Accessibility ♿\n\n### Bullet Points\n\n- Avoid describing things only by their color or position.\n  - ❌ **Not this:** see **the** **image** above.\n  - ✅ **Use this:** See **Image 2.2**.\n\n### Emojis\n\n- Avoid using emojis as bullet points or numbered lists.\n- ❌ **Not this:** 1️⃣ Fork the repository\n- 2️⃣ Visit the Accessibleforall repository\n  - ✅ **Use this:** **1.** Fork the repository\n- **2️.** Visit the Accessibleforall repository\n\n- Avoid using emojis in the middle of a sentence.\n  - ❌  **Not this:** There are 4️⃣ ways you can add your profile, but for this Quickstart we will use the GitHub UI.\n- ✅ **Use this:** There are **4** ways you can fix your profile, but for this tutorial, we will use the GitHub UI.\n\n- Use them sparingly at the end of a sentence.\n  - ❌ **Not this:** Join the conversation on our Discord community! 😀\n  - ✅ **Use this:** Join the conversation on our Discord community!\n\n### Headings\n\n- Use descriptive titles for headings.\n  - ❌ **Not this:** `<h1> Yoga</h1>`\n- ✅ **Use this:** `<h1>Yoga for Developers</h1>`\n\n- Place headings in chronological order.\n- ❌ **Not this:** `<h1>Yoga for Developers</h1>`\n  `<h2>What is Yoga?</h2>`\n  `<h2>The History of Yoga</h2>`\n  - ✅ **Use this:**  `<h1>Yoga for Developers</h1>`\n  `<h2>What is Yoga?</h2>`\n  `<h3>The History of Yoga</h3>`\n\n### Images\n\n- Use descriptive alt text for images.\n- ❌ **Not this:** `![Cat_2019-06-14.jpg](https://en.wikipedia.org/wiki/File:June_odd-eyed-cat.jpg)`\n- ✅ **Use this:**  `![A white cat with a blue eye and golden eye is sitting on a grey couch](https://en.wikipedia.org/wiki/File:June_odd-eyed-cat.jpg)`\n\nHave some ideas for improving the guide? Raise an issue on our [GitHub page](https://github.com/AccessibleForAll/AccessibleWebDev/issues/new/choose). We would love to receive your feedback!\n"
  },
  {
    "path": "pages/index.tsx",
    "content": "import type { GetStaticProps, NextPage } from \"next\"\nimport { Layout } from \"../components/Layout/Layout\"\nimport Head from \"next/head\"\nimport { useTranslation } from \"next-i18next\"\nimport { serverSideTranslations } from \"next-i18next/serverSideTranslations\"\nimport { TipOfTheDay } from \"../components/TipOfTheDay/TipOfTheDay\"\n\nconst Home: NextPage = () => {\n\tconst { t } = useTranslation(\"homepage\")\n\n\treturn (\n\t\t<>\n\t\t\t<Head>\n\t\t\t\t<title>{t(\"pageTitle\")}</title>\n\t\t\t\t<meta name=\"description\" content={t(\"metaContent\")} />\n\t\t\t\t<meta property=\"og:title\" content=\"Accessible Web Dev\" />\n\t\t\t\t<meta\n\t\t\t\t\tproperty=\"og:description\"\n\t\t\t\t\tcontent=\"Learn the basics about web accessibility in a clear and easy to understand way\"\n\t\t\t\t/>\n\t\t\t\t<meta property=\"og:url\" content=\"https://accessibleweb.dev/\" />\n\n\t\t\t\t<meta property=\"twitter:url\" content=\"https://accessibleweb.dev/\" />\n\t\t\t\t<meta name=\"twitter:title\" content=\"Accessible Web Dev\" />\n\t\t\t\t<meta\n\t\t\t\t\tname=\"twitter:description\"\n\t\t\t\t\tcontent=\"Learn the basics about web accessibility in a clear and easy to understand way\"\n\t\t\t\t/>\n\t\t\t</Head>\n\t\t\t<Layout activeNavLink=\"/\">\n\t\t\t\t<div>\n\t\t\t\t\t<h1>Accessible Web Dev</h1>\n\t\t\t\t\t<section className=\"textContainer\">\n\t\t\t\t\t\t<h2>{t(\"heading.welcome\")}</h2>\n\t\t\t\t\t\t<p>{t(\"para.text1\")}</p>\n\t\t\t\t\t\t<p>{t(\"para.text2\")}</p>\n\t\t\t\t\t\t<p>{t(\"para.text3\")}</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t{t(\"para.text4\")}{\" \"}\n\t\t\t\t\t\t\t<a href=\"https://github.com/AccessibleForAll/AccessibleWebDev/issues/new/choose\">\n\t\t\t\t\t\t\t\t{t(\"link.githubIssue\")}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<TipOfTheDay />\n\t\t\t\t\t</section>\n\t\t\t\t</div>\n\t\t\t</Layout>\n\t\t</>\n\t)\n}\n\nexport const getStaticProps: GetStaticProps = async (context) => {\n\tconst locale: string = context?.locale || \"\"\n\n\treturn {\n\t\tprops: {\n\t\t\t...(await serverSideTranslations(locale, [\"common\", \"homepage\"])),\n\t\t\t// Will be passed to the page component as props\n\t\t},\n\t}\n}\n\nexport default Home\n"
  },
  {
    "path": "public/locales/en/common.json",
    "content": "{}\n"
  },
  {
    "path": "public/locales/en/homepage.json",
    "content": "{\n\t\"pageTitle\": \"Home - Accessible Web Dev\",\n\t\"metaContent\": \"Learn the basics about web accessibility in a clear and easy to understand way\",\n\t\"heading\": {\n\t\t\"welcome\": \"Welcome!\"\n\t},\n\t\"para\": {\n\t\t\"text1\": \"Accessible Web Dev is here to make accessibility more understandable for developers and designers as current standards can be hard to understand.\",\n\t\t\"text2\": \"This is not a replacement for current standards but hopefully a complement to them and help on your journey to creating more accessible web experiences for everyone.\",\n\t\t\"text3\": \"Each page will contain a variety of examples of how to make specific elements or widgets accessible. It will also provide links to resources and further reading.\",\n\t\t\"text4\": \"It is currently a work in progress so not all pages are finished (or even started). If you don't find what you are looking for please feel free to\"\n\t},\n\t\"link\": {\n\t\t\"githubIssue\": \"raise an issue on GitHub.\"\n\t}\n}\n"
  },
  {
    "path": "public/locales/sv/common.json",
    "content": "{}\n"
  },
  {
    "path": "public/locales/sv/homepage.json",
    "content": "{\n\t\"pageTitle\": \"Hem - Accessible Web Dev\",\n\t\"metaContent\": \"Lär dig om webtillgänglighet på ett lätt och tydligt sätt.\",\n\t\"heading\": {\n\t\t\"welcome\": \"Välkommen!\"\n\t},\n\t\"para\": {\n\t\t\"text1\": \"Accessible Web Dev finns för att göra tillgänglighet lättare att förstå för webutvecklare och designers eftersom nuvarande standardar är svårlästa.\",\n\t\t\"text2\": \"Den här sajten är ett komplemang till de standardar som redan finns för att hjälpa dig på din resa mot att skapa mer tillgängliga webbupplevelser för alla.\",\n\t\t\"text3\": \"Varje sida kommer innehålla exempel på hur man gör specifika element eller komponenter mer tillgängliga. Det kommer även finnas länkar till andra sajter där man kan lära sig mer.\",\n\t\t\"text4\": \"För nuvarande är den här sajten under uppbyggnad. Vissa sidor är inte kompletta och kanske inte ens påbörjade. Om du inte hittar det du letar efter får du gärna\"\n\t},\n\t\"link\": {\n\t\t\"githubIssue\": \"lyfta en fråga på GitHub.\"\n\t}\n}\n"
  },
  {
    "path": "public/site.webmanifest",
    "content": "{\"name\":\"\",\"short_name\":\"\",\"icons\":[{\"src\":\"/android-chrome-192x192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"},{\"src\":\"/android-chrome-512x512.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],\"theme_color\":\"#ffffff\",\"background_color\":\"#ffffff\",\"display\":\"standalone\"}"
  },
  {
    "path": "styles/about.module.css",
    "content": ".aboutRow {\n    display:flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n}\n"
  },
  {
    "path": "styles/globals.css",
    "content": "@import url(\"https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800;900&display=swap\");\n\n:root,\n:root.light {\n\t--text: #0D1023;\n\t--invertText: #fff;\n\t--grey: #c7c7c7;\n\t--highlight: #def8f6;\n\t--primary: #028378;\n\t--primaryLt: #7ddfd7;\n\t--bg: #fff;\n\t--dark: #0D1023;\n\t--borderRadius: 3px;\n\t--white: #fff;\n\t--headerHeight: 3rem;\n}\n\n:root.dark {\n\t--text: #fff;\n\t--invertText: #0D1023;\n\t--grey: #c7c7c7;\n\t--highlight: #028378;\n\t--primary: #53fdee;\n\t--primaryLt: #028378;\n\t--bg: #0D1023;\n\t--dark: #0D1023;\n\t--borderRadius: 3px;\n\t--white: #fff;\n\t--headerHeight: 3rem;\n}\n\n@supports (font: -apple-system-body) {\n  html {\n    font: -apple-system-body;\n  }\n}\n\nhtml,\nbody {\n\tpadding: 0;\n\tmargin: 0;\n\tfont-family: \"Noto Sans\", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,\n\t\tOxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n\tcolor: var(--text);\n\tbackground-color: var(--bg);\n}\n\na {\n\tcolor: inherit;\n}\n\n* {\n\tbox-sizing: border-box;\n}\n\n*:focus-visible {\n\toutline: 2px transparent solid;\n\tbox-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;\n}\n\n\n\n.active {\n\tfont-weight: bold;\n\tbackground-color: var(--primary);\n\tcolor: var(--invertText);\n\ttext-decoration: none;\n\tdisplay: inline-block;\n\tborder-radius: 5px;\n}\n\n.center {\n\tdisplay: grid;\n\tplace-items: center;\n}\n\n[hidden] {\n\tdisplay: none;\n}\n\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tmargin: 1rem 0 0 0;\n\tscroll-margin-top: 5rem;\n}\n\nh1{ \n\tfont-size: 2rem; \n\tmargin: 0 0 1rem 0;\n}\n\nh2 {\n\tfont-size: 1.5rem;\n}\n\nh3 {\n\tfont-size: 1.1rem;\n}\n\np {\n\tline-height: 1.5;\n}\n\n/*Classes used on multiple content pages*/\n\n\n.imageContainer {\n\tdisplay: flex;\n\tgap: 1rem;\n\tflex-wrap: wrap;\n}\n\n.blockLink {\n\tdisplay: block;\n}\n\n.list > li {\n\tmargin-bottom: 0.7rem;\n}\n\n.textContainer {\n\tmax-width: 52rem;\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n\t\"compilerOptions\": {\n\t\t\"target\": \"es5\",\n\t\t\"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n\t\t\"allowJs\": true,\n\t\t\"skipLibCheck\": true,\n\t\t\"strict\": true,\n\t\t\"forceConsistentCasingInFileNames\": true,\n\t\t\"noEmit\": true,\n\t\t\"esModuleInterop\": true,\n\t\t\"module\": \"esnext\",\n\t\t\"moduleResolution\": \"node\",\n\t\t\"resolveJsonModule\": true,\n\t\t\"isolatedModules\": true,\n\t\t\"jsx\": \"preserve\",\n\t\t\"incremental\": true\n\t},\n\t\"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\"],\n\t\"exclude\": [\"node_modules\"]\n}\n"
  },
  {
    "path": "utils.ts",
    "content": "export const capitalizeRoute = (phrase: string) => {\n\treturn phrase.charAt(0).toUpperCase() + phrase.slice(1)\n}\n"
  }
]