Opened 7 years ago

Closed 4 years ago

Last modified 4 years ago

#16210 closed task (fixed)

Calendar: modify template to pull month and year out of the <table>

Reported by: bill Owned by: bill
Priority: high Milestone: 1.11
Component: Dijit Version: 1.8.1
Keywords: Cc:
Blocked By: Blocking:

Description

Currently the Calendar widget puts a number of things inside the <table> even though they really aren't part of the grid showing the days of the month:

  1. the month name (for CalendarLite) / drop down (for Calendar)
  2. the buttons to increment/decrement the month
  3. the previous, current, and next year buttons

It would be better both for accessibility (aka for semantic reasons) as well as style-ability to pull those things out of the template.

I prototyped this but hit problems for IE6, IE7, and IE quirks mode. Thus, it would be good to do for 2.0 when we'll probably drop support for those platforms.

Originally from #15900.

Attachments (2)

Calendar.html (1.8 KB) - added by bill 7 years ago.
semantic template
css.patch (1.4 KB) - added by bill 7 years ago.
CSS updates for new template (has IE6/IE7 specific code which should be removed)

Download all attachments as: .zip

Change History (8)

comment:1 Changed 7 years ago by bill

Milestone: tbd2.0

Changed 7 years ago by bill

Attachment: Calendar.html added

semantic template

Changed 7 years ago by bill

Attachment: css.patch added

CSS updates for new template (has IE6/IE7 specific code which should be removed)

comment:2 Changed 7 years ago by bill

For reference, this was the checkin message I was going to use on this, before I realized the problem with quirks mode, and had planned to check it into 1.9:

Avoid a11y violations in Calendar by using the <table> node only for the actual table of the days of month, but not for layout of the month name + arrows, and the previous, current, and next year labels.

The month increment/decrement arrows are now positioned using float:left/right CSS, but IE6 and IE7 have lots of problems with that, and also problems with using position:absolute left:0/right:0. The options to address this were to:

  1. add hacky CSS to try to workaround the IE problems
  2. use IE friendly markup to do the layout, like another <table> node
  3. display the arrows differently on IE6/7

Given that IE6/7 are being phased out I took approach (3), and on IE6/7 just display the left/right arrows to the left of the month drop down (or to the right on RTL systems). On the bright side, the blue margin around the Calendar now shows up correctly, even on IE6.

comment:3 Changed 6 years ago by bill

Priority: undecidedhigh

comment:4 Changed 4 years ago by bill

Milestone: 2.01.11

Hmm, maybe now that we've desupported IE6-7 I can do this for 1.11.

comment:5 Changed 4 years ago by Bill Keese <bill@…>

Resolution: fixed
Status: newclosed

In 1ab7cde587b50745dce87a39825d7d234274a954/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:6 Changed 4 years ago by Bill Keese <bill@…>

In c35b9f6461f4ab18d04cab5b744af964df1da5e3/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 
Note: See TracTickets for help on using tickets.