Skip to content

Commit

Permalink
Merge pull request #5321 from nebulab/waiting-for-dev/admin/search_role
Browse files Browse the repository at this point in the history 
[Admin] Tweaks for search area a11y
  • Loading branch information
@waiting-for-dev
waiting-for-dev authored Aug 11, 2023
2 parents 6883d21 + a9f35c3 commit df03854
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 70 deletions.
140 changes: 70 additions & 70 deletions admin/app/components/solidus_admin/ui/table/component.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,81 +10,81 @@
>
<% toolbar_classes = "h-14 p-2 bg-white border-b border-gray-100 justify-start items-center gap-2 visible:flex hidden:hidden" %>

<div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="searchToolbar">
<%= form_with(
url: @search_url,
method: :get,
html: {
id: search_form_id,
class: 'flex-grow',
"data-turbo-frame": table_frame_id,
"data-turbo-action": "replace",
"data-#{stimulus_id}-target": "searchForm",
"data-action": "reset->#{stimulus_id}#search",
},
) do |form| %>
<label class="items-center gap-1 p-0 inline-flex w-full justify-start relative">
<%= render @icon_component.new(name: 'search-line', class: "w-[1.4em] h-[1.4em] fill-gray-500 absolute ml-3") %>
<span class="sr-only">
<%= t('.search_placeholder', resources: resource_plural_name) %>
</span>
<input
name="q[<%= @search_key %>]"
value="<%= params.dig(:q, @search_key) %>"
type="text"
placeholder="<%= t('.search_placeholder', resources: resource_plural_name) %>"
class="peer w-full placeholder:text-gray-400 py-1.5 px-10 bg-white rounded border border-gray-300"
data-<%= stimulus_id %>-target="searchField"
data-action="<%= stimulus_id %>#search"
>
<button
class="absolute right-0 mr-3 peer-placeholder-shown:hidden"
data-action="<%= stimulus_id %>#clearSearch"
>
<%= render @icon_component.new(name: 'close-circle-fill', class: "w-[1.4em] h-[1.4em] fill-gray-500") %>
<span class="sr-only"><%= t('.clear') %></span>
</button>
</label>
<% end %>

<div class="ml-4">
<%= render @button_component.new(
text: t('.cancel'),
scheme: :ghost,
"data-action": "#{stimulus_id}#cancelSearch",
) %>
</div>
</div>

<% if @filters.any? %>
<div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="filterToolbar">
<div class="font-semibold text-gray-700 text-sm px-2"><%= t('.refine_search') %>:</div>
<% @filters.each do |filter| %>
<label class="flex gap-2 px-2">
<%= render component('ui/forms/checkbox').new(
name: filter[:name],
value: filter[:value],
size: :s,
form: search_form_id,
'data-action': "#{stimulus_id}#search",
) %>
<span class="text-gray-700 leading-none text-sm self-center"><%= filter[:label] %></span>
<div role="search">
<div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="searchToolbar">
<%= form_with(
url: @search_url,
method: :get,
html: {
id: search_form_id,
class: 'flex-grow',
"data-turbo-frame": table_frame_id,
"data-turbo-action": "replace",
"data-#{stimulus_id}-target": "searchForm",
"data-action": "reset->#{stimulus_id}#search",
},
) do |form| %>
<label class="items-center gap-1 p-0 inline-flex w-full justify-start relative">
<%= render @icon_component.new(name: 'search-line', class: "w-[1.4em] h-[1.4em] fill-gray-500 absolute ml-3") %>
<input
name="q[<%= @search_key %>]"
value="<%= params.dig(:q, @search_key) %>"
type="search"
placeholder="<%= t('.search_placeholder', resources: resource_plural_name) %>"
class="peer w-full placeholder:text-gray-400 py-1.5 px-10 bg-white rounded border border-gray-300 search-cancel:appearance-none"
data-<%= stimulus_id %>-target="searchField"
data-action="<%= stimulus_id %>#search"
aria-label="<%= t('.search_placeholder', resources: resource_plural_name) %>"
>
<button
class="absolute right-0 mr-3 peer-placeholder-shown:hidden"
data-action="<%= stimulus_id %>#clearSearch"
aria-label="<%= t('.clear') %>"
>
<%= render @icon_component.new(name: 'close-circle-fill', class: "w-[1.4em] h-[1.4em] fill-gray-500") %>
</button>
</label>
<% end %>
</div>
<% end %>

<div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="scopesToolbar">
<div class="flex-grow">
<%= render @tab_component.new(text: "All", current: true, href: "") %>
<div class="ml-4">
<%= render @button_component.new(
text: t('.cancel'),
scheme: :ghost,
"data-action": "#{stimulus_id}#cancelSearch",
) %>
</div>
</div>

<%= render @button_component.new(
'aria-label': t('.filter'),
icon: "filter-3-line",
scheme: :secondary,
"data-action": "#{stimulus_id}#showSearch",
) %>
<% if @filters.any? %>
<div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="filterToolbar">
<div class="font-semibold text-gray-700 text-sm px-2"><%= t('.refine_search') %>:</div>
<% @filters.each do |filter| %>
<label class="flex gap-2 px-2">
<%= render component('ui/forms/checkbox').new(
name: filter[:name],
value: filter[:value],
size: :s,
form: search_form_id,
'data-action': "#{stimulus_id}#search",
) %>
<span class="text-gray-700 leading-none text-sm self-center"><%= filter[:label] %></span>
</label>
<% end %>
</div>
<% end %>

<div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="scopesToolbar">
<div class="flex-grow">
<%= render @tab_component.new(text: "All", current: true, href: "") %>
</div>

<%= render @button_component.new(
'aria-label': t('.filter'),
icon: "filter-3-line",
scheme: :secondary,
"data-action": "#{stimulus_id}#showSearch",
) %>
</div>
</div>

<div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="batchToolbar" aria-label="<%= t(".batch_actions") %>">
Expand Down
1 change: 1 addition & 0 deletions admin/config/solidus_admin/tailwind.config.js.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,5 +88,6 @@ module.exports = {
require('@tailwindcss/container-queries'),
plugin(({ addVariant }) => addVariant('hidden', '&([hidden])')),
plugin(({ addVariant }) => addVariant('visible', '&:not([hidden])')),
plugin(({ addVariant }) => addVariant('search-cancel', '&::-webkit-search-cancel-button')),
]
}

0 comments on commit df03854

Please sign in to comment.