Opened 10 years ago

Closed 9 years ago

#10384 closed defect (fixed)

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

Reported by: Becky Gibson Owned by: Becky Gibson
Priority: high Milestone: 1.5
Component: Accessibility Version: 1.4.0b
Keywords: Cc: Shane O'Sullivan
Blocked By: Blocking:

Description (last modified by Becky Gibson)

  1. Load a Screen reader (tested with JAWS 11)
  1. Load the dijit/tests/layout/test_TabContainer.html test page.
  1. Put the screen reader in virtual PC buffer off mode (instert+z in JAWS) or the mode to interact with widgets.
  1. Press the tab key to put focus on the 3rd tab container example that has only images on the tab
  1. 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.

Attachments (1)

10384.patch (3.1 KB) - added by Becky Gibson 9 years ago.

Download all attachments as: .zip

Change History (11)

comment:1 Changed 10 years ago by Becky Gibson

Description: modified (diff)

comment:2 Changed 10 years ago by bill

Milestone: 1.41.5

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.

comment:3 Changed 10 years ago by 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.

comment:4 Changed 10 years ago by Becky Gibson

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

Changed 9 years ago by Becky Gibson

Attachment: 10384.patch added

comment:5 Changed 9 years ago by 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.

comment:6 Changed 9 years ago by Becky Gibson

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

comment:7 Changed 9 years ago by bill

Looks good to me, you should check this in.

comment:8 Changed 9 years ago by Becky Gibson

Resolution: fixed
Status: newclosed

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

comment:9 Changed 9 years ago by Becky Gibson

Resolution: fixed
Status: closedreopened

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.

comment:10 Changed 9 years ago by Becky Gibson

Resolution: fixed
Status: reopenedclosed

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

Note: See TracTickets for help on using tickets.