Skip to content

Commit

Permalink
Fix aria-labelledby on tables
Browse files Browse the repository at this point in the history
`aria-labelledby` accepts `id`s of other elements which act as an
accessible label(s). It's great for providing a label to tables, which
are large amounts of content; it helps people understand what the table
content actually is.

We're currently using `aria-labelledby` on tables in Administrate,
pointing to the `id` of the `h1` on index pages. However, this breaks
when tables are shown as attribute data on show pages, because the `id`
of `page-title` does not exist, and it also is not the proper label for
the table (the attribute name is). You can see an example of this here:
https://administrate-prototype.herokuapp.com/admin/customers/9849

This PR allows an `id` of an element to be passed into the partial
which displays the collection table, so that it can used as the value
for the table's `aria-labelledby` attribute.
  • Loading branch information
tysongach committed May 12, 2017
1 parent b159b5c commit 535fd14
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 4 deletions.
2 changes: 1 addition & 1 deletion app/views/administrate/application/_collection.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ to display a collection of resources in an HTML table.
[1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Collection
%>

<table aria-labelledby="page-title">
<table aria-labelledby="<%= table_title %>">
<thead>
<tr>
<% collection_presenter.attribute_types.each do |attr_name, attr_type| %>
Expand Down
8 changes: 7 additions & 1 deletion app/views/administrate/application/index.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,12 @@ It renders the `_table` partial to display details about the resources.
</header>

<section class="main-content__body main-content__body--flush">
<%= render "collection", collection_presenter: page, resources: resources %>
<%= render(
"collection",
collection_presenter: page,
resources: resources,
table_title: "page-title"
) %>

<%= paginate resources %>
</section>
2 changes: 1 addition & 1 deletion app/views/administrate/application/show.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ as well as a link to its edit page.
<section class="main-content__body">
<dl>
<% page.attributes.each do |attribute| %>
<dt class="attribute-label">
<dt class="attribute-label" id="<%= attribute.name %>">
<%= t(
"helpers.label.#{resource_name}.#{attribute.name}",
default: attribute.name.titleize,
Expand Down
3 changes: 2 additions & 1 deletion app/views/fields/has_many/_show.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ from the associated resource class's dashboard.
<%= render(
"collection",
collection_presenter: field.associated_collection,
resources: field.resources(params[field.name])
resources: field.resources(params[field.name]),
table_title: field.name
) %>

<% if field.more_than_limit? %>
Expand Down

0 comments on commit 535fd14

Please sign in to comment.