@playkit-js/moderation 3.2.1 → 3.2.2-canary.2-aed86f3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/moderation",
-  "version": "3.2.1",
+  "version": "3.2.2-canary.2-aed86f3",
   "main": "dist/playkit-moderation.js",
   "private": false,
   "bugs": {
@@ -66,9 +66,9 @@
     "html5 player"
   ],
   "dependencies": {
-    "@playkit-js/common": "^1.0.18",
-    "@playkit-js/ui-managers": "^1.3.2",
+    "@playkit-js/common": "^1.1.1",
     "@playkit-js/playkit-js-ui": "^0.73.0",
+    "@playkit-js/ui-managers": "^1.3.2",
     "cypress": "^12.2.0"
   },
   "kaltura": {

package/src/components/moderation/moderation.tsx

@@ -1,10 +1,10 @@
 import {h, Component} from 'preact';
 import {Popover} from '../popover';
-import {OnClick, A11yWrapper, OverlayPortal} from '@playkit-js/common';
+import {OnClick, Button, OverlayPortal} from '@playkit-js/common';
 import * as styles from './moderation.scss';
 import {DownIcon} from './down-icon';
 
-const {Tooltip, Overlay, PLAYER_SIZE} = KalturaPlayer.ui.components;
+const {Overlay, PLAYER_SIZE} = KalturaPlayer.ui.components;
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 const {
   redux: {connect}
@@ -170,19 +170,14 @@ export class Moderation extends Component<MergedProps, ModerationState> {
                 />
                 <div className={styles.submitWrapper}>
                   <div className={styles.characterCounter} data-testid="characterCounter">{`${reportContent.length}/${reportLength}`}</div>
-                  <Tooltip label={tooltipMessage} classNames={styles.tooltip}>
-                    <A11yWrapper onClick={this._handleSubmit}>
-                      <button
-                        role="button"
-                        aria-disabled={submitButtonDisabled}
-                        aria-label={this.props.sendReportLabel}
-                        className={[styles.submitButton, submitButtonDisabled ? styles.disabled : ''].join(' ')}
-                        tabIndex={0}
-                        data-testid="submitButton">
-                        {this.props.sendReportLabel}
-                      </button>
-                    </A11yWrapper>
-                  </Tooltip>
+                  <Button
+                    onClick={this._handleSubmit}
+                    tooltip={{label: tooltipMessage, className: styles.tooltip}}
+                    disabled={submitButtonDisabled}
+                    ariaLabel={this.props.sendReportLabel}
+                    testId={'submitButton'}>
+                    {this.props.sendReportLabel}
+                  </Button>
                 </div>
               </form>
             </div>

package/src/components/popover/popover.tsx

@@ -117,12 +117,12 @@ export class Popover extends Component<PopoverProps, PopoverState> {
               {props.options.map((el, index) => {
                 return (
                   <A11yWrapper
+                    role="menuitem"
                     onClick={this._handleClickOnOption(el.onMenuChosen)}
                     onDownKeyPressed={this._handleDownKeyPressed(index)}
                     onUpKeyPressed={this._handleUpKeyPressed(index)}>
                     <div
                       tabIndex={0}
-                      role="menuitem"
                       aria-label={el.label}
                       className={styles.popoverMenuItem}
                       ref={node => {