Search count inside label

[ChristopherChudzicki]

What are the relevant tickets?

For https://github.com/mitodl/hq/issues/5708

Description (What does it do?)

Puts the search count inside the <label> for screenreaders

Screenshots (if appropriate):

No visual change

How can this be tested?

1. Check that the search page has no visual change
   • OK I guess there is one... the mouse cursor is pointer on the count now, too.
   • you might want to check that the checkboxes change color the same as prod on hover, etc
2. Check that the checkbox has count as part of its label in the accessibility tree. You could also enable a screenreader like voiceover, if you want. (See screenshot above)

Checklist:

• Review with Put count inside label  course-search-utils#151

[jonkafton]

Just the one mistype on the selector.

For my curiosity, what is the intent of this change? I would have thought the count to be semi-auxiliary information that clutters the audio. I guess all information should be available to screen readers, though doesn't labels such as "With Certificate 20" break the semantics? Would role="presentation" help, or does that default the point?

[jonkafton]

&.checked here (impact is that we don't get the darker text when checked).

[ChristopherChudzicki]

I would have thought the count to be semi-auxiliary information that clutters the audio. I guess all information should be available to screen readers, though doesn't labels such as "With Certificate 20" break the semantics?

I can see both viewpoints (clutter audio / useful info) but am deferring to the screenreader review on this one. This particular piece of screenreader feedback—and many others we're working on lately—come from a full-time screenreader user + accessibility expert who works for MIT.