fix: Reduce the multiple-announcement by screen readers of the new name of a button when its text label changes. (videojs#5158)

OwenEdwards · gkatsev · commit 1c74e4fa0bf2 · 2018-05-11T14:31:28.000-04:00
Move the aria-live attribute to the control text element within buttons, rather than on the whole button, so it is not affected by the change of the title attribute, only by the change of the control text. It seems like having aria-live on the button itself means that JAWS and NVDA announce the button both when the button text changes and when the title attribute changes. NVDA speaks the new label more times because it announces the button text as the label and the title as the description, so it says, for example, "pause button pause". JAWS doesn't appear to do this, so it doesn't repeat it as many times. Partially addresses videojs#5023
diff --git a/src/js/button.js b/src/js/button.js
@@ -41,10 +41,7 @@ class Button extends ClickableComponent {
     attributes = assign({
 
       // Necessary since the default button type is "submit"
-      'type': 'button',
-
-      // let the screen reader user know that the text of the button may change
-      'aria-live': 'polite'
+      type: 'button'
     }, attributes);
 
     const el = Component.prototype.createEl.call(this, tag, props, attributes);
diff --git a/src/js/clickable-component.js b/src/js/clickable-component.js
@@ -62,10 +62,7 @@ class ClickableComponent extends Component {
 
     // Add ARIA attributes for clickable element which is not a native HTML button
     attributes = assign({
-      'role': 'button',
-
-      // let the screen reader user know that the text of the element may change
-      'aria-live': 'polite'
+      role: 'button'
     }, attributes);
 
     this.tabIndex_ = props.tabIndex;
@@ -96,6 +93,9 @@ class ClickableComponent extends Component {
   createControlTextEl(el) {
     this.controlTextEl_ = Dom.createEl('span', {
       className: 'vjs-control-text'
+    }, {
+      // let the screen reader user know that the text of the element may change
+      'aria-live': 'polite'
     });
 
     if (el) {
diff --git a/test/unit/button.test.js b/test/unit/button.test.js
@@ -22,7 +22,7 @@ QUnit.test('should localize its text', function(assert) {
   const el = testButton.createEl();
 
   assert.ok(el.nodeName.toLowerCase().match('button'));
-  assert.ok(el.innerHTML.match(/vjs-control-text"?>Juego/));
+  assert.ok(el.innerHTML.match(/vjs-control-text"?[^<>]*>Juego/));
   assert.equal(el.getAttribute('title'), 'Juego');
 
   testButton.dispose();
