bitmovin-player-ui - npm Package Compare versions

Comparing version 3.33.0 to 3.34.0

CHANGELOG.md

@@ -7,2 +7,7 @@ # Change Log
 
+## [3.34.0] - 2022-02-16
+
+### Fixed
+- Incorrect aria-label on playbackbutton toggle
+
 ## [3.33.0] - 2022-02-01
@@ -772,2 +777,3 @@
 
+[3.34.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.33.0...v3.34.0
 [3.33.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.32.0...v3.33.0
@@ -774,0 +780,0 @@ [3.32.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.31.0...v3.32.0

dist/js/framework/components/component.d.ts

@@ -205,2 +205,4 @@ import { DOM } from '../dom';
     getDomElement(): DOM;
+    setAriaLabel(label: LocalizableText): void;
+    setAriaAttr(name: string, value: string): void;
     /**
@@ -207,0 +209,0 @@ * Merges a configuration with a default configuration and a base configuration from the superclass.

dist/js/framework/components/component.js

@@ -7,2 +7,3 @@ "use strict";
 var eventdispatcher_1 = require("../eventdispatcher");
+var i18n_1 = require("../localization/i18n");
 /**
@@ -181,2 +182,8 @@ * The base class of the UI framework.
     };
+    Component.prototype.setAriaLabel = function (label) {
+        this.setAriaAttr('label', i18n_1.i18n.performLocalization(label));
+    };
+    Component.prototype.setAriaAttr = function (name, value) {
+        this.getDomElement().attr("aria-" + name, value);
+    };
     /**
@@ -183,0 +190,0 @@ * Merges a configuration with a default configuration and a base configuration from the superclass.

dist/js/framework/components/hugeplaybacktogglebutton.js

@@ -32,3 +32,2 @@ "use strict";
             role: 'button',
-            ariaLabel: i18n_1.i18n.getLocalizer('play'),
         }, _this.config);
@@ -35,0 +34,0 @@ return _this;

dist/js/framework/components/playbacktogglebutton.js

@@ -30,4 +30,5 @@ "use strict";
             cssClass: 'ui-playbacktogglebutton',
-            text: i18n_1.i18n.getLocalizer('playPause'),
-            ariaLabel: i18n_1.i18n.getLocalizer('play'),
+            text: i18n_1.i18n.getLocalizer('play'),
+            onAriaLabel: i18n_1.i18n.getLocalizer('pause'),
+            offAriaLabel: i18n_1.i18n.getLocalizer('play'),
         }, _this.config);
@@ -34,0 +35,0 @@ _this.isPlayInitiated = false;

dist/js/framework/components/togglebutton.d.ts

@@ -19,2 +19,19 @@ import { Button, ButtonConfig } from './button';
     /**
+     * WCAG20 standard for defining info about the component (usually the name)
+     *
+     * It is recommended to use `onAriaLabel` and `offAriaLabel` for toggle buttons
+     * as the component can then update them as the button is used.
+     *
+     * If both `ariaLabel` and `onAriaLabel` are set, `onAriaLabel` is used.
+     */
+    ariaLabel?: LocalizableText;
+    /**
+     * The aria label that marks the on-state of the button.
+     */
+    onAriaLabel?: LocalizableText;
+    /**
+     * The aria label that marks the off-state of the button.
+     */
+    offAriaLabel?: LocalizableText;
+    /**
      * The text as string or as localize callback on the button.
@@ -21,0 +38,0 @@ */

dist/js/framework/components/togglebutton.js

@@ -36,2 +36,5 @@ "use strict";
         };
+        if (config.onAriaLabel) {
+            config.ariaLabel = config.onAriaLabel;
+        }
         _this.config = _this.mergeConfig(config, defaultConfig, _this.config);
@@ -56,3 +59,6 @@ return _this;
             this.onToggleOnEvent();
-            this.getDomElement().attr('aria-pressed', 'true');
+            this.setAriaAttr('pressed', 'true');
+            if (this.config.onAriaLabel) {
+                this.setAriaLabel(this.config.onAriaLabel);
+            }
         }
@@ -71,3 +77,6 @@ };
             this.onToggleOffEvent();
-            this.getDomElement().attr('aria-pressed', 'false');
+            this.setAriaAttr('pressed', 'false');
+            if (this.config.offAriaLabel) {
+                this.setAriaLabel(this.config.offAriaLabel);
+            }
         }
@@ -74,0 +83,0 @@ };

dist/js/framework/localization/languages/de.json

