E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Bryan Garaventa
Date: Thu, Dec 22 2011 11:42PM
Subject: ARIA calendar module updated to support disabled dates and editable comments with 800 char max
No previous message | Next message →

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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
>>>>>>

From: Bryan Garaventa
Date: Fri, Dec 23 2011 2:24AM
Subject: Re: ARIA calendar module updated to support disabled dates andeditable comments with 800 char max
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>>>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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
>>>>>>>

From: Vincent Young
Date: Fri, Dec 23 2011 7:36AM
Subject: Re: ARIA calendar module updated to support disabled dates andeditable comments with 800 char max
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> > To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> >>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> >>>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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
> >>>>>>>

From: Bryan Garaventa
Date: Fri, Dec 23 2011 8:12AM
Subject: Re: ARIA calendar module updated to support disabled dates and editable comments with 800 char max
← Previous message | No next message

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> > To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> >>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> >>>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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
>> >>>>>>>