backdrop
[UX][A11y] Add layout template description to list of Layout Templates
Description of the need
I think for all layout templates it would be good to display the description if there is one on the list of Layout Templates. The UI for Flexible Layout Templates includes a description. While the images for core templates give an idea, it would be good a clear textual description of the template for accessibility. The .info files and the parser support description which is widely used for modules and themes, but doesn't appear in core or a few contrib I checked.
For flexible templates, contrib and custom templates, having the description would help site architects to remember any key features that would be too wordy to put in the name.
Proposed solution
A description column is added to the table.
I have proposed descriptions for all the visible core layout templates
Alternatives that have been considered
I looked for a hook that could allow this to be contrib but I didn't see an obvious one.
Is there a Drupal or Backdrop contributed module that accomplishes this? No
EDIT: Updated to reflect revised approach of putting description in own column
Draft of feature description for Press Release (1 paragraph at most)
Backdrop now includes layout template descriptions in the list of layout templates
I've added a PR with a draft description for Boxton to illustrate the context. It will need descriptions for the rest of core layout templates (suggestions welcome).
~~It will also need some more work to expose the descriptions for flexible layout templates. I've had a quick look, but I haven't yet worked out why descriptions are not returned here or where to add them in.~~
This makes sense to me. If I understand correctly, @yorkshire-pudding - core templates do not currently have descriptions, is that correct?
Maybe this PR should include descriptions of core templates.
I believe that maybe the description text could be a point or two smaller, maybe softer, and better positioned.
Maybe something like this:
Hi @stpaultim Thanks for the feedback. I wasn't sure which way to go on styling the description, but your suggestion makes sense.
Maybe this PR should include descriptions of core templates.
I have included a draft description for Boxton and had proposed that the PR would include descriptions for all. Perhaps I should put in descriptions for all so people can then improve.
@stpaultim I've updated the PR with some styling in the seven theme and descriptions for all core templates that are visible. I have ignored the legacy templates as these are not displayed in the table, but can add if necessary.
@yorkshire-pudding Thanks. I like your changes.
I have not looked to see if we have other examples elsewhere, regarding styling of these descriptions. One thing to do, would be to look around the UI and see if we're being consistent with how things are done elsewhere. But, on it's own, I like how it looks now.
Just to add that out of the box it looks like this:
It is only when a flexible layout is added that Moscone Flipped and Simmons wrap to the next line
I have not looked to see if we have other examples elsewhere, regarding styling of these descriptions. One thing to do, would be to look around the UI and see if we're being consistent with how things are done elsewhere. But, on it's own, I like how it looks now.
I did have a look around but couldn't see any comparable tables. The other option would be to put description in a column of its own, but then I think the styling would need to match the 'Type' column.
Here is what it would look like putting the description in a column:
I think that perhaps this is the better approach. It will make it consistent with Content Types:
@stpaultim - I've updated the PR and the issue description to reflect this new more consistent approach and I think this is a better solution. It doesn't involve adding any extra styling and will not cause wrapping around the preview image.
@stpaultim - two questions when you have a chance. Am I right in thinking that because this is UX/Accessibility it could go into a bug fix release and not have to wait for a minor release? Should I make the descriptions say "A template with a ..." or "A layout template with a ..." rather than "A layout with a"?
@yorkshire-pudding - You are correct in that UX issues can go into bug fix releases unless a core committer believes otherwise. In my opinion, this looks to me like the kind of change that could easily go into a bugfix release.
These are Layout templates and not layouts. So it would probably be better to refer to them as such. I wonder if we could remove that repetitive reference altogether and just say something like:
"Includes a header, top, content, bottom, and footer. This is the default template for the home page." "Includes a header, top, three columns, bottom, and footer."
I don't feel strongly about this. But, if we include the word layout, I think it needs to be layout template.
Will this mean we need to ask contrib maintainers to add descriptions to their custom layout templates?
@NormPlum It would only mean that if a contrib maintainer includes a description in their layout templates, the description will show up. But, no description would ever be required, so it would have no negative effect if a description is not available.
I like this! Finally the description field for flexible templates makes sense. So far, these don't show up anywhere (AFAIK).
I totally agree, that this provides helpful info, as the image alone (with empty alt text) isn't sufficient. Works for me!
I can see that the th/td for type in the table get the "priority-low" class, but descriptions don't. So they're not collapsed on narrow screens. As they take a lot of space, I think this should get added.
Would anyone care to remove the "pr - needs code review" and add RTBC? Thanks PS the test failure is a CSpell fail in an unrelated part of the code.
This looks good to go. 👍 And I'm assuming that @stpaultim is also happy with the outcome. RTBC!
Merged https://github.com/backdrop/backdrop/pull/5016 into 1.x and 1.30.x. Thank you @yorkshire-pudding, @indigoxela, @stpaultim, and @izmeez!