feat: update content

Author: amir78729

.vitepress/config.mts

@@ -16,13 +16,14 @@ export default defineConfig({
           { text: "Visibility Methods", link: "/visibility-methods" },
           // { text: "Accessible Multimedia", link: "/multimedia" },
           { text: "Focus Control", link: "/focus-control" },
-          {
-            text: "Mouse and Pointer Events",
-            link: "/mouse-and-pointer-events",
-          },
+          // {
+          //   text: "Mouse and Pointer Events",
+          //   link: "/mouse-and-pointer-events",
+          // },
           { text: "Complex Widgets", link: "/complex-widgets" },
           { text: "Development Checklists", link: "/dev-checklists" },
           { text: "Tools", link: "/tools" },
+          { text: "Exercise", link: "/exercise" },
           { text: "References", link: "/references" },
         ],
       },

assets/a11y.svg

@@ -17,7 +17,14 @@ outline: "deep"
 
 # Development Checklists
 
-There are a number of tools we can use to assist in the creation of accessible web applications.
+![Image of the spider-man with triggered spider-sense](./assets/spider-sense.jpg)
+
+
+There are a number of tools we can use to assist in the creation of accessible web applications. 
+
+Here are some common issues that should make your spidey senses go off. My goal is for you to be able to identify these in code reviews and demos.
+
+We want to bring kindness to these situations and not judge people. We also need to identify accessibility issues (ideally) before they ship:
 
 ## Keyboard Navigation
 
@@ -73,7 +80,8 @@ Non-modal dialogs don’t have all of the same background requirements. But the
 <tapsi-button @click="openModal" variant="brand" id="open-modal-btn">Open a sample modal</tapsi-button>
 <tapsi-modal style="z-index: 999" id="sample-modal" heading="a sample modal" description="As you can see. the focus is now on the first focusable element inside the modal.">
   <tapsi-button-group slot="action-bar">
-    <tapsi-button @click="closeModal">Got it</tapsi-button>
+    <tapsi-button @click="closeModal">button 1</tapsi-button>
+    <tapsi-button @click="closeModal">button 2</tapsi-button>
   </tapsi-button-group>
 </tapsi-modal>
 
