The <media-time-display> component is triggering an accessibility validation error because it uses aria-valuetext on an element defined with role="button". According to W3C WAI-ARIA standards, aria-valuetext is only supported on range-based roles.
Steps to Reproduce
- Open the page containing the media player.
- Inspect the element.
- Run an automated accessibility audit (Axe/Lighthouse).
- Observe the error: ARIA attribute is not allowed: aria-valuetext.
Suggested Fixes
-
Option A: Move the time description to the aria-label. For example:
aria-label="Playback time: 10 seconds"
-
Option B: Use aria-description to provide the specific time value while keeping the primary label focused on the action.
Workaround
Set the notoggle attribute.
Setting disabled on the other hand has a similar behavior, but does not fix the error
The
<media-time-display>component is triggering an accessibility validation error because it usesaria-valuetexton an element defined withrole="button". According to W3C WAI-ARIA standards,aria-valuetextis only supported on range-based roles.Steps to Reproduce
Suggested Fixes
Option A: Move the time description to the
aria-label. For example:aria-label="Playback time: 10 seconds"Option B: Use
aria-descriptionto provide the specific time value while keeping the primary label focused on the action.Workaround
Set the
notoggleattribute.Setting
disabledon the other hand has a similar behavior, but does not fix the error