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

On Jul 3, 2013, at 12:29 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> On Wed, Jul 3, 2013 at 12:20 PM, James Craig <jcraig@apple.com> wrote:
>> I'd like to request an "applied role" selector. This can't be done with existing attribute substring matching as it relies on the user agent internals to determine a few things.
>> 
>> 1. what the default role of a tag is.
>> 2. which role has been applied if multiple roles or invalid roles have been specified in the role attribute.
>> 
>> The following suggested selector:
>> 
>>        :role('button')
> 
> Syntax nit: while our policy on values coming from outside sources is
> generally to represent them as strings, all of the existing ARIA role
> values are compatible with the ident syntax, and I expect that to
> continue to be true.  So it should just take an ident, like
> :role(button).

Agreed.

>> Part of the reason this needs to be a new selector is because whether or not a specific element matches the selector is dependent upon whether or not the rendering engine supports the expected role. For example, using this selector and element combination:
>> 
>>        :role('checkbox')
>>        <div role="foo switch checkbox">
>> 
>> In most browsers today, the selector would match, because "foo" and "switch" are not valid ARIA 1.0 roles. However, in an ARIA 1.1-compliant browser, the same selector/element combination would not match, because the updated browser applied the 1.1 "switch" role instead of the fallback 1.0 "checkbox" role.
> 
> 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.

James

Received on Wednesday, 3 July 2013 20:08:56 UTC