@playkit-js/playkit-js-ui 0.82.4 → 0.82.5-canary.0-e0f35fd

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/playkit-js-ui",
-  "version": "0.82.4",
+  "version": "0.82.5-canary.0-e0f35fd",
   "description": "",
   "keywords": [
     "kaltura",

package/src/components/dropdown/dropdown.tsx

@@ -177,10 +177,10 @@ class DropDown extends Component<any, any> {
               props.pushRef(el);
             }
           }}
-          role="menuitem"
-          aria-haspopup="true"
+          role="combobox"
+          aria-haspopup="listbox"
           aria-expanded={this.state.dropMenuActive ? 'true' : 'false'}
-          aria-labelledby={[props.name, activeOptionId].join(' ')}
+          aria-labelledby={props.name}
           className={style.dropdownButton}
           onClick={this.onClick}
           onKeyDown={this.onKeyDown}

package/src/components/menu/menu.tsx

@@ -167,29 +167,30 @@ class Menu extends Component<MenuProps & WithEventManagerProps, any> {
    * @returns {React$Element} - component element
    * @memberof Menu
    */
-  renderNativeSelect(labelledby: string): VNode<any> {
-    let classes = this.props.hideSelect ? style.mobileHiddenSelect : '';
-    classes += ` ${style.dropdown}`;
-    return (
-      <select
-        aria-labelledby={labelledby}
-        role="listbox"
-        ref={el => {
-          if (this.props.pushRef) {
-            this.props.pushRef(el);
-          }
-        }}
-        className={classes}
-        onChange={this.onChange}
-      >
-        {this.props.options.map((o, index) => (
-          <option role="option" aria-selected={this.isSelected(o)} selected={this.isSelected(o)} value={index} key={index}>
-            {o.label}
-          </option>
-        ))}
-      </select>
-    );
-  }
+renderNativeSelect(labelledby: string): VNode<any> {
+  let classes = this.props.hideSelect ? style.mobileHiddenSelect : '';
+  classes += ` ${style.dropdown}`;
+  const selectedValue = this.props.options.findIndex(o => this.isSelected(o));
+  return (
+    <select
+      aria-labelledby={labelledby}
+      ref={el => {
+        if (this.props.pushRef) {
+          this.props.pushRef(el);
+        }
+      }}
+      className={classes}
+      value={selectedValue}
+      onChange={this.onChange}
+    >
+      {this.props.options.map((o, index) => (
+        <option value={index} key={index}>
+          {o.label}
+        </option>
+      ))}
+    </select>
+  );
+}
 
   /**
    * if mobile device detected, renders the native select element.
@@ -201,13 +202,11 @@ class Menu extends Component<MenuProps & WithEventManagerProps, any> {
    */
   render(props: any): VNode<any> {
     props.clearAccessibleChildren();
-    const menuItemRole = "menuitem";
-    const menuItemRadioRole = "menuitemradio";
     return props.isMobile || props.isSmallSize ? (
       this.renderNativeSelect(props.labelledby)
     ) : (
       <div
-        role="menu"
+        role="listbox"
         onKeyDown={props.handleKeyDown}
         ref={c => (c ? (this._menuElement = c) : undefined)}
         className={[style.dropdownMenu, ...this.state.position].join(' ')}
@@ -222,7 +221,8 @@ class Menu extends Component<MenuProps & WithEventManagerProps, any> {
             }}
             key={index}
             data={o}
-            role={o?.isAdvanced ? menuItemRole : menuItemRadioRole}
+            role="option"
+            aria-selected={this.isSelected(o)}
           />
         ))}
       </div>
@@ -283,7 +283,7 @@ class MenuItem extends Component<any, any> {
       <div
         role={props?.role}
         tabIndex={-1}
-        aria-checked={props.isSelected(props.data) ? 'true' : 'false'}
+        aria-selected={props.isSelected(props.data)}
         ref={element => {
           this.props.addAccessibleChild(element);
           if (props.isSelected(props.data)) {