feat(member): bring the overview table up to WCAG 2.2 AA
This commit is contained in:
parent
0c375234c8
commit
c2cb3edab8
6 changed files with 91 additions and 39 deletions
|
|
@ -1093,12 +1093,17 @@ defmodule MvWeb.CoreComponents do
|
|||
<tr
|
||||
:for={row <- @rows}
|
||||
id={@row_id && @row_id.(row)}
|
||||
class={[
|
||||
table_row_tr_class(
|
||||
table_row_selected?(assigns, row),
|
||||
@sticky_first_col
|
||||
)
|
||||
]}
|
||||
class={
|
||||
[
|
||||
table_row_tr_class(
|
||||
table_row_selected?(assigns, row),
|
||||
@sticky_first_col
|
||||
),
|
||||
# WCAG 2.4.11: keep a keyboard-focused row from being hidden under
|
||||
# the sticky header by reserving header-height scroll margin.
|
||||
@sticky_header && "scroll-mt-16"
|
||||
]
|
||||
}
|
||||
data-row-interactive={@row_click && "true"}
|
||||
data-selected={table_row_selected?(assigns, row) && "true"}
|
||||
title={@row_click && @row_tooltip}
|
||||
|
|
@ -1178,19 +1183,49 @@ defmodule MvWeb.CoreComponents do
|
|||
<td
|
||||
:for={dyn_col <- @dynamic_cols}
|
||||
phx-click={@row_click && @row_click.(row)}
|
||||
class={["max-w-xs truncate", @row_click && "hover:cursor-pointer"]}
|
||||
class={[
|
||||
"max-w-xs",
|
||||
dyn_col[:custom_field].value_type != :boolean && "truncate",
|
||||
@row_click && "hover:cursor-pointer"
|
||||
]}
|
||||
>
|
||||
{if dyn_col[:render] do
|
||||
rendered = dyn_col[:render].(@row_item.(row))
|
||||
<%= if dyn_col[:custom_field].value_type == :boolean do %>
|
||||
<% val = dyn_col[:render] && dyn_col[:render].(@row_item.(row)) %>
|
||||
<%= cond do %>
|
||||
<% val == true -> %>
|
||||
<div class="flex justify-center">
|
||||
<.icon
|
||||
name="hero-check-circle"
|
||||
class="size-4 text-success"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="sr-only">{gettext("Yes")}</span>
|
||||
</div>
|
||||
<% val == false -> %>
|
||||
<div class="flex justify-center">
|
||||
<.icon
|
||||
name="hero-x-circle"
|
||||
class="size-4 text-error"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="sr-only">{gettext("No")}</span>
|
||||
</div>
|
||||
<% true -> %>
|
||||
<.empty_cell sr_text={gettext("Not specified")} />
|
||||
<% end %>
|
||||
<% else %>
|
||||
{if dyn_col[:render] do
|
||||
rendered = dyn_col[:render].(@row_item.(row))
|
||||
|
||||
if rendered == "" do
|
||||
""
|
||||
if rendered == "" do
|
||||
""
|
||||
else
|
||||
rendered
|
||||
end
|
||||
else
|
||||
rendered
|
||||
end
|
||||
else
|
||||
""
|
||||
end}
|
||||
""
|
||||
end}
|
||||
<% end %>
|
||||
</td>
|
||||
<td :if={@action != []} class="w-0 font-semibold">
|
||||
<div class="flex gap-4">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue