[patch] [ccla] TabContainer: Screen reader does not speak title of image only tabs

[Becky Gibson]

1. Load a Screen reader (tested with JAWS 11)

2. Load the dijit/tests/layout/test_TabContainer.html test page.

3. Put the screen reader in virtual PC buffer off mode (instert+z in JAWS) or the mode to interact with widgets.

4. Press the tab key to put focus on the 3rd tab container example that has only images on the tab

5. Note that JAWS only speaks, "tab" but not the title that is associated with the image.

The problem is that the title attribute is set on the outer div that is marked as presentation. The title attribute should be set on the div that gets focus and has the role="tab" and tabindex="0". Currently that div has title="" which is why JAWS is not speaking it.

[bill]

There's some strange stuff going on here: there are two separate code paths for setting a title (a.k.a. tooltip) on a _TabButton.

The children of a TabContainer widget (typically ContentPane's) have two attributes: title and tooltip. The title becomes the label of the _TabButton, and the tooltip (if specified) becomes the title on the _TabButton's focusNode, thanks to _TabButton's attributeMap (title --> focusNode) entry.

_TabButton can also get a title applied to it's dojoAttachPoint="titleNode", thanks to Button's _setLabelAttr():

_setLabelAttr: function(/*String*/ content){
	// summary:
	//		Hook for attr('label', ...) to work.
	// description:
	//		Set the label (text) of the button; takes an HTML string.
	this.containerNode.innerHTML = this.label = content;
	if(this.showLabel == false && !this.params.title){
		this.titleNode.title = dojo.trim(this.containerNode.innerText || this.containerNode.textContent || '');
	}
}

First, it looks to me like the _TabButton template should set titleNode and focusNode to point to the same node. It's almost always the case that we want focusNode and titleNode to point to the same node. The exceptions are ComboButton (which has two tab stops) and Select (the tooltip is on the down arrow not the selected value, not sure if that's intentional or a mistake... that's something else to confirm).

Second, the attributeMap for _TabButton should probably map title to the titleNode, not to the focusNode, although it's a philosophical distinction if they point to the same node.

Third, there's a minor bug that happens when a button's title parameter is cleared via attr("title", ...), and consequently, when the TabContainer's child's tooltip parameter is cleared. The code in _setLabelAttr() won't get run which means that the _TabButton will have no title, even in showLabel==false mode. I think we need a _setTooltipAttr() method in Button rather than putting tooltip in attributeMap.

Fourth, we need unit tests for this.

_ScrollingTabControllerButton also has a dojoAttachPoint="titleNode" on the label, which is odd since the label isn't displayed except in high-contrast mode. Is that a bug or by design.

Having said all that, this isn't a regression so I don't see a reason to squeeze it into the 1.4 release.

[Becky Gibson]

This is not a regression since it wasn't supported in 1.3. It is a new feature that wasn't implemented properly for accessibility.

[Becky Gibson]

This really should be fixed for 1.5 - but don't believe it is my responsibility to "own" this issue.

[Becky Gibson]

fix is to add an alt attribute to the iconNode of tab buttons with showTitle=false. Also had to remove waiRole=presentation from template so that alt attribute will be recognized. If showTitle=true the alt value will remain as alt="" so accessibility is still maintained (you can set images to role=presentation or use alt="" when they should be ignored by assistive technology). I maintained the current Implementation that the tooltip parameter takes precedence over the label and modified the test file to check that.

[bill]

Looks good to me, you should check this in.

[Becky Gibson]

(In [21750]) fixes #10384 add button title or label to alt attribute of iconNode img !strict

[Becky Gibson]

This was broken in [21829] when waiRole="presentation" was added back into the _TabButton template on the iconNode attachpoint. Removing that will fix the problem.

[Becky Gibson]

(In [22336]) fixes #10384 Remove waiRole="presentation" from the iconNode so the screen reader will speak the programmatically added alt text.