FLUID-3728: Improve accessibility of the demo portal infrastructure

Description

The 'source' tabs in the demo portal should have the aria application role set.

The contents of the tabs should have the aria document role set.

Comments

• Justin Obara commented 2010-09-09T13:49:00.603-0400

  a11y issue

• Justin Obara commented 2010-10-04T14:43:09.401-0400

  "Bug Parade Infusion 1.3"

• Anastasia Cheetham commented 2010-10-13T12:33:35.546-0400

  This task turns out to be more involved that simply adding an application role to the tabpanels. There are several deficiencies in the ARIA markup of the page, as well as other issues:

  • The "Code View / Plain Text" buttons have no ARIA markup. Semantically, they function as radio buttons and could be marked as such. They are not currently keyboard-accessible as a single set of radio buttons, though they are keyboard accessible as regular links.
  • The "Code View / Plain Text" buttons are currently not actually inside the tab panels (despite the fact that they appear to be). There is a single set of buttons which must work with whichever tab currently happens to be active. This results in some messy code to figure out which tab is active. This could probably be simplified by actually having one set of radio buttons per tab panel, contained within the panel.
  • The container of the right side of the page should have a role of application
  • With the radio buttons inside the tab panel, the panel itself should have a role of application, and the containers of the actual text themselves should have a role of document
  • The various demo 'assets' (i.e. js, html, css files) are loaded separately and independently, requiring some messy code to determine when all of the files are finished loading so that setup can be completed. This would be vastly simplified with fluid.fetchResources() with a single callback.
  • There are many hard-coded selectors scattered throughout the code. A DOM binder would make the code easier to work with.
  • Event handling code is not well centralized, leading to duplication

  Recommended changes:

  • Load the assets using fluid.fetchResources() (I've implemented this in my local copy, works fine).
  • Restructure the mark-up so that the "Code View / Plain Text" buttons are contained within the tab panels
  • Refactor the code to take advantages of more framework features, centralize event handlers, etc.

• Colin Clark commented 2010-11-03T12:18:46.071-0400

  Anastasia has created a branch for these changes in SVN, which is located at http://source.fluidproject.org/svn/fluid/infusion/branches/FLUID-3728/

• Colin Clark commented 2010-11-03T12:19:32.384-0400

  Anastasia posted an update on her work to fluid-work. Here's a transcript:

  "I'm not finished yet, but here are some highlights of what I've got implemented so far:

  1) The code is updated to make much more use of the framework, including IoC and the new renderer component initializer.
  2) The code now loads the HTML for the demo pages from a template, which reduces a great deal of duplication, as well as removing lots of hard-coded markup from the JS.
  3) The file-type tabs on the right side of each demo now have proper ARIA and are keyboard accessible (using our plugin).

  • there are tests for the ARIA
    4) I fixed a CSS bug, so that now the line numbers are actually visible.

  NOTE: The code changes are currently only applied to the following demos:

  • keyboard accessibility plugin
  • grid reorderer
  • progress

  Also NOTE: I haven't yet fixed up the Code View/Plain View issue that I raised in another email thread, so you'll see both views in the panel, and the links will do nothing.

  Final NOTE: The actual keyboard accessibility plugin in this branch is completely broken, so don't expect much 🙂"

• Anastasia Cheetham commented 2010-11-03T12:43:39.584-0400

  I've pretty much finished implementing the changes to the demo portal to add keyboard accessibility of right side of the demo pages, ARIA, etc. It's a complete rewrite of the JavaScript that creates the code tabs on the right side of the demo pages. I'd appreciate a code review before I merge this back into trunk.

• Anastasia Cheetham commented 2011-01-04T09:48:05.098-0500

  This will be carried out as part of a larger portal redesign.

• Anastasia Cheetham commented 2014-04-02T15:29:05.239-0400

  We will be removing the demo portal altogether.