WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA calendar module updated to support disabled dates and editable comments with 800 char max

for

From: Bryan Garaventa
Date: Dec 23, 2011 8:12AM

I gave this a try in the past actually, but found that, as new jQuery
versions came out, I was spending more time debugging something that worked
previously then didn't work any longer. It got frustrating not knowing if my
widgets would continue to work when major updates came out, so I built AccDC
for consistency. This is what powers the Calendar widget. Eventually it will
be possible to plug AccDC into any library such as jQuery, YUI, ExtJS, etc
and maintain the same functionality regardless which version of the
preferred library is running.

This is my todo list so far:
a) Move click/keypress handler to a function that can easily be modified.
b) Make it possible to click a date and pass it through instantly when no
comments are found and editing is disabled.
c) Maintain selected date when paging up/down between months.

If you can think of anything else for me to add, please let me know.


----- Original Message -----
From: "Vincent Young" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Friday, December 23, 2011 6:37 AM
Subject: Re: [WebAIM] ARIA calendar module updated to support disabled dates
andeditable comments with 800 char max


> Bryan,
>
> The calendar widget works very well. Have you thought about implementing
> your work/ideas via a popular library such as jQuery? Hans Hillen's work
> on the jQuery UI datepicker widget (
> http://access.aol.com/aegis/#goto_datepicker) could benefit from your
> work.
>
> Cheers.
>
> -Vincent
>
> On Fri, Dec 23, 2011 at 1:27 AM, Bryan Garaventa <
> <EMAIL REMOVED> > wrote:
>
>> One question though, is it the expected behavior for a calendar to stay
>> on
>> the selected date when switching between months? Currently the calendar
>> defaults to the first day, but if this is odd I can easily change it.
>>
>> ----- Original Message -----
>> From: "Bryan Garaventa" < <EMAIL REMOVED> >
>> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
>> Sent: Thursday, December 22, 2011 10:45 PM
>> Subject: [WebAIM] ARIA calendar module updated to support disabled dates
>> andeditable comments with 800 char max
>>
>>
>> > Understood; thank you again for your feedback, I really do appreciate
>> > it.
>> > :)
>> >
>> > I've updated the calendar module so that disabled dates are now
>> > automatically supported. When a date is disabled, focus is still set to
>> > the
>> > date so that the status is conveyed and the continuity of navigation
>> isn't
>> > broken. Disabled dates can be added programmatically using a day range
>> > array
>> > within a given month. Since this is added separately after the calendar
>> is
>> > initialized, any number of individualized calendars can be configured
>> > on
>> > the
>> > same page without conflict.
>> >
>> > Additionally, comments can now be added to any date range, specifically
>> > based on a given year or globally for the same date every year. These
>> > too
>> > are programmatically configured for singular dates or globally for all
>> > years
>> > on the given date. When a date has a comment, setting focus to the
>> > given
>> > date will display a scrollable popup window above the calendar that
>> > displays
>> > the comment text. Additionally for screen readers that support ARIA,
>> > the
>> > comment text is announced automatically when the date receives focus.
>> > Comments up to 800 characters in length are supported.
>> >
>> > Currently these functionality examples are commented out within the
>> source
>> > code, but they can be enabled for testing by removing the double
>> > slashes
>> > at
>> > the end of the file 'jssetup.js' in the source code download at
>> > http://whatsock.com/modules/aria_calendar_module.zip
>> > which will add comments to and/or disable December 24 and 25. When a
>> > date
>> > is
>> > disabled, clicking or pressing Enter on that date will do nothing.
>> >
>> > This is the syntax for initializing a calendar control:
>> > setCalendar( ID , TriggeringElement , TargetEditField ,
>> > EnableComments )
>> >
>> > When true is passed as the parameter 'EnableComments', users can edit
>> > comments directly by pressing Spacebar on the date that has focus, or
>> > by
>> > activating the Edit button.
>> > Type the comment, then press Enter or activate the Save button to save
>> the
>> > comment.
>> > If comments are configured programmatically, they will appear within
>> > the
>> > calendar regardless whether EnableComments is set to true or false. The
>> > EnableComments parameter simply controls whether comments can be
>> > directly
>> > edited.
>> >
>> > Dynamic localization is also supported, so you can change the verbiage
>> for
>> > any of the textual values such as the tooltips and month/weekday names
>> > on
>> > the fly to any language by modifying the calendar object properties.
>> > This
>> > is
>> > done using the ID passed in the first parameter.
>> > E.G. (where 'AdvancedCalendar' is passed as the ID)
>> > $A.reg.AdvancedCalendar.tooltipTxt = 'Press Escape to cancel';
>> > $A.reg.AdvancedCalendar.disabledTxt = 'Disabled';
>> > $A.reg.AdvancedCalendar.commentedTxt = 'Has Comment';
>> > // Or modify the month name for January like so
>> > $A.reg.AdvancedCalendar.range[0].name = 'Gnarly';
>> > // Or change the short and long weekday names for Sunday like so
>> > var sunday = $A.reg.AdvancedCalendar.range.wDays[0];
>> > sunday.short = 'R';
>> > sunday.long = 'Ralph';
>> > // The change will take effect when the calendar is next opened
>> >
>> > The demo is strictly client side, so edited comments are not saved.
>> > However
>> > it would be simple to do so using the 'runAfterClose' method to do so
>> > within
>> > the file 'jssetup.js' by adding an AJAX request combined with user
>> > authentication to create a personalized calendar. This could be done by
>> > serializing each month in the dc.range object and send it to be stored
>> > as
>> > a
>> > JSON string, which could then be retrieved in the same manner by
>> reverting
>> > the JSON into month objects to repopulate dc.range after the page
>> > loads.
>> A
>> > db query could do the same, it doesn't matter which.
>> >
>> > All of the styling, coloration, sizing, and so on is contained in the
>> > CSS
>> > file, so the look and feel can easily be changed. The only exception is
>> > zIndex within the JS file, which is set to 1 by default. This can be
>> > changed
>> > to any positive value however.
>> > The size of the calendar module JS file is 17kb; unminified.
>> >
>> > As you pointed out, there are some screen reader limitations, so this
>> > functionality works best using JAWS12-13 in IE and FF, and using NVDA
>> with
>> > FF. Currently NVDA doesn't support ARIA well enough in IE to function
>> > properly. As screen reader development improves cross-browser ARIA
>> support
>> > in the future though, the implementation will work better in time
>> > without
>> > requiring any changes in the calendar code structure.
>> >
>> > It took me a while to get the ARIA feedback right, since there are
>> > important
>> > behavioral differences even using screen readers that support ARIA. For
>> > example, role=dialog has to be set on the table tag itself; otherwise,
>> > if
>> > set on the container element, the word 'table' will be announced by
>> > JAWS
>> > in
>> > front of the label for every date link, which is annoying. Also, this
>> > appears to disrupt JAWS' ability to track keyboard focus, announcing
>> > 'blank'
>> > when attempting to arrow between dates. At any rate, it should be good
>> > to
>> > go
>> > now.
>> >
>> > If I've overlooked anything, please let me know.
>> >
>> > The demo is at
>> > http://whatsock.com/modules/aria_calendar_module/demo.htm
>> >
>> > Thanks again,
>> > Bryan
>> >
>> > ----- Original Message -----
>> > From: "Sailesh Panchang" < <EMAIL REMOVED> >
>> > To: "WebAIM Discussion List" < <EMAIL REMOVED> >
>> > Sent: Monday, December 19, 2011 10:37 AM
>> > Subject: Re: [WebAIM] Regarding an ARIA calendar picker control that
>> > supports automatic accessibility for SR and keyboard users
>> >
>> >
>> >> >Regarding the focus issue in NVDA with IE and JAWS with FF, this
>> problem
>> >>>doesn't actually have anything to do with the scripting within the
>> >>>calendar
>> >>>module, but rather is a result of NVDA's lack of full ARIA support in
>> IE,
>> >>>and JAWS' lack of full ARIA support in FF. NVDA is geared to work more
>> >>>comprehensively with FF, and JAWS is geared to work more
>> >>>comprehensively
>> >>>with IE. This is a design choice of the screen reader developers, and
>> >>>can't
>> >>>be controled by any web UI developer.
>> >> Certainly and I fully understand that... that's why in my first
>> >> comment I said: admittedly there are UA/At limitations.
>> >> Sailesh
>> >>
>> >>
>> >>
>> >>
>> >> On 12/19/11, Bryan Garaventa < <EMAIL REMOVED> > wrote:
>> >>> I see what you mean about the unavailable dates, the addition of
>> >>> custom
>> >>> dates would have to be programmed separetly within the module on a
>> >>> case-by-case basis however, since everyone's implementation would
>> >>> differ.
>> >>> This could easily be done by any developer wishing to modify the
>> >>> script
>> >>> for
>> >>> their purposes.
>> >>>
>> >>> Regarding the focus issue in NVDA with IE and JAWS with FF, this
>> problem
>> >>> doesn't actually have anything to do with the scripting within the
>> >>> calendar
>> >>> module, but rather is a result of NVDA's lack of full ARIA support in
>> >>> IE,
>> >>> and JAWS' lack of full ARIA support in FF. NVDA is geared to work
>> >>> more
>> >>> comprehensively with FF, and JAWS is geared to work more
>> comprehensively
>> >>> with IE. This is a design choice of the screen reader developers, and
>> >>> can't
>> >>> be controled by any web UI developer.
>> >>>
>> >>>
>> >>> ----- Original Message -----
>> >>> From: "Sailesh Panchang" < <EMAIL REMOVED> >
>> >>> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
>> >>> Sent: Monday, December 19, 2011 9:08 AM
>> >>> Subject: Re: [WebAIM] Regarding an ARIA calendar picker control that
>> >>> supports automatic accessibility for SR and keyboard users
>> >>>
>> >>>
>> >>>> Non selectable dates: Well in your examples, one can select any date
>> >>>> in the month. But I am referring to a scenario where certain dates
>> >>>> are
>> >>>> not available. e.g. one cannot schedule a bank transaction on a date
>> >>>> the bank is closed. Or maybe one cannot get an appointment at the
>> >>>> doctor's office, say on a Sunday ... so these dates would be
>> >>>> unavailable. No I am not referring to blank spaces in the table
>> >>>> before
>> >>>> /after first / last day of month.
>> >>>> UA/AT issue: Well as I said up/down arrow key seemed to work as
>> >>>> expected when using JAWS13 with IE (and not JAWS with Firefox 8) and
>> >>>> with NVDA and Firefox (and not NVDA and IE). So down arrow from Dec
>> >>>> 19
>> >>>> does not go to Dec 26 as one may expect when using IE with NVDA.
>> >>>> That's my experience.
>> >>>> Tab order: Right, I understand. But when dates are exposed as links,
>> >>>> one is tempted to tab as one does on a page usually.
>> >>>> Sailesh
>> >>>>
>> >>>> On 12/19/11, Bryan Garaventa < <EMAIL REMOVED> > wrote:
>> >>>>> Thanks :)
>> >>>>>
>> >>>>> The reason why I chose not to include all date links in the tab
>> >>>>> order
>> >>>>> is
>> >>>>> that it would take approximately 30 keypresses to navigate passed
>> >>>>> the
>> >>>>> control if so, which could get annoying very quickly.
>> >>>>> Since the arrow keys can be used to quickly jump to a date, one at
>> >>>>> a
>> >>>>> time,
>> >>>>> or by column in 7 day increments, it's more efficient to jump to a
>> >>>>> date
>> >>>>> in
>> >>>>> this manner.
>> >>>>> Pressing tab is designed to close the control in the same fashion
>> >>>>> as
>> >>>>> an
>> >>>>> ARIA
>> >>>>> menu for convenience, focusing back on the triggering element.
>> >>>>>
>> >>>>> When you say 'non-selectable dates should be navigable to but not
>> >>>>> selectable', I asume you are refering to the blank cells at the
>> >>>>> beginning/end of the calendar month. These actually aren't links,
>> >>>>> but
>> >>>>> empty
>> >>>>> TD elements that have no link markup or label associations. Is
>> >>>>> there
>> a
>> >>>>> benefit to providing keyboared focus to non-actionable elements
>> >>>>> such
>> >>>>> as
>> >>>>> these when they have no functionality?
>> >>>>>
>> >>>>> I don't understand what you mean by
>> >>>>> 'admittedly, there are UA / At limitations like up/down key allows
>> >>>>> one
>> >>>>> to
>> >>>>> navigate a column (day of week) only with JAWS in IE and with NVDA
>> >>>>> in
>> >>>>> FF.'
>> >>>>> The keyboard functionality for the calendar widget is programmed in
>> >>>>> the
>> >>>>> JS
>> >>>>> file at
>> >>>>> http://whatsock.com/modules/aria_calendar_module/js/setup.js
>> >>>>> and is cross-browser compatible, so it will work regardless whether
>> >>>>> a
>> >>>>> screen
>> >>>>> reader is running, on IE, FF, Opera, Safari, and Chrome.
>> >>>>>
>> >>>>> The only limitation based on screen reader type and version is
>> whether
>> >>>>> or
>> >>>>> not ARIA support is included within the AT/browser combination
>> >>>>> being
>> >>>>> used,
>> >>>>> and this is unfortunately impossible to predict using scripting
>> alone.
>> >>>>>
>> >>>>> ----- Original Message -----
>> >>>>> From: "Sailesh Panchang" < <EMAIL REMOVED> >
>> >>>>> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
>> >>>>> Sent: Monday, December 19, 2011 7:44 AM
>> >>>>> Subject: Re: [WebAIM] Regarding an ARIA calendar picker control
>> >>>>> that
>> >>>>> supports automatic accessibility for SR and keyboard users
>> >>>>>
>> >>>>>
>> >>>>>> Bryan,
>> >>>>>> Yes this works alright but a couple of observations
>> >>>>>> - all dates are exposed as links but one cannot tab from one date
>> >>>>>> to
>> >>>>>> the next as one does between links
>> >>>>>> - non-selectable dates should be navigable to but not selectable
>> >>>>>> - admittedly, there are UA / At limitations like up/down key
>> >>>>>> allows
>> >>>>>> one to navigate a column (day of week) only with JAWS in IE and
>> >>>>>> with
>> >>>>>> NVDA in FF.
>> >>>>>> Sailesh
>> >>>>>> On 12/16/11, Bryan Garaventa < <EMAIL REMOVED> > wrote:
>> >>>>>>> Hi,
>> >>>>>>> I started working on this one mainly to see if I could get the
>> >>>>>>> ARIA
>> >>>>>>> grid
>> >>>>>>> type roles working using a practical implementation, such as a
>> >>>>>>> calendar
>> >>>>>>> picker control that supports full accessibility. Unfortunately
>> >>>>>>> though,
>> >>>>>>> it
>> >>>>>>> appears that role=grid and all associated roles have no impact on
>> >>>>>>> tabular
>> >>>>>>> navigation structures. So I switched to plan B and used
>> role=dialog,
>> >>>>>>> role=button, role=link, aria-selected, aria-label, and tabindex
>> >>>>>>> to
>> >>>>>>> do
>> >>>>>>> it
>> >>>>>>> anyway.
>> >>>>>>>
>> >>>>>>> This is what it does, in the standard fashion of calendar
>> >>>>>>> pickers,
>> >>>>>>> you
>> >>>>>>> just
>> >>>>>>> click the Calendar link to open the Calendar picker control.
>> >>>>>>> Then you can use the arrow keys to navigate each cell of the grid
>> in
>> >>>>>>> tabular
>> >>>>>>> fashion using the structure of the underlying table.
>> >>>>>>> Press Home or End to jump to the beginning or end of a row,
>> >>>>>>> or PageDown or PageUp to jump to the next calendar month.
>> >>>>>>> The buttons for moving forward and backward can also be accessed
>> >>>>>>> using
>> >>>>>>> ShiftTab, since focus is automatically set on the current day of
>> the
>> >>>>>>> month
>> >>>>>>> by default.
>> >>>>>>> Press enter on a date to make a selection, or press Escape or Tab
>> to
>> >>>>>>> cancel
>> >>>>>>> and close the calendar.
>> >>>>>>> You can also just click on a date to select it. (Boring and very
>> >>>>>>> sad...)
>> >>>>>>>
>> >>>>>>> If you'd like to give it a spin, the demo is at
>> >>>>>>> http://whatsock.com/modules/aria_calendar_module/demo.htm
>> >>>>>>>
>> >>>>>>> This functionality works best with JAWS12/13 with IE8/9 and FF,
>> >>>>>>> and
>> >>>>>>> NVDA
>> >>>>>>> with FF.
>> >>>>>>>
>> >>>>>>> Best wishes,
>> >>>>>>> Bryan
>> >>>>>>>
>> >>>>>>>
>> >>>>>>> http://www.linkedin.com/in/bgaraventa
>> >>>>>>>