Replace <fieldset> with <section> on show pages #2504
Conversation
Uaitt
force-pushed
the
replace-fieldsets-on-show-pages
branch
from
6b001a5 to
138af76
Compare
| @@ -43,9 +43,13 @@ as well as a link to its edit page. | |||
| <section class="main-content__body"> | |||
| <dl> | |||
| <% page.attributes.each do |title, attributes| %> | |||
| <fieldset class="<%= "field-unit--nested" if title.present? %>"> | |||
| <section class="<%= "field-unit--nested" if title.present? %>"> | |||
There was a problem hiding this comment.
Semantically, <fieldset> elements typically wrap interactive form controls. Since the show templates present information without the opportunity to edit that information, this change improves the semantics of what these elements are communicating.
Having acknowledged that, rendering multiple <h1> elements poses some accessibility risks, and nesting a <nav> element (a role that comes with its own set of semantics and requirements) inside an <h1> poses additional risks.
Are there other structural changes we could make to achieve a similar outcome without the risks?
There was a problem hiding this comment.
@seanpdoyle what element (or elements) would you recommend to replace my <h1> and <nav> combination? Do you have something in particular in mind? 🤔
nickcharlton
added
the
views-and-styles
This PR fixes issue #2503.
Basically, the
<fieldset>s and<legend>s inapp/views/administrate/application/show.html.erbapp/views/fields/has_one/_show.html.erbhave been replaced by a combination of
<section>s,<h1>s and<nav>s. Those new elements have then been styled so that they look exactly like the previous two.A few screenshots down here 👇
BEFORE THIS CHANGE:
Show page of an object with some grouped and ungrouped attributes.
Show page of an object with an
has_onefield and some other attributes. (Notice the overlapping of borders).AFTER THIS CHANGE:
Show page of an object with some grouped and ungrouped attributes. (Note the difference in width of the grouped block).
Show page of an object with an
has_onefield and some other attributes. (Note that there's no more overlapping).Any feedback is welcomed 😃.
PLEASE NOTE that I am not a frontend dev, if you notice something very stupid or inappropriate in this PR don't be afraid of telling me 😄.