|
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.
|