Update documentation with better references to related packages

README.md

@@ -77,8 +77,17 @@ Look in the [example html file](https://github.com/wezz/ARIAManager/blob/main/in
 ## Related packages
 ARIAManager mainly works with the direct relation of elements with aria-controls and it's related targets. 
 
+### ARIATabManager
 There is another manager called [ARIATabManager](https://github.com/wezz/ARIATabManager) that handles the relationship between multiple elements that manage view states. Use that to easily enable tabbing behavior (close an open area if a sibling is selected).
 
+### [MatchMedia Attribute Manager](https://github.com/wezz/MatchMediaAttributeManager)
+Adding a ```aria-hidden``` attribute and not using it for it's intended use is bad for accessibility.<br>
+Elements can be visually visible but hidden for users using screenreaders and more. 
+
+The MatchMedia Attribute Manager makes it possible to remove or add ```aria-hidden``` depending on a media query.
+
+Use cases can be that you want to show a navigation in desktop, but in mobile it's supposed to be hidden by default and toggled by a button.
+
 ## Development & Demo
 Clone this repo
 Run

index.html

@@ -101,7 +101,7 @@ <h3>Example 3 injected markup</h3>
     </section>
     <section id="example4">
       <h2>Example 4. Test in mobile navigation context</h2>
-      <button aria-controls="example4-menu" aria-expanded="false" aria-pressed="false">Toggle menu</button>
+      <button aria-controls="example4-menu" aria-expanded="false" aria-haspopup="true" aria-pressed="false">Toggle menu</button>
       <nav id="example4-menu" aria-hidden="true">
         <ul>
           <li>
@@ -139,5 +139,24 @@ <h2>Example 5. Target multiple targets</h2>
         <button aria-controls="exampletarget5-2" aria-pressed="false">Close box 1</button>
       </div>
     </section>
+
+    <section id="example6">
+      <h2>Example 6. Viewport controlled aria-hidden using <a href="https://github.com/wezz/MatchMediaAttributeManager" target="_blank">MatchMedia Attribute Manager</a></h2>
+      <p>Box 1 should be visible in a tablet viewport (+768px), but hidden in mobile</p>
+      <script type="module">
+        import MatchMediaAttributeManager from 'https://cdn.jsdelivr.net/npm/@wezz/matchmediaattributemanager/dist/matchmediaattributemanager.js';
+        console.log('MatchMediaAttributeManager', MatchMediaAttributeManager);
+        new MatchMediaAttributeManager();
+      </script>
+
+      <button aria-controls="exampletarget6-1" aria-pressed="false">Toggle first box</button>
+
+
+
+      <div id="exampletarget6-1" class="exampletarget" data-matchmedia-query="(max-width: 768px)" data-matchmedia-attribute="aria-hidden,true,true">
+        <strong>Box 1</strong>
+        <p>This box only be visible by default when in a viewport wider than 768px</p>
+      </div>
+    </section>
   </body>
 </html>