Re: [selectors4] Request for :role() selector (matches computed role using UA internals, not attribute substring matching)

On Wed, Jul 3, 2013 at 1:08 PM, James Craig <jcraig@apple.com> wrote:
> On Jul 3, 2013, at 12:29 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>> What sort of things would you use this selector for?  I don't think
>> you can generally style things according to their role;
>
> Why not?
>
> :role(checkbox):not(input) { /* style an ARIA checkbox to look like a checkbox */ }
> :role(switch):not(input) { /* style an ARIA switch to look like a switch */ }
>
> Would result in different styles for this element depending on the browser capabilities:
> <div role="switch checkbox">
>
> Another example might be a user agent style sheet that enlarged the size of buttons for a user.
>
> /* Note: !important just b/c this is a USER style sheet. */
> *:role:(button) {
>         -vendorprefix-appearance: none !important; /* override the default styles for the element */
>         font-size: 2rem !important;
>         margin: 0.2rem 0.5rem !important;
>         padding: 0.2rem 0.5rem !important;
>         color: red !important;
>         background-color: white !important;
>         border: outset 0.3rem red !important;
> }
>
>> the precise
>> element used can vary considerably and affect what styles work.
>
> For some properties that is true, but may be alleviated somewhat with native element display overrides like "-webkit-appearance: none;"
>
> For many properties, this won't matter. For example, background-color works on just about everything.
>
> *:role(textbox):focus {
>         background-color: yellow; /* focus highlight for text inputs */
> }
>
>> Is there a use related to JS?
>
> Sure. document.querySelector() could be used for assigning event handlers, validation, automation, etc.

Okay, seems reasonable to me.

~TJ

Received on Wednesday, 3 July 2013 20:10:51 UTC