Add warning to demo page about macOS and tab key navigation

Relates to focus-trap/focus-trap#895

demo/index.html

@@ -15,6 +15,27 @@ <h1 tabindex="0">focus-trap-react demo</h1>
       <span aria-hidden="true" style="font-size:2em;vertical-align:middle;">☜</span>
       <a href="https://github.com/focus-trap/focus-trap-react" style="vertical-align:middle;">Return to the repository</a>
     </p>
+    <p>
+      In the demos below, you'll be able to tell that a focus trap is active because it will turn pink. You should also be able to tell because it will trap your focus!
+    </p>
+    <p>
+      When a trap is active, you can deactivate it by pushing its deactivate button or, if the demo allows, pressing the <kbd>Escape</kbd> key.
+    </p>
+    <p class="macos-keyboard-warning">
+      Before you try the demos, if you're using <strong>macOS</strong>, make sure you
+      have enabled <strong>keyboard navigation</strong> in order to use the Tab key to
+      move focus between <strong>all controls</strong>.
+    </p>
+    <p>
+      In Ventura (v13), you'll find this under <code>System Settings &gt; Keyboard</code>.
+      Prior to Ventura, it may have been under <code>System Settings &gt; General</code>.
+    </p>
+    <p>
+      FireFox and Safari, for example, respect this setting and without it enabled, you won't
+      get a good experience. Chrome appears to ignore it (at least in v109). While focus-trap
+      will still trap all the right nodes, the browser/OS will not let you access all tabbable
+      nodes on the page, nor in any traps you activate, while using the Tab key.
+    </p>
 
     <h2 id="defaults-heading">defaults</h2>
     <p>

demo/style.css

@@ -12,6 +12,12 @@ body {
   padding: 10px;
 }
 
+.macos-keyboard-warning {
+  background-color: yellow;
+  padding: 8px;
+  text-align: center;
+}
+
 input:focus,
 a:focus,
 button:focus {