@@ -7,2 +7,3 @@ {
   "play": "Abspielen",
+  "pause": "Pause",
   "playPause": "Abspielen/Pause",
@@ -9,0 +10,0 @@ "open": "öffnen",

dist/js/framework/localization/languages/en.json

@@ -46,2 +46,3 @@ {
   "play": "Play",
+  "pause": "Pause",
   "open": "open",
@@ -48,0 +49,0 @@ "close": "Close",

dist/js/framework/main.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = void 0;
-exports.version = '3.33.0';
+exports.version = '3.34.0';
 // Management
@@ -6,0 +6,0 @@ var uimanager_1 = require("./uimanager");

package.json

 {
   "name": "bitmovin-player-ui",
-  "version": "3.33.0",
+  "version": "3.34.0",
   "description": "Bitmovin Player UI Framework",
@@ -5,0 +5,0 @@ "main": "./dist/js/framework/main.js",

spec/helper/MockHelper.ts

@@ -45,3 +45,3 @@ import { PlayerAPI, PlayerEvent } from 'bitmovin-player';
 
-  export function generateDOMMock(): DOM {
+  export function generateDOMMock(): jest.Mocked<DOM> {
     const DOMClass: jest.Mock<DOM> = jest.fn().mockImplementation(() => ({
@@ -58,5 +58,6 @@ addClass: jest.fn(),
       append: jest.fn(),
+      attr: jest.fn(),
     }));
 
-    return new DOMClass();
+    return new DOMClass() as jest.Mocked<DOM>;
   }
@@ -63,0 +64,0 @@

src/ts/components/component.ts

@@ -6,3 +6,3 @@ import {Guid} from '../guid';
 import { PlayerAPI } from 'bitmovin-player';
-import { LocalizableText } from '../localization/i18n';
+import { i18n, LocalizableText } from '../localization/i18n';
 
@@ -296,2 +296,10 @@ /**
 
+  setAriaLabel(label: LocalizableText): void {
+    this.setAriaAttr('label', i18n.performLocalization(label));
+  }
+
+  setAriaAttr(name: string, value: string) {
+    this.getDomElement().attr(`aria-${name}`, value);
+  }
+
   /**
@@ -298,0 +306,0 @@ * Merges a configuration with a default configuration and a base configuration from the superclass.

src/ts/components/hugeplaybacktogglebutton.ts

@@ -20,3 +20,2 @@ import {ToggleButtonConfig} from './togglebutton';
       role: 'button',
-      ariaLabel: i18n.getLocalizer('play'),
     }, this.config);
@@ -23,0 +22,0 @@ }

src/ts/components/playbacktogglebutton.ts

@@ -20,4 +20,5 @@ import {ToggleButton, ToggleButtonConfig} from './togglebutton';
       cssClass: 'ui-playbacktogglebutton',
-      text: i18n.getLocalizer('playPause'),
-      ariaLabel: i18n.getLocalizer('play'),
+      text: i18n.getLocalizer('play'),
+      onAriaLabel: i18n.getLocalizer('pause'),
+      offAriaLabel: i18n.getLocalizer('play'),
     }, this.config);
@@ -24,0 +25,0 @@

src/ts/components/togglebutton.ts

@@ -20,2 +20,19 @@ import {Button, ButtonConfig} from './button';
   /**
+   * WCAG20 standard for defining info about the component (usually the name)
+   *
+   * It is recommended to use `onAriaLabel` and `offAriaLabel` for toggle buttons
+   * as the component can then update them as the button is used.
+   *
+   * If both `ariaLabel` and `onAriaLabel` are set, `onAriaLabel` is used.
+   */
+  ariaLabel?: LocalizableText;
+  /**
+   * The aria label that marks the on-state of the button.
+   */
+  onAriaLabel?: LocalizableText;
+  /**
+   * The aria label that marks the off-state of the button.
+   */
+  offAriaLabel?: LocalizableText;
+  /**
    * The text as string or as localize callback on the button.
@@ -48,2 +65,6 @@ */
 
+    if (config.onAriaLabel) {
+      config.ariaLabel = config.onAriaLabel;
+    }
+
     this.config = this.mergeConfig(config, defaultConfig as Config, this.config);
@@ -72,3 +93,7 @@ }
 
-      this.getDomElement().attr('aria-pressed', 'true');
+      this.setAriaAttr('pressed', 'true');
+
+      if (this.config.onAriaLabel) {
+        this.setAriaLabel(this.config.onAriaLabel);
+      }
     }
@@ -91,3 +116,7 @@ }
 
-      this.getDomElement().attr('aria-pressed', 'false');
+      this.setAriaAttr('pressed', 'false');
+
+      if (this.config.offAriaLabel) {
+        this.setAriaLabel(this.config.offAriaLabel);
+      }
     }
@@ -94,0 +123,0 @@ }

src/ts/localization/languages/de.json

@@ -7,2 +7,3 @@ {
   "play": "Abspielen",
+  "pause": "Pause",
   "playPause": "Abspielen/Pause",
@@ -9,0 +10,0 @@ "open": "öffnen",

src/ts/localization/languages/en.json

@@ -46,2 +46,3 @@ {
   "play": "Play",
+  "pause": "Pause",
   "open": "open",
@@ -48,0 +49,0 @@ "close": "Close",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4445304

increased by0.22%

Number of package files

439

increased by0.23%

Lines of code

49743

increased by0.32%

No dependency changes