Improving popover API UI help example (mdn#216)

* Improving popover API UI help example * fix path issue and bullets
JX75 · May 2, 2023 · e79171d · e79171d
1 parent 6d62190
commit e79171d
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -35,7 +35,7 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 
 * The "pointer-lock" directory contains a simple demo to show usage of the Pointer Lock API. You can find more explanation of how the demo works at the main MDN [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API) page. [Run the demo live](https://mdn.github.io/dom-examples/pointer-lock/).
 
-* The "popover-api" directory is for examples and demos of the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) standard. Go to the [Popover API demo index](https://mdn.github.io/dom-examples/popover-api/) to see what's available.
+* The "popover-api" directory is for examples and demos of the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) standard. Go to the [Popover API demo index](popover-api/) to see what's available.
 
 * The "reporting-api" directory contains a couple of simple demos to show usage of the Reprting API. You can find more explanation of how the API works in the main MDN [Reporting API](https://developer.mozilla.org/en-US/docs/Web/API/Reporting_API) docs. [Run the deprecation report demo live](https://mdn.github.io/dom-examples/reporting-api/deprecation_report.html).
 

diff --git a/popover-api/index.html b/popover-api/index.html
@@ -18,41 +18,43 @@ <h1>MDN Popover API examples</h1>
       >).
     </p>
 
-    <li>
-      <a href="basic-declarative/">Basic declarative popover example</a>:
-      Demonstrates a basic auto state popover.
-    </li>
-    <li>
-      <a href="blur-background/">Blur background popover example</a>: Shows how
-      you can add styling to the content behind the popover using the
-      <code>::backdrop</code> pseudo-element.
-    </li>
-    <li>
-      <a href="multiple-auto/">Multiple auto popovers example</a>: Demonstrates
-      that, generally, only one auto popover can be displayed at once.
-    </li>
-    <li>
-      <a href="multiple-manual/">Multiple manual popovers example</a>:
-      Demonstrates that multiple manual popovers can be displayed at once, bt
-      they can't be light-dismissed.
-    </li>
-    <li>
-      <a href="nested-popovers/">Nested popover menu example</a>: Demonstrates
-      the behavior of nested auto state popovers.
-    </li>
-    <li>
-      <a href="popover-positioning/">Popover positioning example</a>: An
-      isolated example showing CSS overriding of the default popover positioning
-      specified by the UA sylesheet.
-    </li>
-    <li>
-      <a href="toggle-help-ui/">Toggle help UI example</a>: Shows the basics of
-      using JavaScript to control popover showing and hiding.
-    </li>
-    <li>
-      <a href="toast-popovers/">Toast popovers example</a>: Illustrates how to
-      make a simple system of "toast" notifications with popovers, which
-      automatically hide again after a certain time.
-    </li>
+    <ul>
+      <li>
+        <a href="basic-declarative/">Basic declarative popover example</a>:
+        Demonstrates a basic auto state popover.
+      </li>
+      <li>
+        <a href="blur-background/">Blur background popover example</a>: Shows how
+        you can add styling to the content behind the popover using the
+        <code>::backdrop</code> pseudo-element.
+      </li>
+      <li>
+        <a href="multiple-auto/">Multiple auto popovers example</a>: Demonstrates
+        that, generally, only one auto popover can be displayed at once.
+      </li>
+      <li>
+        <a href="multiple-manual/">Multiple manual popovers example</a>:
+        Demonstrates that multiple manual popovers can be displayed at once, bt
+        they can't be light-dismissed.
+      </li>
+      <li>
+        <a href="nested-popovers/">Nested popover menu example</a>: Demonstrates
+        the behavior of nested auto state popovers.
+      </li>
+      <li>
+        <a href="popover-positioning/">Popover positioning example</a>: An
+        isolated example showing CSS overriding of the default popover positioning
+        specified by the UA sylesheet.
+      </li>
+      <li>
+        <a href="toggle-help-ui/">Toggle help UI example</a>: Shows the basics of
+        using JavaScript to control popover showing and hiding.
+      </li>
+      <li>
+        <a href="toast-popovers/">Toast popovers example</a>: Illustrates how to
+        make a simple system of "toast" notifications with popovers, which
+        automatically hide again after a certain time.
+      </li>
+    </ul>
   </body>
 </html>
diff --git a/popover-api/toggle-help-ui/index.html b/popover-api/toggle-help-ui/index.html
@@ -7,18 +7,17 @@
       :popover-open {
         position: absolute;
         inset: unset;
-        top: 40px;
-      }
-
-      #mypopover {
-        left: 8px;
+        top: 5px;
+        right: 5px;
       }
     </style>
     <script src="index.js" defer></script>
   </head>
   <body>
     <button id="toggleBtn">Toggle popover help UI</button>
 
+    <p id="keyboard-help-para">Click the above button or press "h" to get help with using our awesome app.</p>
+
     <div id="mypopover">
       <h2>Help!</h2>
 

diff --git a/popover-api/toggle-help-ui/index.js b/popover-api/toggle-help-ui/index.js
@@ -5,6 +5,8 @@ function supportsPopover() {
 const popover = document.getElementById("mypopover");
 const toggleBtn = document.getElementById("toggleBtn");
 
+const keyboardHelpPara = document.getElementById("keyboard-help-para");
+
 const popoverSupported = supportsPopover();
 
 if (popoverSupported) {
@@ -19,4 +21,5 @@ if (popoverSupported) {
   });
 } else {
   toggleBtn.style.display = "none";
+  keyboardHelpPara.style.display = "none";
 }