ScreenReaderUtil.js 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. 'use strict';
  2. /**
  3. * Licensed Materials - Property of IBM
  4. * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2014, 2017
  5. * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
  6. */
  7. define(['jquery', '../../lib/@waca/core-client/js/core-client/ui/core/Class'], function ($, Class) {
  8. /**
  9. * This is a utility class to assist with ScreenReader interaction.
  10. * It provides a standard method to allow callouts on events or other occurances when
  11. * direct update of the UI is not available to the screen reader.
  12. * It creates a textbox input that hidden off screen and uses the aria-live attribute
  13. * to call out the string message.
  14. *
  15. * Example Usage:
  16. *
  17. * this.myScreenReader = new ScreenReaderUtil();
  18. *
  19. * someEventHandler: function( event ){
  20. *
  21. * this.myScreenReader.callOut( 'event happened' );
  22. * }
  23. *
  24. * @class ScreenReaderUtil
  25. */
  26. var ScreenReaderUtil = null;
  27. ScreenReaderUtil = Class.extend({
  28. INPUTBOX_ID: 'boardScreenReaderInputBox',
  29. CLEAR_TIMER_DURATION: 500,
  30. oCallOutClearTimer: null,
  31. init: function init() {
  32. ScreenReaderUtil.inherited('init', this, arguments);
  33. // check to see if the textbox exists and create as necessary
  34. if ($('#' + this.INPUTBOX_ID).length === 0) {
  35. // create the screen reader global input box to be used to call out for events etc.
  36. // position it off screen (must be visible for the screen reader to read it)
  37. var divScreenReaderCallout = document.createElement('div');
  38. divScreenReaderCallout.style.width = '0px';
  39. divScreenReaderCallout.style.height = '0px';
  40. divScreenReaderCallout.style.overflow = 'hidden';
  41. divScreenReaderCallout.style.position = 'absolute';
  42. divScreenReaderCallout.style.top = '-1px';
  43. divScreenReaderCallout.style.left = '-1px';
  44. var txtScreenReaderCallout = document.createElement('input');
  45. txtScreenReaderCallout.type = 'text';
  46. txtScreenReaderCallout.id = this.INPUTBOX_ID;
  47. txtScreenReaderCallout.setAttribute('aria-selected', 'false');
  48. txtScreenReaderCallout.setAttribute('aria-live', 'assertive');
  49. txtScreenReaderCallout.setAttribute('tabIndex', '-1');
  50. $(divScreenReaderCallout).append(txtScreenReaderCallout);
  51. $('body').append(divScreenReaderCallout);
  52. }
  53. },
  54. callOut: function callOut(sMessage) {
  55. // cancel any existing timer
  56. if (this.oCallOutClearTimer) {
  57. clearInterval(this.oCallOutClearTimer);
  58. }
  59. // set the value and clear timer
  60. $('#' + this.INPUTBOX_ID).val(sMessage);
  61. this.oCallOutClearTimer = setTimeout(function () {
  62. $('#' + this.INPUTBOX_ID).val('');
  63. }.bind(this), this.CLEAR_TIMER_DURATION);
  64. },
  65. destroy: function destroy() {
  66. // remove textbox and container
  67. $('#' + this.INPUTBOX_ID).parent().remove();
  68. // complete inherited destroy operations
  69. ScreenReaderUtil.inherited('destroy', this, arguments);
  70. }
  71. });
  72. return ScreenReaderUtil;
  73. });
  74. //# sourceMappingURL=ScreenReaderUtil.js.map