{"id":813,"date":"2009-05-27T21:34:34","date_gmt":"2009-05-28T03:34:34","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=813"},"modified":"2009-05-28T12:17:19","modified_gmt":"2009-05-28T18:17:19","slug":"keyboard-accesibility-in-flexcal","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2009\/05\/27\/keyboard-accesibility-in-flexcal\/","title":{"rendered":"Keyboard accesibility in <code>flexcal<\/code>"},"content":{"rendered":"<p>I added keyboard accessibility to <a href=\"\/blog\/2009\/04\/03\/new-jquery-widget-flexcal\/\"><code>flexcal<\/code><\/a>, based on the <a href=\"http:\/\/dev.aol.com\/dhtml_style_guide#datepicker\">AOL style guide<\/a>. Tabbing into the trigger for a <a href=\"\/blog\/2009\/01\/02\/new-ui-widgets-textpopup-and-hebrewkeyboard\/\">textpopup<\/a> makes it pop. The focus remains on the input element and requires another tab to put the focus on the calendar (a bit awkward to require two tabs but I didn't want to have the input element lose focus every time it gets it),  and the escape key (or tabbing out) hides it.<\/p>\r\n<p>Unfortunately, control-page up\/down if used by Firefox to change its tabs and I can't override that, so I use alt-page up\/down to skip years. Alt-left\/right arrow changes calendars.<\/p>\r\n<p>Unfortunately, the tabbing in and out doesn't work in Chrome; after tabbing out when the focus returns to the input element it won't leave. I'm not sure what the problem is. And it uses tabindex=0 which isn't supported by Safari at all. I think I will leave it as is and wait for the browsers to catch up to me.<\/p>","protected":false},"excerpt":{"rendered":"I added keyboard accessibility to flexcal, based on the AOL style guide. Tabbing into the trigger for a textpopup makes it pop. The focus remains on the input element and requires another tab to put the focus on the calendar (a bit awkward to require two tabs but I didn't want to have the input [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/813"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=813"}],"version-history":[{"count":4,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/813\/revisions"}],"predecessor-version":[{"id":817,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/813\/revisions\/817"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}