ProductAttributeControl: Polish style, screen reader interaction

[ryelle]

Following up from #405 - cleans up the styling to match the design & fix missing aria info for screen reader users.

Accessibility

• I've tested using only a keyboard (no mouse)
• I've tested using a screen reader
• All text has at least a 4.5 color contrast with its background

Screenshots

Example of an attribute with 2 terms selected

On the initial load, all attributes are collapsed. If an item has no terms, it's disabled (unclickable and dimmed)

EDIT: forgot to add a "Before" - this is what it looks like on master now:

How to test the changes in this Pull Request:

1. Add Products By Attribute block
2. Click around selecting different attribute combos
3. Try navigating the block with a screen reader
4. Attributes should be flagged as "expanded" or "collapsed" depending on if they're selected
5. Selecting attributes & loading terms should work, and you should be able to select terms once they're loaded.

[joshuatf]

Looks good! Pre-approving pending one design question.

[joshuatf]

Should this be horizontally centered?

[jameskoster]

Couple of small issues;

1. The count on the attribute rows should have a different treatment to the count on the term rows as they're counting different things. See here for the latest design. If adding the label to the count on the attribute row is problematic (or a lot of work) then we should just remove that count - the product count on the term row is more important.
2. Speaking of which, I'm not seeing the product count on the term rows.
3. I'm not seeing the up/down chevrons. Latest Chrome. https://cloudup.com/c4KqFiX_CSH

[ryelle]

I'm not seeing the product count on the term rows.

I was basing it off this design linked in #405 - I assumed that one was the latest. Now I see that that's the Featured Product design 🙃

Does that mean the background for the terms should be that darker color, with borders between?

If adding the label to the count on the attribute row is problematic (or a lot of work) then we should just remove that count - the product count on the term row is more important.

I can easily add the product count back to the terms. It's not built to allow for different styling of the count though - but that would also mean we can't do it on the Featured Product variations count, so if that's important we can look at changing the SearchListControl (but not for this iteration).

I'm not seeing the up/down chevrons

Strange– if you inspect element in the empty space next to the count, do you see the :after element on the button? I'm also using latest Chrome, so maybe... an extension you have is blocking the SVG background?

[jameskoster]

Does that mean the background for the terms should be that darker color, with borders between?

No, the current row styling is good :)

It's not built to allow for different styling of the count though

Let's just go ahead and remove the terms count. I'm not sure how useful that info is anyway. We can revisit when we add variation support to the featured product block.

do you see the :after element on the button?

Yeah the code looks good. For some reason the icon just isn't rendering. I only have one browser extension which I disabled - no dice. It works in Safari. Other instances of svg's as background (e.g. https://codepen.io/netsi1964/pen/HGJms) are working fine. Weird.

updated the row counts for attributes & terms

[ryelle]

I'm going to go ahead and merge this since the design feedback has been addressed. We can make any "last-minute" tweaks on Monday before releasing 1.4 if we need to.