Demo site: role with implied hidden content has keyboard focus: button on volume slider

[elynema]

Description

The SiteImprove browser plugin identified this issue once a manifest was loaded into timeliner.

"An element with a role that makes its children presentational should not contain focusable elements."

In this case, the button for the volume slider lives underneath a div with role="slider".

According to this site, all descendants of slider are considered presentational:

There are some types of user interface components that, when represented in a platform accessibility API, can only contain text. Accessibility APIs do not have a way of representing semantic elements contained in a slider. To deal with this limitation, browsers, automatically apply role presentation to all descendant elements of any slider element as it is a role that does not support semantic children.

Does there need to be an explicit <button> declared with the slider or can CSS just be used to style the slider and slider thumb?
It also seems that the slider role is too far up the tree? Why are there so many divs below it in the hierarchy?

If we retain the <button> element, we also need to add a label for it.

[joncameron]

This is a Material UI component. Upgrading Material UI could be an option (or a folly). Or we could swap out this component for something that we provide that doesn't have this issue.