Add HTML ARIA

Author: RoyalIcing

apps/components_guide/lib/components_guide/research/spec.ex

@@ -25,27 +25,24 @@ defmodule ComponentsGuide.Research.Spec do
   end
 
   def search_for(:whatwg_html_spec, query) when is_binary(query) do
-    IO.puts("searching whatwg html spec")
-
     # url = "https://html.spec.whatwg.org/"
     url = "https://html.spec.whatwg.org/dev/"
 
-    # {:ok, html} = body({:fetch, url})
-    # {:ok, html} = read({:fetch, url})
     {:ok, document} = Source.html_document_at(url)
 
-    # IO.puts("document size #{:erts_debug.flat_size(document)}")
-
-    # selector = css("#contents")
-    # selector = xpath("//*[@id='contents']/following-sibling::ol[1]")
-    # result = Meeseeks.one(document, selector)
-    # Meeseeks.html(result)
-
     document
     |> Floki.find("body")
     |> Floki.find("a:fl-contains('#{query}')")
     |> Floki.raw_html()
+  end
 
-    # html
+  def search_for(:html_aria_spec, query) when is_binary(query) do
+    url = "https://www.w3.org/TR/html-aria/"
+    {:ok, document} = Source.html_document_at(url)
+
+    document
+    |> Floki.find("#document-conformance-requirements-for-use-of-aria-attributes-in-html table tbody tr")
+    # |> Floki.find("#id-#{query}")
+    |> Floki.raw_html()
   end
 end

apps/components_guide_web/lib/components_guide_web/controllers/research_controller.ex

@@ -46,6 +46,10 @@ defmodule ComponentsGuideWeb.ResearchController do
       content_tag(:article, [
         h2("Can I Use"),
         Spec.search_for(:caniuse, query) |> present_results()
+      ]),
+      content_tag(:article, [
+        h2("HTML ARIA"),
+        Spec.search_for(:html_aria_spec, query) |> present_results()
       ])
     ]
   end

apps/components_guide_web/lib/components_guide_web/views/layout_view.ex

@@ -18,7 +18,7 @@ defmodule ComponentsGuideWeb.LayoutView do
     ~E"""
     <li>
       <form role=search action="/research" class="flex h-full px-2 items-center">
-        <input type=text name=q placeholder="Search" class="w-full py-1 px-2 bg-white text-black">
+        <input type=text name=q placeholder="Search specs" class="w-full py-1 px-2 bg-white text-black">
       </form>
     """
   end