fix: call-to-action, accordion, tags, and filter list state styling

[jhung]

• I've read the guidelines for Contributing to the Platform Co-op Toolkit

• This isn't a duplicate of an existing pull request

Description

This PR addresses a number of styling issues:

• Call to action text not readable when inverted (Fixes Call to action text not legible due to color #359 )
• Accordion does not use the proper focus and active styles (Fixes Accordion and Link List styles do not match designs #366 )
• Tag missing active state (Fixes Tag button missing active state #362 )
• Tag focus border is partly too thin (Fixes Tag links focus style does not match focus style in wireframes #316)

Steps to test

1. Go to the deployed instance for this PR: https://deploy-preview-380--pinecone.netlify.app/
2. Examine:
   • Atom > Tag
   • Molecule > Accordion
   • Molecule > Filter List
   • Layout > Search Results (check Filter list)
   • Layout > Archive (check Filter list)
   • Layout > Resource (check Tags)

Expected behavior:

The focus, hover, and active states should look like the design spec in major current browsers.

Related issues

Fixes #359
Fixes #366
Fixes #362
Fixes #316

[netlify]

Deploy preview for pinecone ready!

Built with commit d2374c8

https://deploy-preview-380--pinecone.netlify.app

[greatislander]

There's a weird accordion behaviour in Firefox when a button is active and focussed:

The border on the bottom should be hidden if possible.

[jhung]

@greatislander the issue you observed only happens if you use the debugger. If using keyboard or mouse to activate the various states, the top-border of the item below properly hides.

Putting PR back into draft - I found an issue with the mobile view on Filter List that needs to be fixed.

[greatislander]

@jhung It happens for me during regular use too.

[greatislander]

@jhung Will you have any capacity to wrap this up on Monday? Would like to get these styles into a release.

[cherylhjli]

hey @jhung, a few things come up for me -

• In the filter list for the archive layout and search result layout, the filter list checkboxes disappear or are a very low contrast colour in all browsers:

Also noticed that in safari, in the resource page, the CTA text is black instead of white:

[greatislander]

@jhung The filter list form needs a .form class (that should resolve the first of @cherylhjli's comments). As for the CTA I'm not sure but that needs to be resolved as this PR is supposed to fix CTAs.

[jhung]

@cherylhjli - fixed the CTA issue and the checkbox borders not appearing correctly.

There's another issue with the Archive filter list - all the child filter items are all showing up as "checkbox". This will be looked at in a different PR.

[cherylhjli]

@jhung the CTA looks great, the checkboxes are still disappearing for me?

[cherylhjli]

This looks great, Jon. Checkboxes are good. Tiny thing - I noticed that the checkboxes in subcategories are not selectable if you click the label, whereas the checkboxes that are on the top level are.

[greatislander]

I missed that issue @cherylhjli identified; I think it should be resolved in this PR. Sorry @jhung. I expect it is related to the "Checkbox" issue.

[jhung]

I missed that issue @cherylhjli identified; I think it should be resolved in this PR. Sorry @jhung. I expect it is related to the "Checkbox" issue.

The IDs were being all set to 'checkbox', so it appeared that the checkboxes were not working. The logic for setting the for and id in the checkbox template doesn't seem to be working if a value was not set in the template configuration file.

For now I've worked around the issue by giving values for all children checkboxes. Ideally the ID generation for the checkbox should be less fragile (perhaps using faker or nunjucks random to generate unique IDs where needed).

[greatislander]

@jhung jhung#1