Add table for accessible roles

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/templates/react_typescript/testing.html.md

@@ -26,12 +26,18 @@ You can find a list of roles here [in the spec](https://www.w3.org/TR/wai-aria/#
       <th>HTML example</th>
     </tr>
   </thead>
-  <tbody>
-    <tr>
-      <td>Button</td>
-      <td>Perform action here</td>
-      <td>`<button>`</td>
-    </tr>
+  <tbody class="border">
+    <%= table_rows([
+      ["Button", "Perform action here", "`<button>`"],
+      ["Checkbox", "Enable something", "`<input type=checkbox>`"],
+      ["Textbox", "Type in something", "`<input type=text>` *or* `<textarea>`"],
+      ["Radio & Radiogroup", "Choose from a list", "`<input type=radio>`"],
+      ["Combobox", "Choose or type from a list", "`<select>` *or* `<div role=combobox> <input>`"],
+      ["Slider", "Choose from a range", "`<input type=range aria-valuemin=1 …>`"],
+      ["Menu & Menuitem", "Choose action", "`<ul role=menu> <li role=menuitem>…`"],
+      ["Dialog", "Focus on this separate content", "`<div role=dialog>`"],
+      ["Alert", "Alert to live information, errors", "`<div role=alert>`"],
+    ]) %>
   </tbody>
 </table>
 

apps/components_guide_web/lib/components_guide_web/views/react_typescript_view.ex

@@ -15,4 +15,16 @@ defmodule ComponentsGuideWeb.ReactTypescriptView do
 
     "background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"
   end
+
+  def table_rows(rows_content) do
+    Enum.map(rows_content, &table_row/1)
+  end
+
+  def table_row(items) do
+    content_tag(:tr, Enum.map(items, &table_cell/1))
+  end
+
+  def table_cell(content) do
+    content_tag(:td, content |> line(), class: "px-3 py-1")
+  end
 end

mix.lock

@@ -20,7 +20,7 @@
   "mime": {:hex, :mime, "1.3.1", "30ce04ab3175b6ad0bdce0035cba77bba68b813d523d1aac73d9781b4d193cf8", [:mix], [], "hexpm", "6cbe761d6a0ca5a31a0931bf4c63204bceb64538e664a8ecf784a9a6f3b875f1"},
   "mint": {:hex, :mint, "1.0.0", "ca5ab33497ba2bdcc42f6cdd3927420a6159116be87c8173658e93c8746703da", [:mix], [{:castore, "~> 0.1.0", [hex: :castore, repo: "hexpm", optional: true]}], "hexpm", "b8943ef1e630879538dd6620bfc189d4d75fab3ad39f3fe9c50539879f7efd84"},
   "mojito": {:hex, :mojito, "0.6.3", "1d9af4bee09c5489d189263c4558c1d5b0cc2c2a6d94d2426590077a6b4287ef", [:mix], [{:castore, "~> 0.1", [hex: :castore, repo: "hexpm", optional: false]}, {:mint, "~> 1.0", [hex: :mint, repo: "hexpm", optional: false]}, {:poolboy, "~> 1.5", [hex: :poolboy, repo: "hexpm", optional: false]}], "hexpm", "99c40fe806bfc8bdecdd9b8ac111cc3834ae638afd3e233be554f3ed5811c1f9"},
-  "paredown": {:hex, :paredown, "0.1.1", "3d5560a77f143d87c506638d4059896414677fdbcd7b7bdd26230357fb4a78cc", [:mix], [{:phoenix_html, "~> 2.13", [hex: :phoenix_html, repo: "hexpm", optional: false]}], "hexpm", "743f76c7f2500e8a9fc933d9f81d1a706a5b907cc4eb2ada15bb2c17c7188197"},
+  "paredown": {:hex, :paredown, "0.1.3", "5ac8fdc7c87bd24fbae230297018d6c362ad6c9c978453d2e0e7c7939d1ff2bd", [:make, :mix], [{:phoenix_html, "~> 2.13", [hex: :phoenix_html, repo: "hexpm", optional: false]}], "hexpm", "e194b77efc254b35b96744d40f175a40a759dc7e78cb72678a0961b4df5bd4db"},
   "phoenix": {:hex, :phoenix, "1.5.1", "95156589879dc69201d5fc0ebdbfdfc7901a09a3616ea611ec297f81340275a2", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_html, "~> 2.13", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.0", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:plug, "~> 1.10", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 1.0 or ~> 2.2", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.1.2 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "fc272b38e79d2881790fccae6f67a9fbe9b790103d6878175ea03d23003152eb"},
   "phoenix_ecto": {:hex, :phoenix_ecto, "4.1.0", "a044d0756d0464c5a541b4a0bf4bcaf89bffcaf92468862408290682c73ae50d", [:mix], [{:ecto, "~> 3.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.9", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.0", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "c5e666a341ff104d0399d8f0e4ff094559b2fde13a5985d4cb5023b2c2ac558b"},
   "phoenix_html": {:hex, :phoenix_html, "2.14.2", "b8a3899a72050f3f48a36430da507dd99caf0ac2d06c77529b1646964f3d563e", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "58061c8dfd25da5df1ea0ca47c972f161beb6c875cd293917045b92ffe1bf617"},