@playkit-js/hotspots 3.2.27 → 3.2.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/hotspots",
-  "version": "3.2.27",
+  "version": "3.2.28",
   "private": false,
   "bugs": {
     "url": "https://github.com/kaltura/playkit-js-hotspots/issues"

package/src/components/Hotspot.tsx

@@ -193,7 +193,7 @@ export default class Hotspot extends Component<Props, State> {
     };
 
     return (
-      <A11yWrapper onClick={this.handleClick} role='alert' aria-live="polite">
+      <A11yWrapper onClick={this.handleClick}>
         <div ref={(ref) => (this.hotspotRef = ref)} tabIndex={0} role="button" aria-label={label} aria-disabled={disableClick} style={containerStyles} data-testid="hotspots_hotspot">
           <div style={buttonStyles}>{label}</div>
         </div>

package/src/components/HotspotWrapper.tsx

@@ -10,6 +10,11 @@ const translates = {
     <Text id="hotspots.hotspot_removed" fields={{ hotspotLabel: '' }}>
       {`{hotspotLabel} hotspot removed`}
     </Text>
+  ),
+  hotspotAdded: (
+    <Text id="hotspots.hotspot_added" fields={{ hotspotLabel: '' }}>
+      {`{hotspotLabel} hotspot added`}
+    </Text>
   )
 };
 
@@ -30,6 +35,7 @@ export interface Props {
   sendAnalytics(event: AnalyticsEvents): void;
   dispatcher(name: string, payload?: any): void;
   hotspotRemoved?: string;
+  hotspotAdded?: string;
   player?: any;
 }
 
@@ -51,6 +57,8 @@ export default class HotspotWrapper extends Component<Props> {
     );
 
     let announced = false;
+    
+    // Announce removed hotspots
     this.previousHotspotMap.forEach((label, id) => {
       if (!currentMap.has(id) && !announced) {
         if (this.props.hotspotRemoved) {
@@ -61,6 +69,19 @@ export default class HotspotWrapper extends Component<Props> {
       }
     });
 
+    // Announce added hotspots
+    if (!announced) {
+      currentMap.forEach((label, id) => {
+        if (!this.previousHotspotMap.has(id) && !announced) {
+          if (this.props.hotspotAdded) {
+            const message = this.props.hotspotAdded.replace('{hotspotLabel}', label);
+            this.announceHotspotChange(message);
+          }
+          announced = true;
+        }
+      });
+    }
+
     this.previousHotspotMap = currentMap;
   }