Migrate to enhanced-navigation from navigable-article

Author: RoyalIcing

assets/js/app.js

@@ -8,7 +8,6 @@ import "phoenix_html";
 import { Socket } from "phoenix";
 import { LiveSocket } from "phoenix_live_view";
 import topbar from "../vendor/topbar";
-import "./customElements/navigable-article";
 import "./customElements/enhanced-navigation";
 
 window.IMPORT = {

assets/js/customElements/navigable-article.js

@@ -1,4 +1,4 @@
-## Available Roles
+# Available Roles
 
 <table>
   <caption class="text-left text-2xl font-bold pt-4 pb-8">Landmarks</caption>

lib/components_guide_web/templates/accessibility_first/roles.html.md

@@ -1,4 +1,4 @@
-<navigable-article class="flex flex-col">
+<enhanced-navigation class="flex flex-col" data-add-article-navigation>
   <div class="mx-auto grid-flow-col md:grid md:grid-cols-[20rem_minmax(0,var(--max-width))] xl:grid-cols-[20rem_minmax(0,var(--max-width))_18rem] gap-8" style="--max-width: 46em">
     <div class="md:sticky top-0 md:h-screen pl-4 pt-16 text-white">
       <%= render view_module(@conn), "_nav.html", conn: @conn %>
@@ -22,7 +22,7 @@
       </nav>
     </aside>
   </div>
-</navigable-article>
+</enhanced-navigation>
 
 <div class="bg-white" hidden>
   <section class="container pt-8 pb-16 text-2xl">

lib/components_guide_web/templates/react_typescript/index.html.eex

@@ -1,4 +1,4 @@
-<navigable-article class="flex flex-col">
+<enhanced-navigation class="flex flex-col" data-add-aria-current-page data-add-article-navigation>
   <div class="mx-auto grid-flow-col md:grid md:grid-cols-[20rem_minmax(0,var(--max-width))] xl:grid-cols-[20rem_minmax(0,var(--max-width))_18rem] gap-8" style="--max-width: 46em">
     <div class="md:sticky top-0 md:h-screen pl-4 pt-16 text-white">
       <%= render view_module(@conn), "_nav.html", conn: @conn %>
@@ -22,4 +22,4 @@
       </nav>
     </aside>
   </div>
-</navigable-article>
+</enhanced-navigation>