Slider focus node has size 0x0

[simonjb]

The slider div which receives focus has a computed width and height of 0x0 (because its only child is an absolutely positioned div). This has 2 consequences:

1. Firefox sets the MSAA state "invisible" on sliders, which causes JAWS (but not Window-Eyes) to not speak updates to the slider value
2. it will break the focus enhancement features of ATs such as ZoomText and the Firefox Accessibar extension

A bug has been filed against Firefox ​https://bugzilla.mozilla.org/show_bug.cgi?id=402600 but we should still fix this in Dojo so that we work with focus enhancement ATs.

[Joseph Scheuhammer]

The bugzilla bug that simonjb referenced has been marked "resolved and fixed". A 0x0 absolutely positioned object is no longer considered invisible.

See: ​https://bugzilla.mozilla.org/show_bug.cgi?id=402600#c2

[Becky Gibson]

I would really like to see this fixed for 1.2 but have no idea if it is even possible to modify the way this is created. This bug prevents JAWS from speaking the slider values as they are changed. The user has to tab away from the slider and then back for the new value to be announced. Thus, it is a high priority a11y bug. It has been addressed in Firefox 3 and will probably work with a future release of JAWS - but with current tools it is broken. Any ideas?

[bill]

I looked this over. The outer <div>, a div.dijitSliderMovable is 0x0 even though it contains a div.dijitSliderImageHandle with size 16x16.

I think you could fix it by changing the CSS for the inner <div> to be position:relative rather than position:absolute.

(If that doesn't work for some reason then it seems like you could change the focus etc to the inner div.)

[Becky Gibson]

I can't remove position:absolute or the slider will be positioned incorrectly. If I move the focus to the inner div then the focus rectangle is drawn. I know alex and the design folks hate that and I can't find any way to remove the focus rectangle.

[Becky Gibson]

version of patch which removes focus rectangle stored here for reference

[Becky Gibson]

(In [14434]) fixes #5020. Fix slider for screen reader. Move focusNode and ARIA information down to the enclosed div which DOES have a height and width and thus is not invisible. This has the side effect that the focus rectangle is not visible on the slider handle. If this is a problem, there is a patch attached to this ticket which will remove the focus rectangle and still meet a11y requirements since focus is shown via the darker bar on focus and high contrast focus is provided via a different mechanism.