WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Bryan Garaventa
Date: Dec 23, 2011 2:24AM

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
>>>>>>>