fix(examples): fix unintended errors in examples

Author: plumdumpling

src/App.module.css

@@ -143,6 +143,10 @@ video {
   flex-direction: column;
   gap: 0.25rem;
   align-items: start;
+
+  button {
+    margin-top: 0.5rem;
+  }
 }
 
 .useOfColor tr > *:first-child {
@@ -155,7 +159,7 @@ video {
 }
 
 .audioControlHint {
-  color: var(--ubilabs-text-secondary-color);
+  color: var(--ubilabs-font-secondary-color);
 }
 
 .contrastMinimum {
@@ -249,9 +253,15 @@ video {
 }
 
 .keyboardTrap {
-  margin: 1rem 0;
-  padding: 1rem;
-  border: 1px solid var(--ubilabs-gray-500);
+  border: 2px solid var(--ubilabs-gray-500);
+
+  > div {
+    padding: 1rem;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--ubilabs-gray-500);
+    }
+  }
 }
 
 .timingAdjustable {
@@ -308,11 +318,16 @@ video {
 }
 
 .flashingBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 1rem;
   background-color: var(--ubilabs-red-800);
   color: var(--ubilabs-white);
+  font-size: 1.5rem; /* 24px */
   font-weight: bold;
-  text-align: center;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
   animation: flashWarning 0.25s infinite; /* 4 flashes per second */
 }
 
@@ -322,7 +337,7 @@ video {
     background-color: var(--ubilabs-red-800);
   }
   50% {
-    background-color: var(--ubilabs-yellow-800);
+    background-color: var(--ubilabs-yellow-900);
   }
 }
 
@@ -410,7 +425,7 @@ video {
 .pointerGestures .secretContent {
   width: 13rem;
   padding: 1rem;
-  background-color: var(--ubilabs-yellow-800);
+  background-color: var(--ubilabs-yellow-900);
   color: var(--ubilabs-white);
   font-weight: 500;
   text-transform: uppercase;

src/App.tsx

@@ -681,6 +681,8 @@ function App() {
 
           <label htmlFor="tel">Phone Number</label>
           <input id="tel" type="tel" />
+
+          <button type="submit">Submit</button>
         </form>
 
         <div>
@@ -1124,30 +1126,35 @@ function App() {
           <p>Users can navigate to and from all content using a keyboard.</p>
         </header>
 
-        <div>
-          <button>Button before the trap</button>
+        <div
+          role="menu"
+          aria-label="Example Menu"
+          className={styles.keyboardTrap}>
+          <div role="menuitem" tabIndex={0}>
+            Menu item before the trap
+          </div>
 
           <div
-            className={styles.keyboardTrap}
+            role="menuitem"
             tabIndex={0}
             onKeyDown={event => {
-              // Prevent users from tabbing out of this container
+              // Prevent users from tabbing out of this element
               if (event.key === 'Tab') {
                 event.preventDefault();
               }
             }}>
-            <h4>Keyboard Trap</h4>
-            <p>
+            Keyboard trap
+            <br />
+            <small>
               This container traps keyboard focus by blocking the <kbd>Tab</kbd>{' '}
               key.
-            </p>
-            <button>Keyboard focus is trapped after clicking me</button>
+            </small>
           </div>
 
-          <button>
-            Button after the trap <wbr />
+          <div role="menuitem" tabIndex={0}>
+            Menu item after the trap <wbr />
             (not reachable)
-          </button>
+          </div>
         </div>
 
         <div>
@@ -1472,7 +1479,7 @@ function App() {
         </header>
 
         <div className={styles.multipleWays}>
-          <nav role="tablist">
+          <div role="tablist">
             {MULTIPLE_WAYS_TABS.map((tab, index) => (
               <button
                 key={tab}
@@ -1488,7 +1495,7 @@ function App() {
                 {tab}
               </button>
             ))}
-          </nav>
+          </div>
 
           <div role="tabpanel" tabIndex={0} aria-labelledby={activeTab}>
             <h3>{activeTab}</h3>
@@ -1973,7 +1980,7 @@ function App() {
         <form
           onSubmit={event => {
             event.preventDefault();
-            alert('Form auto-!!');
+            alert('Form auto-submitted!');
           }}>
           <label>
             <input
@@ -1993,8 +2000,8 @@ function App() {
           <h3>Why this violates the rule</h3>
           <ul>
             <li>
-              The form is ! immediately when the checkbox is checked — without
-              user confirmation.
+              The form is submitted immediately when the checkbox is checked —
+              without user confirmation.
             </li>
             <li>
               Users may not expect a form to submit from a checkbox alone.
@@ -2036,7 +2043,7 @@ function App() {
                   : ['Services', 'Home', 'Contact', 'About']
                 ).map(link => (
                   <li key={link}>
-                    <a href="#">{link}</a>
+                    <a href={`#${link.toLowerCase()}`}>{link}</a>
                   </li>
                 ))}
               </ul>
@@ -2096,6 +2103,12 @@ function App() {
           <dialog ref={consistentIdentificationDialogRef}>
             <p>{consistentIdentificationModalContent}</p>
             <button
+              /**
+               * It's safe to disable the no-autofocus rule here because:
+               * - The button is inside a modal <dialog>, which demands immediate keyboard focus.
+               * - This improves accessibility by allowing keyboard and screen reader users to act quickly.
+               */
+              // eslint-disable-next-line jsx-a11y/no-autofocus
               autoFocus
               onClick={() => {
                 setConsistentIdentificationModalContent(null);
@@ -2140,15 +2153,15 @@ function App() {
             <h3>Page 1</h3>
             <p>Content of page 1</p>
             <div className={styles.helpLinkTopRight}>
-              <a href="#">Need help?</a>
+              <a href="#help">Need help?</a>
             </div>
           </div>
 
           <div className={styles.page}>
             <h3>Page 2</h3>
             <p>Content of page 2</p>
             <div className={styles.helpLinkBottomLeft}>
-              <a href="#">Support</a>
+              <a href="#support">Support</a>
             </div>
           </div>
         </div>
@@ -2480,6 +2493,11 @@ function App() {
         </header>
 
         <div className={styles.nameRoleValue}>
+          {/**
+           * This is an intentionally inaccessible "checkbox"
+           * without role, name, and keyboard support.
+           */}
+          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
           <div
             className={styles.checkbox}
             onClick={() => setIsChecked(prevState => !prevState)}

src/index.css

@@ -11,7 +11,7 @@
   --ubilabs-green-800: #1e8250;
   --ubilabs-red: #ff6e78;
   --ubilabs-red-800: #cd3c50;
-  --ubilabs-yellow-800: #cd9128;
+  --ubilabs-yellow-900: #b47819;
 
   --ubilabs-font-color: var(--ubilabs-white);
   --ubilabs-font-secondary-color: var(--ubilabs-gray-500);