Re: <toggle-button> Custom Element query

Ashraf,

You should not change the label of a toggle button. The ARIA Authoring 
Practices specifically advise against doing so [1]:

"Important: it is critical the label on a toggle does not change when 
its state changes."

If you intend to use this button in production you may want to think 
about using an autonomous custom element instead.

The customised custom element you're using now has the advantage of 
extending the button element, but it isn't supported in Safari. If you 
create an autonomous custom element you'll get support in Safari, but it 
means you'll need to build the button from scratch including all its 
semantics and mouse/keyboard interaction.

If you want to give your toggle button other behaviour you just define 
one or more functions within the class, and then call them from within 
the connectedCallback.


Léonie
[1] https://www.w3.org/TR/wai-aria-practices/#button



On 19/02/2020 23:45, ashraf aleem wrote:
> Hi All,
>           I am trying to use a Custom Element based on the 1st example 
> in the following article by Leonie Watson:
> https://www.24a11y.com/2019/web-components-and-the-aom/

> 
> Only difference being i want also change/toggle text too i.e. Play <-> 
> Pause as the state changes
> 
> Please find the all 3 variants i intend to use it in:
> 
> https://codepen.io/ahnafcodes/pen/mdJrPOd

> 
> Please let me know let me know if I am violating any thing.
> 
> *Note: *This will not work in Safari or IE11. I plan to use a 
> https://github.com/WebReflection/heresy to make it work in Safari and 
> make it simpler
> 
> Thanks
> Ashraf Mohammad
> 

-- 
Director @TetraLogical

Received on Thursday, 20 February 2020 09:37:26 UTC