Fwd: <toggle-button> Custom Element query

On Thu, Feb 20, 2020 at 4:55 AM Léonie Watson <lwatson@tetralogical.com>
wrote:

>
> On 20/02/2020 12:42, ashraf aleem wrote:
> > Hi Léonie,
> >                    Firstly thanks a lot for responding. I want use  this
> > <toggle-button> for cases like:
> > 1.  hamburger menu &#9776;
> >        where we don't have to change the label
>
> I don't think this should be a toggle button. A toggle button is used to
> indicate when a button is pressed or not, not to indicate when a menu is
> open or not. Try using the menubutton pattern instead:
> https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton
>
> > 2.  Play &#9658; and Pause &#10074;
> >       where a label and icon toggle/change might add some value as it
> > convey state of Button and widget(let say a audio player).
> >       Or should we use two button(or radio buttons) for Play and Pause?
> > This might make the design look verbose/cluttered.
>
> A button is the right choice I think. If you use aria-pressed to make it
> a toggle button though, don't change the label. If you want to change
> the label, then don't use aria-pressed. You can do one or the other but
> not both.
>
> > 3.  Hide(expand) and Show(collapse)
> >        I have seen many times this sort toggle/change of label being
> > used, it could found in ARIA  related documentation
> >
> https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions
> > cited demo: http://oaa-accessibility.org/example/20/
> >
>
> This is not a toggle button it's a disclosure component. It isn't the
> same thing and it uses different ARIA attributes. You'd probably be
> better of using the details/summary elements for this anyway.
>
> > so is it ok as in 3rd case and 2nd should be avoided or 2nd is a
> > complete no?
>
> You describe three different kinds of button. You should create
> components that are appropriate for each purpose.
>
> >
>
> Léonie.
>
> > Thanks Again,
> > Ashraf
> >
> > On Thu, Feb 20, 2020 at 1:37 AM Léonie Watson <lwatson@tetralogical.com
> > <mailto:lwatson@tetralogical.com>> wrote:
> >
> >     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
> >
>
> --
> Director @TetraLogical
>