@playkit-js/hotspots 3.1.0 → 3.1.1-canary.2-da81074

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/hotspots",
-  "version": "3.1.0",
+  "version": "3.1.1-canary.2-da81074",
   "private": false,
   "bugs": {
     "url": "https://github.com/kaltura/playkit-js-hotspots/issues"
@@ -11,7 +11,7 @@
     "url": "git+https://github.com/kaltura/playkit-js-hotspots.git"
   },
   "dependencies": {
-    "@playkit-js/common": "^1.0.5"
+    "@playkit-js/common": "^1.0.7"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.23.0",

package/src/components/Hotspot.tsx

@@ -1,4 +1,5 @@
 import {h, Component} from 'preact';
+import {A11yWrapper} from '@playkit-js/common';
 import {LayoutHotspot} from '../utils/hotspot';
 import {AnalyticsEvents} from '../utils/analyticsEvents';
 
@@ -71,12 +72,6 @@ export default class Hotspot extends Component<Props, State> {
     });
   }
 
-  handleKeyUp = (event: any) => {
-    if (event.keyCode === 13) {
-      this.handleClick();
-    }
-  };
-
   isClickable = (): boolean => {
     const {
       hotspot: {onClick}
@@ -177,16 +172,11 @@ export default class Hotspot extends Component<Props, State> {
     };
 
     return (
-      <div
-        onClick={this.handleClick}
-        onKeyUp={this.handleKeyUp}
-        tabIndex={0}
-        aria-label={label}
-        aria-disabled={disableClick}
-        role="button"
-        style={containerStyles}>
-        <div style={buttonStyles}>{label}</div>
-      </div>
+      <A11yWrapper onClick={this.handleClick}>
+        <div tabIndex={0} aria-label={label} aria-disabled={disableClick} role="button" style={containerStyles}>
+          <div style={buttonStyles}>{label}</div>
+        </div>
+      </A11yWrapper>
     );
   }
 }

package/src/components/HotspotWrapper.tsx

@@ -40,6 +40,6 @@ export default class HotspotWrapper extends Component<Props> {
     const {hotspots} = this.props;
     const hotspotsElements = this.renderHotspots(hotspots);
 
-    return <div style={hotspotsContainerStyles}>{hotspotsElements}</div>;
+    return <div style={hotspotsContainerStyles} aria-live="polite">{hotspotsElements}</div>;
   }
 }