infusion-tooltip-sample

[Tony Atkins]

Hi, Dinuka:

Thanks for setting up the demo site, that makes it really easy to give
feedback.  The first thing I tried was keyboard navigation, which needs a
little work.

Neither of your demo buttons has a tabindex attribute, which means you
can't get to them with the keyboard, at least not in the version of Chrome
I tested with.  I manually edited the markup using the developer console,
and added "tabindex=0" to both "buttons" (actually links), to confirm that
that is enough to make the "buttons" addressable.  Once I did that I was
able to focus on each of them in turn, but the code to check for loss of
focus seems not to handle "tabbing away" correctly.

Thankfully, you don't need to do all of this yourself.  There is already
code to help with handling focus and blur via the keyboard.  It's used in
the "5 star" demo included with Infusion.  Here, from that sample, is an
example of calling "fluid.activatable" when the component is created:

https://github.com/fluid-project/infusion/blob/9f515ec9ed448e1f7f0c6380b1209a20eb398647/demos/keyboard-a11y/js/five-star.js#L122

Whatever method you use, I would suggest at least manually testing
mouse-only navigation, keyboard-only navigation, and combinations of the
two (focusing using the mouse, then tabbing away, for example).

Cheers,


Tony

On Fri, Jul 1, 2016 at 2:30 PM, Dinuka Desilva <l.dinukadesilva at gmail.com>
wrote:

> Hi all,
>
> Since I could find enough simple examples of infusion tool-tips, I thought
> of sharing the example which I did for others advantage.
>
> https://github.com/dinukadesilva/infusion-tooltip-sample
> https://dinukadesilva.github.io/infusion-tooltip-sample/
>
> Appreciate your help and contributions to optimize this since still it's
> not fully completed and accurate.
>
>
> Thanks.
>
> _______________________________________________________
> fluid-work mailing list - fluid-work at lists.idrc.ocad.ca
> To unsubscribe, change settings or access archives,
> see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20160704/4ba95d7d/attachment.htm>