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: Vincent Young
Date: Dec 23, 2011 7:36AM

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