Opened 10 years ago

Closed 10 years ago

Last modified 8 years ago

#9471 closed defect (fixed)

Calendar: in high contrast mode, dijit.form.DateTextBox has issue that underline is displayed on top of the current date

Reported by: mabingd Owned by:
Priority: high Milestone: 1.4
Component: Dijit - Form Version: 1.3.0
Keywords: a11y Cc: Becky Gibson
Blocked By: Blocking:

Description (last modified by bill)

Could see this issue on IE7/IE8, there is no this issue on Firefox:

Attachments (2)

calendar in high contrast mode.JPG (11.3 KB) - added by mabingd 10 years ago.
a11yCalendar.patch (949 bytes) - added by bill 10 years ago.
use border to indicate selected date, no screen jumping on selecting a date

Download all attachments as: .zip

Change History (11)

Changed 10 years ago by mabingd

comment:1 Changed 10 years ago by Adam Peller

Cc: Becky Gibson added
Component: GeneralDijit
Keywords: a11y added
Owner: anonymous deleted

comment:2 Changed 10 years ago by bill

Description: modified (diff)
Milestone: tbd1.4
Summary: In high contrast mode, dijit.form.DateTextBox has issue that underline is displayed on top of the current dateCalendar: in high contrast mode, dijit.form.DateTextBox has issue that underline is displayed on top of the current date

I'm not sure why you call this an issue; the overline is there intentionally to indicte the selected date. Added in [12405]. However, I think an underline would be more conventional (and seems to work in IE6, IE7, and FF3), so I'll change the code to that.

Becky, let us know if using an underline is bad for some reason. Note that disabled dates are crossed out (bar centered vertically).

comment:3 Changed 10 years ago by bill

Resolution: fixed
Status: newclosed

(In [18451]) Use underline rather than overline to indicate selected date, as that seems more conventional / less confusing (an overline on "31" looks like an underline on "24", from the week before). Fixes #9471 !strict.

comment:4 Changed 10 years ago by Becky Gibson

Resolution: fixed
Status: closedreopened

I specifically used overline to fix #5643 because underline is already used for the current date. There needs to be a way to distinguish the current date from the selected date in high contrast mode. I am open to other methods to indicate the current date and selected date but I'm not sure what to use - a border would be very hard to implement without making the characters "jump" with the addition of the border. Any other ideas?

comment:5 Changed 10 years ago by bill

Oh I see... I'm not sure we need to worry about jumping since the calendar is typically a drop down that disappears as soon as you select a date, but anyway I'm attaching a patch that creates a border and then uses padding to avoid screen jitter. How's it look to you?

Changed 10 years ago by bill

Attachment: a11yCalendar.patch added

use border to indicate selected date, no screen jumping on selecting a date

comment:6 Changed 10 years ago by Becky Gibson

Yes, this looks fine. The only concern I have is that someone is working on adding keyboard navigation to the calendar popup. Will the padding still take care of screen jitter if the selection is being changed with the popup open?

comment:7 Changed 10 years ago by bill

Yes, check out test_Calendar.html... there's no jitter there so I think it's fine.

comment:8 Changed 10 years ago by bill

Resolution: fixed
Status: reopenedclosed

(In [18475]) In high-contrast mode, use border around selected date, rather than underscore, to differentiate from today's date. Fixes #9471 !strict.

comment:9 Changed 8 years ago by bill

Component: DijitDijit - Form
Note: See TracTickets for help on using tickets.