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 {
@@ -308,11 +312,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 +331,7 @@ video {
     background-color: var(--ubilabs-red-800);
   }
   50% {
-    background-color: var(--ubilabs-yellow-800);
+    background-color: var(--ubilabs-yellow-900);
   }
 }
 
@@ -410,7 +419,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>
@@ -1127,22 +1129,24 @@ function App() {
         <div>
           <button>Button before the trap</button>
 
-          <div
+          <details
             className={styles.keyboardTrap}
-            tabIndex={0}
             onKeyDown={event => {
               // Prevent users from tabbing out of this container
               if (event.key === 'Tab') {
                 event.preventDefault();
               }
-            }}>
-            <h4>Keyboard Trap</h4>
+            }}
+            open>
+            <summary>
+              <h4>Keyboard Trap</h4>
+            </summary>
             <p>
               This container traps keyboard focus by blocking the <kbd>Tab</kbd>{' '}
               key.
             </p>
             <button>Keyboard focus is trapped after clicking me</button>
-          </div>
+          </details>
 
           <button>
             Button after the trap <wbr />
@@ -1472,7 +1476,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 +1492,7 @@ function App() {
                 {tab}
               </button>
             ))}
-          </nav>
+          </div>
 
           <div role="tabpanel" tabIndex={0} aria-labelledby={activeTab}>
             <h3>{activeTab}</h3>
@@ -1973,7 +1977,7 @@ function App() {
         <form
           onSubmit={event => {
             event.preventDefault();
-            alert('Form auto-!!');
+            alert('Form auto-submitted!');
           }}>
           <label>
             <input
@@ -1993,8 +1997,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 +2040,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 +2100,13 @@ 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 +2151,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 +2491,12 @@ function App() {
         </header>
 
         <div className={styles.nameRoleValue}>
+          {/**
+           * This is an intentionally inaccessible "checkbox"
+           * without role, name, and keyboard support.
+           *
+           * jsx-a11y/click-events-have-key-events
+           */}
           <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);