@@ -133,7 +141,7 @@ const MyComponent = () => {
   }
 
   const handleKeyDown = (e: KeyboardEvent) => { // [!code focus]
-    if (event.code === 'Space' || event.code === 'Enter') { // [!code focus]
+    if (e.code === 'Space' || e.code === 'Enter') { // [!code focus]
       fn(); // [!code focus]
     } // [!code focus]
   } // [!code focus]

assets/dog.jpg

@@ -0,0 +1,11 @@
+---
+outline: "deep"
+---
+
+# Exercise
+
+![A cute dog wearing glasses behind a laptop trying to code!](./assets/dog.jpg)
+
+Please fork the [React Accessibility Exercise](https://github.com/code-with-amirhossein/react-a11y-exercise), Read the [`README.md`](https://github.com/code-with-amirhossein/react-a11y-exercise/blob/main/README.md) file carefully and make the app accessible!
+
+Good luck ✨

assets/spider-sense.jpg

@@ -13,14 +13,16 @@ Ensure that your web application can be fully operated with the keyboard only:
 
 - [WebAIM talks about keyboard accessibility](https://webaim.org/techniques/keyboard/)
 
-## Keyboard focus and focus outline
+## Keyboard focus and focus outline (focus ring)
 
 Keyboard focus refers to the current element in the DOM that is selected to accept input from the keyboard. We see it everywhere as a focus outline similar to that shown in the following image:
 
 [![Blue keyboard focus outline around a selected link.](https://legacy.reactjs.org/static/dec0e6bcc1f882baf76ebc860d4f04e5/4fcfe/keyboard-focus.png)](https://legacy.reactjs.org/static/dec0e6bcc1f882baf76ebc860d4f04e5/4fcfe/keyboard-focus.png)
 
 Only ever use CSS that removes this outline, for example by setting `outline: 0`, if you are replacing it with another focus outline implementation.
 
+Here are some examples of custom focus rings in [Tapsi design system](https://github.com/Tap30/web-components):
+
 <section aria-hidden="true" style="background: white; border-radius: 8px; padding: 12px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;">
 
 <tapsi-button variant="brand">عنوان دکمه</tapsi-button>

dev-checklists.md

@@ -6,13 +6,32 @@ hero:
   name: "Accessibility"
   text: "for React Developers"
   tagline: 🚧  Work in Progress
+  image: 
+    src: ./assets/a11y.svg
+    alt: accessibility icon
   actions:
     - theme: brand
       text: Get Started!
       link: /intro
 ---
 
 <style>
+
+.VPImage {
+  color: var(--vp-c-brand-1);
+  animation: a11y-icon 1s;
+  
+}
+
+@keyframes a11y-icon {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 #author {
   display: flex;
   align-items: center;

exercise.md

@@ -5,20 +5,14 @@ outline: 'deep'
 
 # What is accessibility?
 
+<svg style="width: 10rem; margin:  2rem auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>human</title><path d="M21,9H15V22H13V16H11V22H9V9H3V7H21M12,2A2,2 0 0,1 14,4A2,2 0 0,1 12,6C10.89,6 10,5.1 10,4C10,2.89 10.89,2 12,2Z" fill="var(--vp-c-brand-1)" /></svg>
+
 Accessibility is the practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.
 
 You might also think of accessibility as treating everyone the same, and giving them equal opportunities, no matter what their ability or circumstances. Just as it is wrong to exclude someone from a physical building because they are in a wheelchair (modern public buildings generally have wheelchair ramps or elevators), it is also not right to exclude someone from a website because they have a visual impairment. We are all different, but we are all human, and therefore have the same human rights.
 
 Accessibility is the right thing to do. Providing accessible sites is part of the law in some countries, which can open up some significant markets that otherwise would not be able to use your services or buy your products.
 
-There are 3 levels of disabilities:
-- permanent disablilties
-<!-- People who are deaf or hard of hearing, People who are blind or low vision using screen reader. People with auditory processing difficulties. -->
-- temporary disabilities
- <!-- Have you ever go to the optometrist and they dilate your eyes and everythin is very washed out. You have hard time seeing until the medication wears off, that's a temporary type of disability. -->
-- situational disabilities
-<!--youre on the bus and want to watch a video-->
-
 ## What kinds of disability are we looking at?
 
 People with disabilities are just as diverse as people without disabilities, and so are their disabilities. The key lesson here is to think beyond your own computer and how you use the web, and start learning about how others use it — you are not your users. The main types of disability to consider are explained below, along with any special tools they use to access web content (known as assistive technologies, or ATs).

focus-control.md

@@ -2,87 +2,6 @@
 outline: "deep"
 ---
 
-<script setup>
-
-const formIframeSrcDoc = `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Accessible Form Example</title>
-</head>
-<body>
-  <h1>Form for Testing Accessibility</h1>
-  <main>
-    <form class="form js-form" id="f" action="#">
-      <fieldset class="form__data">
-        <legend>Subscribe now</legend>
-        <div class="form__name">
-          <label
-            for="firstname"
-            data-validation="We need your first name to address you correctly"
-          >
-            <span class="form__field-name">First name</span>
-            <span aria-hidden="true" class="form__required">(required)</span>
-          </label>
-          <input
-            aria-describedby="firstname-validation"
-            required
-            id="firstname"
-            name="firstname"
-            type="text"
-            autocomplete="given-name"
-          />
-          <small id="firstname-validation" class="form__validation"></small>
-        </div>
-        <div class="form__name">
-          <label
-            for="lastname"
-            data-validation="We need your last name to address you correctly"
-          >
-            <span class="form__field-name">Last name</span>
-            <span aria-hidden="true" class="form__required">(required)</span>
-          </label>
-          <input
-            aria-describedby="lastname-validation"
-            required
-            id="lastname"
-            name="lastname"
-            type="text"
-            autocomplete="family-name"
-          />
-          <small id="lastname-validation" class="form__validation"></small>
-        </div>
-        <div class="form__email">
-          <label
-            for="email"
-            data-validation="We need your email address to be able to send you the newsletter"
-          >
-            <span class="form__field-name">Email address</span>
-            <span aria-hidden="true" class="form__required">(required)</span>
-          </label>
-          <input
-            aria-describedby="email-validation"
-            required
-            id="email"
-            name="email"
-            type="email"
-            autocomplete="email"
-          />
-          <small id="email-validation" class="form__validation"></small>
-        </div>
-      </fieldset>
-
-      <button class="button button--red" type="submit">Subscribe</button>
-    </form>
-  </main>
-  <script>document.getElementById("f").addEventListener("submit", (e) => {e.preventDefault();console.log("submitted!");});<\/script>
-</body>
-</html>
-`
-</script>
-
 # WAI-ARIA
 
 The [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria) (WAI-ARIA) document contains techniques for building fully accessible JavaScript widgets and web applications. It defines a set of attributes to help make web content and web applications more accessible to people with disabilities.
@@ -216,4 +135,3 @@ Here's an example!
 
 In this example, we have a table whose column headers have buttons that will sort the table. That sorting behavior is made evident for sighted users with some recognizable sort icon, but blind users wouldn't get any cues to the buttons' functionality. To compensate, we give the button a description using aria-describedby, pointing to a `<p>` tag outside of the table. We wouldn't want users to navigate to the `<p>` on its own, however, so we apply hidden to it. Now our sort button has a description of "Sort this table alphabetically by name." without any of the ensuing clutter! 🙌🏻
 
-<iframe :srcdoc="formIframeSrcDoc"></iframe>