feat(ARIA): Add polyfill for ARIAMixin.

The ARIAMixin interface mixin lets users apply ARIA attributes to
DOM elements without having to rely on setAttribute and getAttribute.
It is one of our goals to switch to using that interface.
Unfortunately, it is not implemented on Firefox, so a polyfill is
necessary for that platform, before we can start using it.

Issue shaka-project#3378

Change-Id: Ia878900d75c7c2c04613360baacb4524774ac746

build/types/polyfill

@@ -1,6 +1,7 @@
 # Polyfills used to emulate missing browsers features.
 
 +../../node_modules/eme-encryption-scheme-polyfill/index.js
++../../lib/polyfill/aria.js
 +../../lib/polyfill/encryption_scheme.js
 +../../lib/polyfill/fullscreen.js
 +../../lib/polyfill/mathround.js

lib/polyfill/aria.js

@@ -0,0 +1,72 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+goog.provide('shaka.polyfill.Aria');
+
+goog.require('shaka.log');
+goog.require('shaka.polyfill');
+
+/**
+ * @summary A polyfill to add support for the ARIAMixin interface mixin, for
+ * browsers that do not implement it (e.g. Firefox).
+ * Note that IE also does not support ARIAMixin, but this polyfill does not work
+ * for that platform, as it relies on getters and setters.
+ * @see https://w3c.github.io/aria/#ARIAMixin
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element
+ */
+shaka.polyfill.Aria = class {
+  /** Install the polyfill if needed. */
+  static install() {
+    // eslint-disable-next-line no-restricted-syntax
+    if (Object.getOwnPropertyDescriptor(Element.prototype, 'ariaHidden')) {
+      shaka.log.info('Using native ARIAMixin interface.');
+      return;
+    }
+    shaka.log.info('ARIAMixin interface not detected. Installing polyfill.');
+
+    // Define a list of all of the ARIAMixin properties that we have externs
+    // for.
+    const attributes = [
+      'ariaHidden',
+      'ariaLabel',
+      'ariaPressed',
+      'ariaSelected',
+    ];
+
+    // Add each attribute, one by one.
+    for (const attribute of attributes) {
+      shaka.polyfill.Aria.addARIAMixinAttribute_(attribute);
+    }
+  }
+
+  /**
+   * Adds an attribute with the given name.
+   * @param {string} name The name of the attribute, in camelCase.
+   * @private
+   */
+  static addARIAMixinAttribute_(name) {
+    const snakeCaseName = name.toLowerCase().replace('aria', 'aria-');
+    /* eslint-disable no-restricted-syntax */
+    Object.defineProperty(Element.prototype, name, {
+      get() {
+        const element = /** @type {!Element} */ (this);
+        return element.getAttribute(snakeCaseName);
+      },
+      set(value) {
+        const element = /** @type {!Element} */ (this);
+        if (value == null || value == undefined) {
+          element.removeAttribute(snakeCaseName);
+        } else {
+          element.setAttribute(snakeCaseName, value);
+        }
+      },
+    });
+    /* eslint-enable no-restricted-syntax */
+  }
+};
+
+
+shaka.polyfill.register(shaka.polyfill.Aria.install);

shaka-player.uncompiled.js

@@ -32,6 +32,7 @@ goog.require('shaka.offline.OfflineManifestParser');
 goog.require('shaka.offline.OfflineScheme');
 goog.require('shaka.offline.Storage');
 goog.require('shaka.offline.indexeddb.StorageMechanism');
+goog.require('shaka.polyfill.Aria');
 goog.require('shaka.polyfill.EncryptionScheme');
 goog.require('shaka.polyfill.Fullscreen');
 goog.require('shaka.polyfill.MathRound');