Issue with Non-Differentiated sr-only Text for Back Button in Settings Menu

[faizanphenom]

Description:

When using PLYR's video player, multiple settings options (such as captions and speed) are accessible via the player controls. Upon opening any of these options, a back button appears at the top. However, the sr-only text for this back button is the same for both captions and speed settings, which violates WCAG accessibility guidelines.

As per the WCAG guidelines, the screen reader (SR) text should be contextually different for each setting option to improve accessibility for users relying on screen readers. In the current implementation, the variable menuBack is used for both captions and speed settings, preventing us from setting different text values for each scenario.

Steps to Reproduce:

1. Open the PLYR player with controls.
2. Click on the settings button to access options like captions and playback speed.
3. Notice that the sr-only text for the back button is the same for both captions and speed settings.

Expected Behavior: The back button's sr-only text should be dynamically set based on the context of the opened menu (e.g., "Back to captions" when the captions menu is open, and "Back to speed" when the speed menu is open).

Actual Behavior: The sr-only text for the back button remains the same for both captions and speed settings, making it less accessible for screen reader users.

Suggested Solution: Update the JavaScript code to ensure that the sr-only text for the back button is set dynamically based on the active menu (captions or speed). This can be achieved by passing context-specific values to the menuBack variable or introducing distinct variables for each case.

Environment:
PLYR version: v3.7.8
Browser: Chrome, FF, Edge
Operating System: windows, Linux, Mac