Skip to content

Commit

Permalink
fix(ADA-1734): Continues ADA-1500, Converting labels to string v2 (#64)
Browse files Browse the repository at this point in the history
**With:**
kaltura/playkit-js-moderation#95

**Issue:**:
Previous JSX was not translated when loaded in the ui-managers
This was causing aria-label to be rendered: [Object object]:

![image](https://github.com/user-attachments/assets/aecff15e-77a8-4534-96cb-e258e7bc5319)

 
**Fix**:
Used "preact-render-to-string" library to convert the JSX to string
  • Loading branch information
RazvanBrinzoiK05 authored Nov 4, 2024
1 parent 41935d4 commit 76375e5
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 2 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@
"name": "uiManagers"
},
"dependencies": {
"@playkit-js/common": "1.5.18"
"@playkit-js/common": "1.5.18",
"preact-render-to-string": "^6.5.11"
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { h, Fragment, VNode } from 'preact';
import { useState, useRef, useLayoutEffect } from 'preact/hooks';
import * as styles from './dropdown-bar-item.scss';
import { renderToString } from 'preact-render-to-string';
import { ui } from '@playkit-js/kaltura-player-js';
import { A11yWrapper } from '@playkit-js/common/dist/hoc/a11y-wrapper';
import { SvgIcon } from '../../models/svg-icon';
Expand Down Expand Up @@ -58,6 +59,8 @@ const DropdownBarItem = ({ displayName, text, icon, onClick, onDropdownClick, to
textElement
);

const textString = typeof text === 'string' ? text : renderToString(text);

const renderContent = (): VNode => {
return (
<A11yWrapper
Expand All @@ -67,7 +70,7 @@ const DropdownBarItem = ({ displayName, text, icon, onClick, onDropdownClick, to
}}
role="menuitem"
>
<div className={styles.dropdownItem} tabIndex={0} aria-label={text}>
<div className={styles.dropdownItem} tabIndex={0} aria-label={textString}>
<div className={styles.icon}>{renderIcon()}</div>
{content}
</div>
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -5541,6 +5541,11 @@ preact-i18n@^2.0.0-preactx.2:
dependencies:
dlv "^1.1.2"

preact-render-to-string@^6.5.11:
version "6.5.11"
resolved "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-6.5.11.tgz#467e69908a453497bb93d4d1fc35fb749a78e027"
integrity sha512-ubnauqoGczeGISiOh6RjX0/cdaF8v/oDXIjO85XALCQjwQP+SB4RDXXtvZ6yTYSjG+PC1QRP2AhPgCEsM2EvUw==

preact@^10.0.0:
version "10.13.2"
resolved "https://registry.yarnpkg.com/preact/-/preact-10.13.2.tgz#2c40c73d57248b57234c4ae6cd9ab9d8186ebc0a"
Expand Down

0 comments on commit 76375e5

Please sign in to comment.