Advanced Search

Aria in Widgets

/ Published in: JavaScript
Save to your folder(s)
Reusable function to create an aria alert for any widget and provide a better abstraction to setting its innerHTML.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //within a widget:
  2. X.Widget.X = function(data, instanceID){
  3.     this._ariaAlert = (function(widgetID){
  4.         var widget = document.getElementById(widgetID),
  5.             ariaAlert = document.createElement("div");
  6.         ariaAlert.setAttribute("role", "alert");
  7.         ariaAlert.className = "rn_ScreenReaderOnly";
  8.         if(widget)
  9.             YAHOO.util.Dom.insertBefore(ariaAlert, widget.firstChild || widget);
  10.         return function(alertText){
  11.            ariaAlert.innerHTML = alertText;
  12.         };
  13.     })("rn_" + this.instanceID);
  14. //  ...
  15. };
  16.  
  17. X.Widget.X.prototype = {
  18.  
  19.  
  20.     _someMethod: function(){
  21.         this._ariaAlert("loading new content");
  22.         //  ...
  23.         this._ariaAlert("");
  24.     }
  25.  
  26. };
  27.  
  28.  
  29. //OR
  30.  
  31.  
  32.  
  33. //Within namespace:
  34.  
  35. X.UI = {
  36. // ...
  37.  
  38.     createAriaAlert: function(widgetID){
  39.         var widget = document.getElementById(widgetID),
  40.             ariaAlert = document.createElement("div");
  41.         ariaAlert.setAttribute("role", "alert");
  42.         ariaAlert.className = "rn_ScreenReaderOnly";
  43.         if(widget)
  44.         YAHOO.util.Dom.insertBefore(ariaAlert, widget.firstChild || widget);
  45.         return function(alertText){
  46.            ariaAlert.innerHTML = alertText;
  47.         };
  48.     }
  49. // ...
  50. };
  51.  
  52. //then using it within the widget:
  53.  
  54. X.Widget.X = function(instanceID, data){
  55.     // ...
  56.     this._ariaAlert = X.UI.createAriaAlert("rn_" + this.instanceID);
  57.     // ...
  58. };
  59.  
  60. X.Widget.X.prototype = {
  61.     _someMethod: function(){
  62.         this._ariaAlert("Loading");
  63.         // ...
  64.         this._ariaAlert("");
  65.     }
  66. };

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.