Add tab index & custom class names (#300)

* fix: added ID element

* chore: added changeset

.changeset/odd-ties-jog.md

@@ -0,0 +1,5 @@
+---
+'@livepeer/react': patch
+---
+
+**Fix:** added a `tabIndex` prop to allow for customization of the tab index of the container element, as well as consistent class names for the container elements to allow for custom CSS.

packages/react/src/components/media/Player.tsx

@@ -40,6 +40,10 @@ type PlayerProps = CorePlayerProps<HTMLMediaElement, PosterSource> & {
    * domains, for access control policies.
    */
   allowCrossOriginCredentials?: boolean;
+  /**
+   * The tab index of the container element.
+   */
+  tabIndex?: number;
 };
 
 export type { PlayerObjectFit, PlayerProps };
@@ -83,7 +87,11 @@ export const PlayerInternal = (props: PlayerProps) => {
       opts={controls ?? {}}
       playerProps={props}
     >
-      <Container theme={theme} aspectRatio={aspectRatio}>
+      <Container
+        theme={theme}
+        aspectRatio={aspectRatio}
+        tabIndex={props.tabIndex}
+      >
         {source && source?.[0]?.type === 'audio' ? (
           <AudioPlayer
             {...playerProps}

packages/react/src/components/media/controls/Container.tsx

@@ -1,4 +1,4 @@
-import { ContainerProps } from '@livepeer/core-react/components';
+import { ContainerProps as CoreContainerProps } from '@livepeer/core-react/components';
 import { MediaControllerState } from 'livepeer';
 
 import { styling } from 'livepeer/media/browser/styling';
@@ -12,10 +12,12 @@ const mediaControllerSelector = ({
   fullscreen,
 });
 
-export type { ContainerProps };
+export type ContainerProps = CoreContainerProps & {
+  tabIndex?: number;
+};
 
 export const Container: React.FC<ContainerProps> = (props) => {
-  const { children, aspectRatio, theme } = props;
+  const { children, aspectRatio, theme, tabIndex } = props;
 
   // cast response from useTheme to string
   const className = useTheme(theme) as string;
@@ -27,14 +29,14 @@ export const Container: React.FC<ContainerProps> = (props) => {
       style={{
         display: 'contents',
       }}
-      className={className}
+      className={`${className} livepeer-contents-container`}
     >
       <div
-        className={styling.container({
+        className={`${styling.container({
           aspectRatio,
           size: fullscreen ? 'fullscreen' : 'default',
-        })}
-        tabIndex={0}
+        })} livepeer-aspect-ratio-container`}
+        tabIndex={tabIndex ?? 0}
       >
         {children}
       </div>