Re: <toggle-button> Custom Element query

Hi Ashraf,

my comment makes only sense, if you’re looking for a real world component to use in an actual website or web app.

If you’re “just” learning how to build a custom element, go for it!

Anyway you should read the article as it covers the question of what to write on a toggle button. ;-)

--
Mit freundlichen Grüßen

Marc Haunschild
www.mhis.de

Am 20.02.2020 um 06:50 schrieb Marc Haunschild <[email protected]>:

 Hi Ashraf,

I don’t  know the example - but the first rule of aria is, not to use it, if not necessary.

Of course a toggle button always needs aria, but not for telling it is a button, if you use the button element. So that’s the first thing you should change.

And then: if you already know, that your solution doesn’t work for some users, why you don’t change it?

I’d recommend you to have a look at Heydon Pickerings inclusive components.

https://inclusive-components.design/

One of the first examples is a toggle button.

https://inclusive-components.design/toggle-button/

I’m using safari, so that’s all I can say about your approach...

--
Mit freundlichen Grüßen

Marc Haunschild
www.mhis.de

Am 20.02.2020 um 00:51 schrieb ashraf aleem <[email protected]>:


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