Opened 9 years ago

Closed 9 years ago

#10394 closed defect (fixed)

[regression] ComboButton: Can not determine focus in high contrast on drop down menu with 2 items in FF

Reported by: Becky Gibson Owned by: Becky Gibson
Priority: high Milestone: 1.4
Component: Accessibility Version: 1.4.0b
Keywords: Cc: Nathan Toone
Blocked By: Blocking:

Description (last modified by bill)

This problem is only apparent in Firefox, IE uses a different focus border.

  1. Load dijit/tests/form/test_Button.html in Windows high contrast mode
  1. tab to the arrow portion of the create combo button, press enter
  1. Use the arrow keys to move between the drop down items, notice that it is very difficult to determine which item has focus Also note that on menu drop downs with more than 2 items, the focus border is not drawn completely around the first and last item.

The problem is related to setting overflow: hidden on the table element of the menu. This occurs in _HasDropDown.openDropDown():

var mb = dojo.marginBox(ddNode);
var overHeight = (this.maxHeight && mb.h > this.maxHeight);
dojo.style(ddNode, {overflow: overHeight ? "auto" : "hidden"});

If overflow:hidden is not set, the focus border gets properly drawn.

Another option to fix this problem is to draw the focus border around the text item as is done in IE using this style:

 .dj_ie .dijit_a11y .dijitMenuItemSelected .dijitMenuItemLabel {
	border-width: 1px;
	border-style: solid;
 }

Attachments (1)

ComboButtonHC_FF.jpg (6.6 KB) - added by Becky Gibson 9 years ago.

Download all attachments as: .zip

Change History (6)

Changed 9 years ago by Becky Gibson

Attachment: ComboButtonHC_FF.jpg added

comment:1 Changed 9 years ago by Becky Gibson

Although, even with the style change, the borders of the drop down do not display properly in Firefox in High contrast. Attached image of the problem.

comment:2 Changed 9 years ago by bill

Cc: Nathan Toone added
Description: modified (diff)
Summary: ComboButton: Can not determine focus in high contrast on drop down menu with 2 items in FF[regression] ComboButton: Can not determine focus in high contrast on drop down menu with 2 items in FF

I guess this is a regression from the refactor to base ComboButton on _HasDropDown?

comment:3 Changed 9 years ago by Adam Peller

Milestone: tbd1.4

Becky, any update? Marking 1.4 so this can be considered for patch releases.

comment:4 Changed 9 years ago by bill

Description: modified (diff)

I'll check in the suggested change, to generalize the existing IE rule. It's low risk since it's referencing .dijit_a11y; it really can't break anything except a11y.

comment:5 Changed 9 years ago by bill

Resolution: fixed
Status: newclosed

(In [20936]) Fix menu focus display in high contrast on FF. Fixes #10394.

Note: See TracTickets for help on using tickets.