Add the status filter

[dpasque]

What Does This PR Add/Change?

Adds the status filter! This one is pretty simple and small 😄

For design reference, see: pciE2j-1VQ-p2#comment-1724

Oh, and it was annoying me, so I updated our "primary" color to be closer to the mock-up!

Testing Instructions

I've tested this one a bunch already...

• [ ] Unit tests pass
• [ ] Axe DevTools pass
• [ ] Screen reader works well

Feel free to make sure the design/feel looks good!

Issues

Related to #
Closes #

[john-legg]

Hey @dpasque sorry for the late review. Everything looks great 👍 I just had a few minor things that I noticed:

nitpick (if-minor): When using Tab to focus on the segments, it looks the border for the focused segment is clipped a bit by the segment next to it:

I can't really figure out why that is, maybe you'll be able to spot it faster 😆

issue (non-blocking): In VoiceOver, I noticed that after selecting an option (e.g. "Closed), it'll read out "Closed, selected." If I go to select a second, different option (e.g. "Open"), it doesn't read it out -- I just hear the selected chime. I don't know if this is a VoiceOver quirk, but I just wanted to mention it!

Note: To clarify, it seems to happen on the second selection and beyond.

[dpasque]

Hey John! 😄 Great questions!

When using Tab to focus on the segments, it looks the border for the focused segment is clipped a bit by the segment next to it

"It's an illusion, Michael!" 😆 This is actually a goofy trick-on-the-brain thing. The border isn't cut off, it's just that it's a similar color to the border for the whole control, so it makes those touching sides seem like a thicker border, if that makes sense. Really the best way around that would be to pick a different :focus-visible kind of style. We could, for example, opt for a different color? Or do an inset box shadow? Any thoughts there?

In VoiceOver, I noticed that after selecting an option (e.g. "Closed), it'll read out "Closed, selected." If I go to select a second, different option (e.g. "Open"), it doesn't read it out -- I just hear the selected chime. I don't know if this is a VoiceOver quirk, but I just wanted to mention it!

Hmm, I'm having a hard time reproducing this 😅 -- could you share more about the keyboard actions you're using??

[john-legg]

"It's an illusion, Michael!" 😆

LOL that was perfection 👌 I never thought I would see that reference in a GitHub PR 😆

The border isn't cut off, it's just that it's a similar color to the border for the whole control, so it makes those touching sides seem like a thicker border

Yeah, that makes way more sense. I see it now! I'll have to experiment and see what works the best, but I think what you have is perfectly fine for now.

Hmm, I'm having a hard time reproducing this 😅 -- could you share more about the keyboard actions you're using??

Now that this PR is merged into trunk, I'm having a bit of trouble reproducing it as well 😅 mostly because selecting an option goes immediately into duplicate searching. Seems like it's not an issue anymore!