feat(player): media announcer

packages/react/src/components/announcer.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
+
+import { MediaAnnouncerInstance } from './primitives/instances';
+import { Primitive } from './primitives/nodes';
+
+/* -------------------------------------------------------------------------------------------------
+ * MediaAnnouncer
+ * -----------------------------------------------------------------------------------------------*/
+
+const MediaAnnouncerBridge = createReactComponent(MediaAnnouncerInstance, {
+  events: ['onChange'],
+});
+
+export interface MediaAnnouncerProps extends ReactElementProps<MediaAnnouncerInstance> {
+  ref?: React.Ref<HTMLElement>;
+}
+
+/**
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/announcer}
+ * @example
+ * ```tsx
+ * <MediaAnnouncer />
+ * ```
+ */
+const MediaAnnouncer = React.forwardRef<HTMLElement, MediaAnnouncerProps>(
+  ({ style, children, ...props }, forwardRef) => {
+    return (
+      <MediaAnnouncerBridge {...(props as Omit<MediaAnnouncerProps, 'ref'>)}>
+        {(props) => (
+          <Primitive.div
+            {...props}
+            style={{ display: 'contents', ...style }}
+            ref={composeRefs(props.ref, forwardRef)}
+          >
+            {children}
+          </Primitive.div>
+        )}
+      </MediaAnnouncerBridge>
+    );
+  },
+);
+
+MediaAnnouncer.displayName = 'MediaAnnouncer';
+export { MediaAnnouncer };

packages/react/src/components/layouts/default/audio-layout.tsx

@@ -17,9 +17,9 @@ import { createComputed } from '../../../hooks/use-signals';
 import * as Controls from '../../ui/controls';
 import { useLayoutName } from '../utils';
 import { i18n, useDefaultLayoutContext } from './context';
-import { DefaultKeyboardStatus } from './keyboard-action-display';
 import { createDefaultMediaLayout, type DefaultLayoutProps } from './media-layout';
 import {
+  DefaultAnnouncer,
   DefaultCaptionButton,
   DefaultCaptions,
   DefaultChaptersMenu,
@@ -112,8 +112,8 @@ function AudioLayout() {
   const slots = useDefaultAudioLayoutSlots();
   return (
     <>
+      <DefaultAnnouncer />
       <DefaultCaptions />
-      <DefaultKeyboardStatus className="vds-sr-only" />
       <Controls.Root className="vds-controls">
         <Controls.Group className="vds-controls-group">
           {slot(slots, 'seekBackwardButton', <DefaultSeekButton backward tooltip="top start" />)}

packages/react/src/components/layouts/default/index.ts

@@ -10,11 +10,4 @@ export type { DefaultLayoutProps } from './media-layout';
 export * from './icons';
 export * from './context';
 export * from './ui';
-export {
-  DefaultKeyboardDisplay,
-  DefaultKeyboardStatus,
-  type DefaultKeyboardDisplayProps,
-  type DefaultKeyboardDisplayWords,
-  type DefaultKeyboardDisplayTranslations,
-  type DefaultKeyboardStatusProps,
-} from './keyboard-action-display';
+export { DefaultKeyboardDisplay, type DefaultKeyboardDisplayProps } from './keyboard-display';