Standard Dynamic Control Templates

The templates for accessible Lightbox, Banner, Tooltip, and Popup controls provide scalable AccDC Object declarations to automate accessibility for screen reader and keyboard only users.
Module files:

1. setup.js : The AccDC Object configuration script.

For specific coding guidance, view the AccDC Technical Style Guide

Instructions:

• Press the above button to open the lightbox AccDC Object.
• The lightbox will load,
  flow control methods will configure the display, handlers, and accessibility markup,
  focus will automatically be moved to the beginning of the new content when opened,
  and focus will return to the triggering element when closed.

The banner is loaded from an external page using it's ID.

Activate the Load button to render the banner content.
Activate the Submit button to close the banner.

Instructions:

• Mouse over the above icon to display the extended tooltip AccDC Object.
• Screen reader and keyboard only users can activate the icon using the Enter key.
• The extended tooltip object will be inserted inline relative to the triggering element,
  positioned visually using the autoPosition property,
  and its content will be announced to screen reader users.
• The extended tooltip can be closed by mousing out of the display area,
  or by tabbing to and activating the automatically generated accessible close link.

Instructions:

• The popup AccDC Object can be opened by clicking the above link.
• The popup object will be inserted inline with the triggering element,
  the visual display will be set using the autoPosition property,
  and the popup content will be announced to screen reader users.
• The popup can be closed by activating the Close icon.

1. All of the above demos are included as template AccDC Objects within the file setup.js,
   so that the AccDC Object properties can be modified to fit any functionality or layout requirements for similar implementations.
2. All of the above AccDC Object types can be controlled programmatically, such as to open or close an object like so:
   // Using the ID property of each AccDC Object, such as 'lightbox'
$A.reg.lightbox.open();
// Or using the ID 'popup'
$A.reg.popup.close();
3. Similarly, the functionality of AccDC Objects can be changed on the fly while maintaining the same level of accessibility, like so:
   // Change the functionality of the Login lightbox to show a Registration lightbox instead
// First, change the role for screen reader users
$A.reg.lightbox.role = 'Register';
// Change the resource locator to point to another form container
$A.reg.lightbox.source = 'files/overlays.html #register1';
// Change the size and width to match the dimensions of the new lightbox
$A.reg.lightbox.cssObj.height = '400px';
$A.reg.lightbox.cssObj.width = '750px';
// Lastly, swap the runAfter function with another function so that event handlers can be properly registered when it opens
$A.reg.lightbox.runAfter = someOtherFunction;
// Now open the newly configured lightbox AccDC Object
$A.reg.lightbox.open();
4. Also, the accessible hidden text can be modified for localization in any language by modifying the accStart, accEnd, and accClose properties,
   by directly modifying the AccDC Object declarations within 'setup.js',
   or by dynamically changing the property values at runtime using the object ID as shown above.