Add support for spec-compliant boolean attributes.

jarek-foksa / xel

Xel - Widget toolkit for building native-like Electron and Web apps

https://xel-toolkit.org

Other

679 stars 58 forks source link

Add support for spec-compliant boolean attributes. #58

Closed depeele closed 6 years ago

depeele commented 6 years ago

When using boolean attributes, the spec states:

2.4.2. Boolean attributes A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case- insensitive match for the attribute’s canonical name, with no leading or trailing white space.

For x-select, xel was using the literal string true when searching for the currently selected item. This misses the selected item when using attribute presence/absence to indicate the boolean value.

This pull request should allow for both usages -- attribute presence/absence or an attribute with an explicit value that is not false.

jarek-foksa commented 6 years ago

"selected" attribute on <x-menuitem> is not a boolean attribute, it is a tristate attribute. AFAIK tristate attribute type is not defined by HTML, but it is used by many ARIA attributes.

The possible values are:

true - <x-menuitem selected="true"> - menu item is selected (draw the checkmark)
false - <x-menuitem selected="false"> - menu item is not selected (draw the checkmark, but make it invisible)
null - <x-menuitem> - menu item is not selectable (don't draw the checkmark)

depeele commented 6 years ago

I would have thought an unselectable menu item would be represented by an <x-menuitem> with a disabled property...

How does disabled differ from selected=null?

jarek-foksa commented 6 years ago

Disabled menu item is greyed out and it does not change appearance when hovered, as demonstrated on https://xel-toolkit.org/elements/x-menuitem

depeele commented 6 years ago

So, if I'm following the documentation, code, and comments correctly, <x-menuitem> treats the selected attribute as a tristate to allow the component to be used within an <x-select> and, in that case, receive a default checkmark icon placeholder that is used to identify the selected value(s).

Is that correct?

jarek-foksa commented 6 years ago

Menu items inside <x-menubar> or <x-button> could be togglable (i.e. show a checkmark or a placeholder for a checkmark) as well.

I agree though that the selected attribute with a tristate type is confusing and we should probably replace it with two separate boolean attributes. Lets discuss it in #59.