index.html.erb

<style>
  dialog        { display: none; }
  dialog[open]  { display: block; }
</style>

<%= tag.button aria: { controls: "dialog" }, **aria.disclosure do %>
  Open Dialog
<% end %>

<%= tag.dialog id: "dialog", **aria.dialog do %>
  <h1 id="dialog-title">Modal Dialog</h1>

  <form>
    <label for="first_input">First input</label>
    <input id="first_input" type="text">

    <input type="hidden">

    <label for="second_input">Second input</label>
    <input id="second_input" type="text">

    <label for="third_input">Third input</label>
    <input id="third_input" type="text">

    <button type="submit" formmethod="dialog">Cancel</button>
    <button type="submit">Submit</button>
  </form>
<% end %>

<hr>

<%= tag.button aria: { controls: "details" }, **aria.disclosure do %>
  Open Details
<% end %>

<details id="details">
  <summary>Summary</summary>

  Details
</details>

<%= tag.button aria: { controls: "css-class" }, **aria.disclosure(expanded_class: "expanded") do %>
  Toggle CSS class
<% end %>

<div id="css-class">CSS class</div>

<%= aria.disclosure.tag.button aria: { controls: "hidden" } do %>
  Toggle Hidden
<% end %>

<div id="hidden">Visible</div>

<hr>

<a href="#feed" data-turbo="false">Skip to #feed</a>

<%= tag.div id: "feed", **aria.feed do %>
  <article>First article</article>
  <article>Second article</article>
  <article>Third article</article>
<% end %>

<hr>

<%= tag.form aria.combobox.merge(data: { controller: "form", action: "input->form#requestSubmit", turbo_frame: "names" }) do %>
  <button type="button" data-action="click->combobox#expand">Expand combobox</button>

  <label for="query">Names</label>
  <input id="query" <%= aria.combobox.combobox_target %> type="search" name="query" aria-expanded="<%= params[:query].present? %>">

  <turbo-frame <%= aria.combobox.listbox_target %> id="names">
    <% if params[:query].present? %>
      <% %w[ Alan Alex Alice Barbara Bill Bob ].filter { |name| name.starts_with? params[:query] }.each_with_index do |name, id| %>
        <button id="name_<%= id %>" type="button" <%= aria.combobox.option_target %> aria-selected="<%= id.zero? %>"><%= name %></button>
      <% end %>
    <% end %>
  </turbo-frame>
<% end %>