.selected selectors should always include [aria-selected=true]

[shawnbot]

We have a ton of styles that target selected elements with .selected. In order for Primer to support accessibility improvement efforts, we should always apply the same styles to [aria-selected=true], as we've done in #786.

Here are the ways that we could go about it:

1. Just rewrite every instance of &.selected to &[aria-selected=true], &.selected. Easy peazy.

2. Add Sass variables that represent selector "qualifiers" for use with selector functions:

   $selected-selector: "[aria-selected=true], .selected";
   
   .SomeComponent {
     #{selector-append(&, $selected-selector)} { /* ... */ }
   }

   Full disclosure: I haven't used these before so I don't know how they work, and this syntax is pretty gnarly.

3. Add a Sass function, mixin, or postcss plugin that would support a more terse form:

   .SomeComponent {
     // again, this syntax is ugly
     #{selected(&)} { /* ... */ }
   
     // this is nicer...
     @include selected(&) { /* ... */ }
   
     // or maybe use a postcss plugin for :matches()?
     &:matches($selected-selector) { /* ... */ }
   }

After writing these out I'm in favor of the first option, particularly because it lines up with our stated principles. But I do think there's value in looking at the alternatives! 😁

I'm marking this as a minor release issue because technically it would be a new "feature"; however, we might want to consider this a general accessibility issue that we're "fixing".