"Play Voiceovers" button should not be clickable when it is disabled.

[sesundor]

Describe the bug

When clicking the gray play button, it is able to click but no sound.
When hovering the play button the comment shows "Not available in English"
The play button is misleading to the user and also make user to do extra by clicking the "English (auto)" from the dropdown only to listen the lesson.

URL of the page where the issue is observed.

https://www.oppiatestserver.org/explore/G8ZgSj1O4rjE?story_url_fragment=piece-of-cake&topic_url_fragment=fractions&classroom_url_fragment=math&node_id=node_1

Steps To Reproduce

1-Navigate to "Learner Dashboard."
2-Go to the Basic Math.
3-Open "Begin With Fractions"
4-Click "Chapter 1: What is Fractions??"
5-Click the drop-down arrow of "Listen to the lesson".
6-Click the play button.
7-Hover on the play button.

Expected Behavior

If the play button is grayed out, the user should not be able to click it.
The user should only click the play button when it is not grayed out.
When hover the play button it should not say "Not available in English".

Screenshots/Videos

Defaulted as English with a gray play button

When hovered, the comment shows "Not available in English"

When the gray play button is clicked, it is able to click but not sound.

What device are you using?

Desktop

Operating System

Windows

What browsers are you seeing the problem on?

Chrome

Browser version

Version 124.0.6367.78 (Official Build) (64-bit)

Additional context

No response

Tips for developers

Before addressing the bug, please identify which PR caused the issue (you can follow the steps here). If you identify the PR, comment on the issue with a link to it. If not, mention the commit hash of the oldest commit you saw the bug on (and the month and year it was made in).

Then, please leave a comment with details of the approach that you plan to take to fix the issue (see example).

Note: If this is your first Oppia issue, please make sure to follow our guidelines for choosing an issue and setting things up. You will also need to show a demo of the fix working correctly on your local machine. Thanks!

[RaymondA-A]

The play button if not required, should be changed to a label in the html code.
Disabling the voiceover button in HTML will still make the botton show as a button but it would just not be clickable. This would make the styling to grey out, causing another problem with the intended styling of the button.

[HardikGoyal2003]

@seanlip Can you confirm if this issue is similar to #19787 ??

[seanlip]

Hi @HardikGoyal2003 -- I think it might be, but part of the problem is that I cannot understand what exactly is being reported in #19787. The description isn't clear to me.

So, I would ask you instead :) Is what you reported in #19787 fullly captured in this issue as well? If so, we can close #19787 as a duplicate of this one. If not, maybe you could explain what the difference is?

Thanks!

[HardikGoyal2003]

@seanlip This issue includes all the points from #19787 . To summarize #19787 , the points are:

• Hide languages in the drop-down that are not available to the user.
• Implement skip feature functionality for English auto-generated audio.

Thanks!