Add notes for implicit noopener and hidden=until-found (#21)

* Add note on implicit `noopener` for links set to open in a new window/tab

* Add note on `hidden=until-found` for `details`/`summary` elements

* Rebuild docs

* Patch version bump

Author: ericwbailey

docs/index.html

@@ -200,6 +200,10 @@ <h2>Block-level link title</h2>
         He was still hurriedly thinking all this through, unable to decide to get out of the bed, when the clock struck quarter to seven. There was a cautious knock at the door near his head. "Gregor", somebody called - it was his mother - "it's quarter to seven. Didn't you want to go somewhere?
       </p>
     </a>
+    <h4 id="notes-lists">Notes:</h4>
+    <p>
+      <small><a href="https://werd.io/2024/browsers-imply-noopener-for-links-in-new-tab" rel="external noopener">Browsers will imply <code translate="no">noopener</code></a> for links that open in a new window/tab.</small>
+    </p>
   </div>
   <!-- End of #subsection-links -->
 
@@ -488,13 +492,14 @@ <h2 id="title-interactive">Interactive</h2>
   <h3 id="subsection-details">Details</h3>
   <details>
     <summary>What payment options do you accept?</summary>
-      <p>We accept cash, Visa, American Express, money orders, and personal checks.</p>
+    <p>We accept cash, Visa, American Express, money orders, and personal checks.</p>
   </details>
 
   <h4 id="notes-details">Notes:</h4>
-  <p>
-    <small>The <code translate="no">details</code> element is currently not supported by Internet Explorer. This browsers will <a rel="external noopener" href="https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/">display the content in an opened state</a>, as if the <code translate="no">open</code> attribute was applied.</small>
-  </p>
+  <ul>
+    <li><small>The <code translate="no">details</code> element is currently not supported by Internet Explorer. Browsers will <a rel="external noopener" href="https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/">display the content in an opened state</a>, as if the <code translate="no">open</code> attribute was applied.</small></li>
+    <li><small>Declaring <a href="https://developer.chrome.com/docs/css-ui/hidden-until-found" rel="external noopener"><code translate="no">hidden=until-found</code> on the parent hidden element to make it discoverable</a> by browser search.</small></li>
+  </ul>
   <!-- End of #subsection-details -->
 
   <!-- Start of #subsection-dialog -->

package.json

@@ -2,7 +2,7 @@
   "name": "accessible-html-content-patterns",
   "description": "A collection of the full HTML5 Doctor Element Index as well as common markup patterns for quick reference.",
   "homepage": "https://github.com/ericwbailey/accessible-html-content-patterns",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "license": "MIT",
   "author": "Eric Bailey <[email protected]> (http://ericwbailey.website/)",
   "contributors": [

partials/section.interactive.hbs

@@ -6,13 +6,14 @@
   <h3 id="subsection-details">Details</h3>
   <details>
     <summary>What payment options do you accept?</summary>
-      <p>We accept cash, Visa, American Express, money orders, and personal checks.</p>
+    <p>We accept cash, Visa, American Express, money orders, and personal checks.</p>
   </details>
 
   <h4 id="notes-details">Notes:</h4>
-  <p>
-    <small>The <code translate="no">details</code> element is currently not supported by Internet Explorer. This browsers will <a rel="external noopener" href="https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/">display the content in an opened state</a>, as if the <code translate="no">open</code> attribute was applied.</small>
-  </p>
+  <ul>
+    <li><small>The <code translate="no">details</code> element is currently not supported by Internet Explorer. Browsers will <a rel="external noopener" href="https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/">display the content in an opened state</a>, as if the <code translate="no">open</code> attribute was applied.</small></li>
+    <li><small>Declaring <a href="https://developer.chrome.com/docs/css-ui/hidden-until-found" rel="external noopener"><code translate="no">hidden=until-found</code> on the parent hidden element to make it discoverable</a> by browser search.</small></li>
+  </ul>
   <!-- End of #subsection-details -->
 
   <!-- Start of #subsection-dialog -->

partials/section.text-level.hbs

@@ -47,6 +47,10 @@
         He was still hurriedly thinking all this through, unable to decide to get out of the bed, when the clock struck quarter to seven. There was a cautious knock at the door near his head. "Gregor", somebody called - it was his mother - "it's quarter to seven. Didn't you want to go somewhere?
       </p>
     </a>
+    <h4 id="notes-lists">Notes:</h4>
+    <p>
+      <small><a href="https://werd.io/2024/browsers-imply-noopener-for-links-in-new-tab" rel="external noopener">Browsers will imply <code translate="no">noopener</code></a> for links that open in a new window/tab.</small>
+    </p>
   </div>
   <!-- End of #subsection-links -->