Styleguide updates

[Dahianna]

Now that we changed the design for the blog template we need to update the blog post template in the guide.

• [ ] Documentation should include gotchas when relevant. Make sure that we fully document all the components that someone needs to make something work
• [ ] Consider allowing accordions to both expand at the same time
• [ ] Accordions should go full width, but have constrained content
• [ ] Could include simple and complex examples of how code is generated. Think project cards. The simple include is great, but the html example is also useful
• [ ] Add instructions and guidelines for project images
• [ ] Update the guide

[Dahianna]

So, I looked back at the original issue in the 18F-site repo and it was created by someone who left 18F. I checked the guide and it seems to be up to date to me.

[Dahianna]

• code for sidebar doesn't populate
• code for blog tags doesn't populate
• It seems example need to be reviewed for blockquotes
• Consider removing team photo section and adding images for project pages

[cmajel]

Per chat, we could try using this include that works on other parts of the guide, and see if it fills in the code accordion.

{% include details-code.html title='testimonial' content=testimonial_codeblock lang="html" description=testimonial_description %}

[Dahianna]

I tried to fixed it for the sidebar but it didn't work. Not sure if I have any mistakes on the code https://github.com/18F/18f.gsa.gov/pull/3078

[cmajel]

I can look at this and see if I can figure out why this fix isn't working. Otherwise, we may need a dev consult.

[cmajel]

Alright, I looked into the missing code blocks and I have a theory. Putting my notes here while I continue to investigate.

*18f site repo https://github.com/18F/18f.gsa.gov

It appears that the code block do have content inside, but sometimes the div wrapping the codeblock's content is missing a aria-hidden="false" flag that actually allows it to be displayed.

Sidebar example, where there is no flag

Breadcrumb example, where is there is a flag

When I manually add the flag to the sidebar (and other code components where the code block doesn't open), it appears.

I'm not sure why the flag appears on some blocks and not others. But, I can take another look next week. Or, @Dahianna if there is a dev helping with the 18F site, they may be able to give a faster answer.

[cmajel]

Adding a note that I believe the base code for this accordion component comes from details-code.html and that the div is populated here in lines 22-24. However, I don't see an obvious way for a aria-hidden="false" flag to be applied to the div on line 22.

I also confirmed that when I hardcode a aria-hidden="false" on that line 22 div, it opens the accordion by default, and doesn't toggle on touch.

[adunkman]

Looks like there’s an ID collision happening preventing the accordion from functioning properly.

The aria-hidden flags are added by JavaScript, and the JavaScript is finding h3#sidebar rather than div#sidebar as intended.

This is a collision between auto-generated IDs for the heading and auto-generated IDs for the accordion. A quick, easy, and perhaps right fix would be to change details-code.html to add a suffix to its IDs so it generates something different — perhaps {{ include.title | slugify }}-accordion?

[cmajel]

@cmajel to take a look and see if this branch is possibly out of date and causing the issue. If not, ping eddie again on the build error.