Adding basic structure to a11y docs and a11y shortcut to homepage

docs/accessibility/atag.md

@@ -0,0 +1,12 @@
+---
+sidebar_position: 3
+---
+ATAG Conformance
+===========
+In this section we will explain the Authoring Tool Accessibility Guidelines, which level of conformance we are aiming for, and how to learn more about ATAG.
+
+:::caution TODO
+
+This page is unfinished, please use the **Edit this Page** link at the bottom of this page to help make it more useful.
+
+:::

docs/accessibility/best-practices/empty-template.md

@@ -0,0 +1,61 @@
+Page Template
+===========
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+:::tip
+This is an empty template, intended to be used as a starting point for adding new best practices pages. Try to keep it consistent with other pages and fill out all relevant sections; sections marked "optional" can be removed if not relevant.
+:::
+
+## Overview
+
+Definition / explanation of what this page is all about.
+
+### Best Practices
+* Add best practices here. 
+* etc
+
+### Common Mistakes
+* Add common errors here.
+
+## Who is affected?
+People using screen readers need ....
+
+People with cognitive disabilities need ... etc.
+
+Who is impacted most by the accessibility of this element?
+
+## Testing for accessibility
+<Tabs>
+<TabItem value="screenreader" label="With a screenreader">
+
+How does someone test that this is accessible with a screenreader?
+1. Use the screen reader to navigate to ...
+2. Make sure ...
+3. Make sure ...
+4. If ... then it passes. ✅
+5. If ... then it fails. ❌
+
+</TabItem>
+<TabItem value="inspector" label="With web inspector">
+
+How does someone test that this is accessible with web inspector?
+1. Right Click > Inspect ... on the page.
+2. Make sure ...
+3. Make sure ...
+4. If ... then it passes. ✅
+5. If ... then it fails. ❌
+6. If ... then it passes. ✅
+7. If ... then it fails. ❌
+
+</TabItem>
+</Tabs>
+
+## Relevant WCAG Success Criteria
+* Link to the WCAG Success Criteria here. For example:
+* [WCAG criteria 1.3.1 - Info and Relationships](https://www.w3.org/TR/WCAG22/#info-and-relationships)
+
+## Relevant ATAG Guidelines (optional)
+* Link to the ATAG Guideline(s) here. For example:
+* [Guideline A.3.2: (For the authoring tool user interface) Provide authors with enough time.](https://www.w3.org/TR/ATAG20/#gl_a32)
+

docs/accessibility/best-practices/index.md

@@ -0,0 +1,19 @@
+---
+sidebar_position: 4
+---
+Best Practices for Accessible Design
+===========
+In this section we will explain different aspects to designing with accessibility in mind.
+
+Suggested sub-pages:
+1. Colours
+2. Fonts
+3. Images
+4. Focus Order
+5. (add more)
+
+:::caution TODO
+
+This page is unfinished, please use the **Edit this Page** link at the bottom of this page to help make it more useful.
+
+:::

docs/accessibility/code-for-humans.md

@@ -0,0 +1,12 @@
+---
+sidebar_position: 1
+---
+You code for humans, not machines.
+===========
+In this section we will explain what accessibility is and why it matters. This should be evocative and informative; why should people care?
+
+:::caution TODO
+
+This page is unfinished, please use the **Edit this Page** link at the bottom of this page to help make it more useful.
+
+:::

docs/accessibility/element-library/empty-template.md

@@ -0,0 +1,114 @@
+Element Template
+===========
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+:::tip
+This is an empty template, intended to be used as a starting point for adding UI elements to the library. Try to keep it consistent with other elements and fill out all relevant sections; sections marked "optional" can be removed if not relevant.
+:::
+
+## Overview
+
+Definition / explanation of what this component is/how it works.
+
+<Tabs>
+<TabItem value="front" label="Front End Screenshot">
+
+  Put front end/Cassiopeia screenshot here, if applicable. Don't forget alt text!
+
+</TabItem>
+<TabItem value="back" label="Back End Screenshot">
+
+  Put back end/Atum screenshot here, if applicable. Don't forget alt text!
+
+</TabItem>
+</Tabs>
+
+## Usage
+### Requirements (optional)
+If this code only works in certain contexts or environments, add that here. For example:
+* PHP 8.0+
+* No IE Support
+
+### Code Snippets
+
+<Tabs>
+<TabItem value="front" label="Front End Usage">
+
+:::info
+
+Add notes about using this snippet in the front end, if applicable.
+
+:::
+
+```html title="Sample Front End Usage - ie, Cassiopia template"
+<!-- HTML Code Snippet Here -->
+```
+
+</TabItem>
+<TabItem value="back" label="Back End Usage">
+
+:::info
+
+Add notes about using this snippet in the back end, if applicable.
+
+:::
+
+```html title="Sample Back End Usage - ie, Atum template"
+<!-- HTML Code Snippet Here -->
+```
+
+</TabItem>
+</Tabs>
+
+
+
+
+### Best Practices
+* Add best practices here. For example, "Make sure you only use button elements when it will do an action, instead of navigating to a different page."
+* etc
+
+### Common Mistakes
+* Add common errors here.
+
+## Who is affected?
+People using screen readers need ....
+
+People with cognitive disabilities need ... etc.
+
+Who is impacted most by the accessibility of this element?
+
+## Testing for accessibility
+<Tabs>
+<TabItem value="screenreader" label="With a screenreader">
+
+How does someone test that this is accessible with a screenreader?
+1. Use the screen reader to navigate to ...
+2. Make sure ...
+3. Make sure ...
+4. If ... then it passes. ✅
+5. If ... then it fails. ❌
+
+</TabItem>
+<TabItem value="inspector" label="With web inspector">
+
+How does someone test that this is accessible with web inspector?
+1. Right Click > Inspect ... on the page.
+2. Make sure ...
+3. Make sure ...
+4. If ... then it passes. ✅
+5. If ... then it fails. ❌
+6. If ... then it passes. ✅
+7. If ... then it fails. ❌
+
+</TabItem>
+</Tabs>
+
+## Relevant WCAG Success Criteria
+* Link to the WCAG Success Criteria here. For example:
+* [WCAG criteria 1.3.1 - Info and Relationships](https://www.w3.org/TR/WCAG22/#info-and-relationships)
+
+## Relevant ATAG Guidelines (optional)
+* Link to the ATAG Guideline(s) here. For example:
+* [Guideline A.3.2: (For the authoring tool user interface) Provide authors with enough time.](https://www.w3.org/TR/ATAG20/#gl_a32)
+

docs/accessibility/code-blocks/index.md → docs/accessibility/element-library/index.md

@@ -1,4 +1,7 @@
-Code Blocks
+---
+sidebar_position: 4
+---
+Accessible UI Library
 ===========
 In this section we will show how to write accessible elements for Joomla.
 :::caution TODO

docs/accessibility/template.md → docs/accessibility/further-reading.md

@@ -1,6 +1,9 @@
-Template
-========
-This is the content for developing an accessible template.
+---
+sidebar_position: 7
+---
+Further Reading
+===========
+Additional accessibility resources can go here.
 
 :::caution TODO
 

docs/accessibility/reporting-issues.md

@@ -0,0 +1,12 @@
+---
+sidebar_position: 6
+---
+Reporting Errors
+===========
+How do people report accessibility issues in the CMS or template to us?
+
+:::caution TODO
+
+This page is unfinished, please use the **Edit this Page** link at the bottom of this page to help make it more useful.
+
+:::

docs/accessibility/testing.md

@@ -0,0 +1,14 @@
+---
+sidebar_position: 5
+---
+Testing Accessibility
+===========
+How should people test the accessibility of their sites?
+
+Add notes about automated tools, jooA11y, checklists, etc.
+
+:::caution TODO
+
+This page is unfinished, please use the **Edit this Page** link at the bottom of this page to help make it more useful.
+
+:::

docs/accessibility/wcag.md

@@ -0,0 +1,12 @@
+---
+sidebar_position: 2
+---
+WCAG Conformance
+===========
+In this section we will explain the Web Content Authoring Guidelines, which level of conformance we are aiming for, and how to learn more about WCAG.
+
+:::caution TODO
+
+This page is unfinished, please use the **Edit this Page** link at the bottom of this page to help make it more useful.
+
+:::

src/pages/index.js

@@ -5,6 +5,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl"; // gives link after concatenati
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import * as IconName from 'react-icons/bs';
+import * as FaIconName from 'react-icons/fa'; // Bootstrap does not have any accessibility icons.
 
 
 import styles from './index.module.css';
@@ -37,11 +38,21 @@ const quickaccess = [
       </>
     ),
   },
+  {
+    title: <>Accessibility</>,
+    href: "/docs/accessibility/",
+    iconName: <FaIconName.FaUniversalAccess className="icon--3x" />,
+    description: (
+        <>
+          Accessibility is a priority for Joomla across its CMS, front- and back-end templates, and community extensions. Explore Joomla’s accessible UI library and best practices.
+        </>
+    ),
+  },
 ];
 // Feature component
 function Quickaccess({ iconName, title, href, description }) {
   return (
-    <div className={clsx("col col--4 padding-vert--md", styles.quickaccess)}>
+    <div className={clsx("col col--3 padding-vert--md", styles.quickaccess)}>
       {iconName && (
         <div className="line-bottom line-bottom--pri margin-bottom--md">
           {iconName}