diff --git a/packages/react/react/src/components/MuteButton.tsx b/packages/react/react/src/components/MuteButton.tsx index fd33b78b..8d7e731c 100644 --- a/packages/react/react/src/components/MuteButton.tsx +++ b/packages/react/react/src/components/MuteButton.tsx @@ -31,9 +31,8 @@ export const useMuteButtonProps = ( props: React.PropsWithChildren<{ [k: string]: any }>, state: ReturnType, ) => { - return { - /** data attributes/props */ - ['data-muted']: state.muted, + const baseProps = { + /** data attributes/props - non-boolean */ ['data-volume-level']: state.volumeLevel, /** @TODO Need another state provider in core for i18n (CJP) */ /** aria attributes/props */ @@ -44,6 +43,13 @@ export const useMuteButtonProps = ( /** external props spread last to allow for overriding */ ...props, }; + + // Handle boolean data attribute: present with empty string when true, absent when false + if (state.muted) { + baseProps['data-muted'] = ''; + } + + return baseProps; }; export type useMuteButtonProps = typeof useMuteButtonProps; diff --git a/packages/react/react/src/components/PlayButton.tsx b/packages/react/react/src/components/PlayButton.tsx index 85121bb5..7169713a 100644 --- a/packages/react/react/src/components/PlayButton.tsx +++ b/packages/react/react/src/components/PlayButton.tsx @@ -29,9 +29,7 @@ export const usePlayButtonProps = ( props: React.PropsWithChildren<{ [k: string]: any }>, state: ReturnType, ) => { - return { - /** data attributes/props */ - ['data-paused']: state.paused, + const baseProps = { /** @TODO Need another state provider in core for i18n (CJP) */ /** aria attributes/props */ role: 'button', @@ -41,6 +39,13 @@ export const usePlayButtonProps = ( /** external props spread last to allow for overriding */ ...props, }; + + // Handle boolean data attribute: present with empty string when true, absent when false + if (state.paused) { + baseProps['data-paused'] = ''; + } + + return baseProps; }; export type usePlayButtonProps = typeof usePlayButtonProps;