ARIA attributes as CSS selectors

In our preferred CSS syntax, writing that change within a single set of braces would look like this:

.co-Button {
    background-color: $color-button-passive;
    &[aria-selected="true"] {
        background-color: $color-button-selected;
    }
}

We use the ampersand (&) as a parent selector and the attribute selector to leverage the enhanced specificity having the aria attribute on the node provides. Then we can just style the changes as needed.

The ability to nest state changes within a rule in this manner provides increased developer ergonomics. The intention is that a rule is only defined at root level once throughout the entire application styles. This provides a single source of truth to define all possible eventualities pertaining to that class. For more information, ensure you read Chapter 8, The Ten Commandments of Sane Style Sheets.

Tip

As a related note, the CSS Selectors Level 4 specification (https://drafts.csswg.org/selectors...