Why text inside component is not getting read ?

[KesavarajaRK]

Thanks for the awesome package. I wanted to know the reason the text inside a component is not getting read by the package or I am doing wrong. Sample is here https://codesandbox.io/s/eloquent-newton-7l2re2?file=/src/App.js.

Kindly guide me.

[morganney]

Hi there.

Let me first address some trivial issues with your code on CodeSandbox. Which, by the way, I do not recommend using Codesandbox to experiment with the Web Speech API. It exhibits wonky behavior, either due to it's usage of iframes or something else. You should be testing your code in a local development environment.

• onRateChange is a function with this signature (newRate: number) => void, not a number as you have it. You can use rate to assign a specific rate.
• You are using version 0.7.2 which I wouldn't recommend as it doesn't support rate if that is what you are ultimately trying to use. You should try the latest version of tts-react.
• The autoPlay prop will only auto play unconditionally in specific browsers like Safari. If your app is supporting Chrome, then autoPlay will only work if there has already been a user gesture in the UI. The experience is even more confusing in an environment like CodeSandbox.

To address the more significant issue of why the last <a> text is not being spoken, that is because tts-react is using Children.map recursively to find the necessary text to pass to a SpeechSynthesisUtterance, and currently if you check the caveats it states:

The traversal does not go deeper than React elements: they don’t get rendered, and their children aren’t traversed.

Thus, when you encode the last <a> tag as a React functional component in your CodeSandbox example, there is no way for tts-react to determine the children of <ContentComponent /> using supported React API's. I should update the documentation to specifically call out this issue.

In order to get the text from the last <a> tag spoken, the one rendered inside <ContentComponent />, you would have to include it as direct HTML children inside <TextToSpeech>. Here is an updated CodeSandbox example.

I do not think I want to attempt to use some other React API in an unsupported way to attempt to add support for nested React children inside <TextToSpeech>, at least not until I lock support down to a specific React version >= 18 (but you're welcome to open a PR). Currently, tts-react supports React 17 and 18 which have different API's for rendering. As time permits, I have been working on a custom HTML element tts-element (WIP) that uses native DOM API's to mimic the behavior of tts-react. In my opinion, that will provide a more robust solution to speaking/highlighting text within the DOM using the Web Speech API.

At the current time, the solution is to not nest React components inside <TextToSpeech>. I will update the README and other documentation to specifically call this out.