Add meter example for issue 1105

[a11ydoer]

Resolves #1105

initial draft of meter example.

Review checklist

• Editorial review by @mcking65 @carmacleod
• Functional review by @smhigley @sh0ji @carmacleod
• Visual design review by @ZoeBijl
• Accessibility review by @ZoeBijl
• Code review by @smhigley @ZoeBijl
• Test review by @spectranaut

---

Preview | Diff

[ZoeBijl]

Thank you for your changes @smhigley, this looks great! I think the SVG would be better if that means we can retain the fill. To me it feels wrong to only show the two shapes with borders. Feels like that takes away some clarity of what this is.

What do you think?

[carmacleod]

Looks good, @smhigley !

I agree with @ZoeBijl that the meter would be "more clearly a meter" if we could remove the inner border. (using SVG sounds fine - but curious why we wouldn't just change the border color in js at the same time as the fill color? Sorry if that's a CSS noob question! 😄 )

Also just wondering whether having the Pause button after the meter would feel more natural?
i.e. a screen reader user navigating sequentially would encounter the Pause button and might wonder what it was for? And it might look more visually coherent to have the meter right next to its label, instead of having a Pause button in between? Would love to have other opinions on this thought.

[smhigley]

@carmacleod putting the pause button after the meter makes sense to me! The reason I have a border on there is because not all colors between green and red pass 3:1 contrast (particularly in the yellow range).

@mcking65 / @spectranaut independent of what we do with the fill and pause button position, the tests should be ready for review! I remember Matt saying something about wanting to get it done on Friday on the call :)

[carmacleod]

The reason I have a border on there is because not all colors between green and red pass 3:1 contrast (particularly in the yellow range).

Ah, of course. I misunderstood what @ZoeBijl said earlier, but I get it now. :)

[carmacleod]

+1

[smhigley]

@carmacleod I don't think you misread Zoë's comment, if you mean the one from before I added my changes. Using just background doesn't work for Windows HCM, and if that were the only issue then your suggestion would work. But then I added a changing fill bg color so now there's the additional contrast issue :).

[carmacleod]

@smhigley Actually, I meant this comment:

I think the SVG would be better if that means we can retain the fill. To me it feels wrong to only show the two shapes with borders. Feels like that takes away some clarity of what this is.

I misread the 2nd sentence as:

To me it feels wrong to only show the two shapes with borders.

[spectranaut]

This is a test review! Looks good to me.

Two minor things:

• we have a norm of writing a test for the role as well -- there is a helper function called assertAriaRole. Really the only thing it does is make sure the role is on the element type listed in the attribute table.
• There is an ongoing discussion of whether or not to use t.plan() when it's not strictly necessary. None of these tests need t.plan() (there is no branching) but I'm personally in favor of adding it everywhere in order to prevent forgetting it. Feel free to contribute opinions to that discussion :)

Edit: We are going to move forward without t.plan. So you can mark tests are reviewed and completed!

[smhigley]

The meter fill has been updated to use an SVG, and shows up in Windows HCM like this:

[ZoeBijl]

Approved for the visual and accessibility reviews.

[spectranaut]

Approval for test review!

[mcking65]

Editorial review and corrections complete.

I made some minor phrasing changes for consistency with other parts of the APG, fixed some link targets, and removed list markup where there was only 1 list item.

The pause button is not documented or tested. I created #1222 for this.

Seeing that all other reviews are complete, this example is ready to ship!