As a user field focussing and tabbing should work well in dialogs (MGNLUI-1978)

[MGNLUI-2876] Form Tabs should be part of the focus order in a dialog - and should be triggerable via keyboard. Created: 08/May/14  Updated: 13/Jun/14  Resolved: 02/Jun/14

Status: Closed
Project: Magnolia UI
Component/s: dialogs, forms
Affects Version/s: 5.2.4
Fix Version/s: 5.3

Type: Sub-task Priority: Neutral
Reporter: Christopher Zimmermann Assignee: Christopher Zimmermann
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
causality
is causing MGNLUI-2978 Missing tab label for detail subapp Closed
is causing MGNLUI-3000 Focused tab doesn't show blue outline... Closed
dependency
is depended upon by MGNLUI-2747 Keyboard focus should remain inside a... Closed
Template:

 Description   

As user presses [TAB] keyboard key in a form, the focus order should include the tabs of the form. The tabs should get the focus hilighting (blue rectangle) and pressing the SPACEBAR should then activate the tab.



 Comments   
Comment by Christopher Zimmermann [ 26/May/14 ]

Challenging.
Just adding tabindex=0 and role=button and a click handler is not enough. To see the amount of work to get a clientside element to behave like an input field - see the complex javascript in VButton. Also the amount of code in VButton makes me want to avoid it if possible - and use native HTML that capture click events (input, button, anchor)
Would prefer not to use Anchor, because a: its actually a button. b: could cause trouble with URL.

Decision:wrapping the text with a button element.
I considered wrapping the entire tab label in a button - but this would be difficult because tabs can also have close buttons. (And at least one side of an outline style would be cut off due to other elements with overflow=hidden)

Safari does not respect text-overflow:elipses on a button, so label must be wrapped in a span.
Suprise! Safari does not include buttons in the tab order like firefox & chrome & ie do EVEN IF YOU ADD TABINDEX=0 to it.
So add tabindex=0 to label wrapping span, and add tabindex=-1 to the button so behaviour is same across browsers.
Suprise! In Safari the button clips the outline of the span. So add padding to the button so it does not clip - and add negative margin so the layout is same-ish.

Generated at Mon Feb 12 09:01:01 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.