feat: add aria label to controller buttons

packages/griffith/src/components/TranslatedText.tsx

@@ -1,22 +1,12 @@
 import React, {ReactElement} from 'react'
-import {LocaleConfig, LocaleConfigKey} from '../constants/locales'
-import LocaleContext from '../contexts/LocaleContext'
+import {useLocaleText} from '../contexts/LocaleContext'
 
 const TranslatedText: React.FC<{
-  name: LocaleConfigKey
-  style?: 'narrow' | 'text' // narrow 简短的文本展示，text 正常文本展示，两种展示格式满足长短文案需求
+  name: Parameters<typeof useLocaleText>[0]
+  /** narrow 简短的文本展示，text 正常文本展示，两种展示格式满足长短文案需求 */
+  style?: Parameters<typeof useLocaleText>[1]
 }> = ({name, style = 'text'}): ReactElement => {
-  return (
-    <LocaleContext.Consumer>
-      {(locale) => {
-        if (typeof locale[name] === 'object')
-          return (
-            locale[name] as Exclude<LocaleConfig[keyof LocaleConfig], string>
-          )[style]
-        return locale[name]
-      }}
-    </LocaleContext.Consumer>
-  )
+  return <>{useLocaleText(name, style)}</>
 }
 
 export default TranslatedText

packages/griffith/src/components/items/ControllerTooltip.tsx

@@ -1,18 +1,25 @@
-import React from 'react'
+import React, {cloneElement} from 'react'
 import {css} from 'aphrodite/no-important'
 import {LocaleConfigKey} from '../../constants/locales'
+import {useLocaleText} from '../../contexts/LocaleContext'
 import useBoolean from '../../hooks/useBoolean'
-import TranslatedText from '../TranslatedText'
 import styles from '../Controller.styles'
 
 type Props = {
-  content: LocaleConfigKey
+  localeKey: LocaleConfigKey
+  children: React.ReactElement
 }
 
 const canUseTouch =
   typeof document !== 'undefined' && 'ontouchstart' in document.body
 
-const ControllerTooltip: React.FC<Props> = ({content, children}) => {
+/**
+ * ControllerButton
+ *
+ * `localeKey` 取本地文本，显示为 tooltip，同时设定为 children 的 `aria-label`
+ */
+const ControllerTooltip: React.FC<Props> = ({localeKey, children}) => {
+  const text = useLocaleText(localeKey)
   const [isHovered, isHoveredSwitch] = useBoolean()
 
   return (
@@ -21,7 +28,7 @@ const ControllerTooltip: React.FC<Props> = ({content, children}) => {
       onMouseEnter={isHoveredSwitch.on}
       onMouseLeave={isHoveredSwitch.off}
     >
-      {children}
+      {cloneElement(children, {'aria-label': text})}
       {!canUseTouch && (
         <div
           className={css(
@@ -30,7 +37,7 @@ const ControllerTooltip: React.FC<Props> = ({content, children}) => {
             styles.tooltipContent
           )}
         >
-          <TranslatedText name={content} />
+          {text}
         </div>
       )}
     </div>

packages/griffith/src/components/items/FullScreenButtonItem.tsx

@@ -8,7 +8,7 @@ const FullScreenButtonItem: React.FC<{
   onClick: React.HTMLAttributes<HTMLButtonElement>['onClick']
 }> = ({isFullScreen, onClick}) => (
   <ControllerTooltip
-    content={
+    localeKey={
       isFullScreen ? 'action-exit-fullscreen' : 'action-enter-fullscreen'
     }
   >

packages/griffith/src/components/items/PageFullScreenButtonItem.tsx

@@ -8,7 +8,7 @@ const PageFullScreenButtonItem: React.FC<{
   onClick: React.HTMLAttributes<HTMLButtonElement>['onClick'] | (() => void)
 }> = ({isFullScreen, onClick}) => (
   <ControllerTooltip
-    content={
+    localeKey={
       isFullScreen
         ? 'action-exit-page-fullscreen'
         : 'action-enter-page-fullscreen'

packages/griffith/src/components/items/PipButtonItem.tsx

@@ -7,7 +7,7 @@ const PipButtonItem: React.FC<{
   isPip: boolean
   onClick: React.HTMLAttributes<HTMLButtonElement>['onClick']
 }> = ({isPip, onClick}) => (
-  <ControllerTooltip content={isPip ? 'action-exit-pip' : 'action-enter-pip'}>
+  <ControllerTooltip localeKey={isPip ? 'action-exit-pip' : 'action-enter-pip'}>
     <ControllerButton
       icon={isPip ? icons.exitPip : icons.pip}
       onClick={onClick}

packages/griffith/src/components/items/PlayButtonItem.tsx

@@ -7,7 +7,7 @@ const PlayButtonItem: React.FC<{
   isPlaying: boolean
   onClick: React.HTMLAttributes<HTMLButtonElement>['onClick']
 }> = ({isPlaying, onClick}) => (
-  <ControllerTooltip content={isPlaying ? 'pause' : 'play'}>
+  <ControllerTooltip localeKey={isPlaying ? 'pause' : 'play'}>
     <ControllerButton
       icon={isPlaying ? icons.pause : icons.play}
       onClick={onClick}

packages/griffith/src/components/items/VolumeItem.tsx

@@ -4,6 +4,7 @@ import VolumeSlider, {VolumeSliderProps} from '../VolumeSlider'
 import * as icons from '../icons/controller'
 import styles from '../Controller.styles'
 import ControllerButton from './ControllerButton'
+import {useLocaleText} from '../../contexts/LocaleContext'
 
 type VolumeItemProps = Pick<
   React.HTMLProps<HTMLDivElement>,
@@ -31,6 +32,7 @@ const VolumeItem = ({
     onMouseLeave={onMouseLeave}
   >
     <ControllerButton
+      aria-label={useLocaleText(volume === 0 ? 'unmute' : 'mute')}
       icon={volume === 0 ? icons.muted : icons.volume}
       onClick={() => onToggleMuted?.()}
     />

packages/griffith/src/components/items/__tests__/ControllerTooltip.spec.tsx

@@ -5,7 +5,11 @@ import ControllerTooltip from '../ControllerTooltip'
 describe('Tooltip', () => {
   it('get Tooltip component', () => {
     expect(
-      Renderer.create(<ControllerTooltip content="quality-hd" />).toJSON()
+      Renderer.create(
+        <ControllerTooltip localeKey="quality-hd">
+          <button />
+        </ControllerTooltip>
+      ).toJSON()
     ).toMatchSnapshot()
   })
 })

packages/griffith/src/components/items/__tests__/__snapshots__/ControllerTooltip.spec.tsx.snap

@@ -6,6 +6,9 @@ exports[`Tooltip get Tooltip component 1`] = `
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
+  <button
+    aria-label="HD"
+  />
   <div
     className="menu_1a7s4a3-o_O-tooltipContent_me14v4"
   >

packages/griffith/src/components/items/__tests__/__snapshots__/FullScreenButtonItem.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`FullScreenButtonItem get FullScreenButtonItem component 1`] = `
 <div>
   <div class="menuContainer_e296pg">
-    <button class="button_1j0k413" type="button">
+    <button aria-label="Exit Fullscreen" class="button_1j0k413" type="button">
       <span class="root_s9vkyf"
         ><svg viewBox="0 0 24 24" class="svg_11u3rwe">
           <path

packages/griffith/src/components/items/__tests__/__snapshots__/PlayButtonItem.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`PlayButtonItem get PlayButtonItem component 1`] = `
 <div>
   <div class="menuContainer_e296pg">
-    <button class="button_1j0k413" type="button">
+    <button aria-label="Pause" class="button_1j0k413" type="button">
       <span class="root_s9vkyf"
         ><svg viewBox="0 0 24 24" class="svg_11u3rwe">
           <path

packages/griffith/src/components/items/__tests__/__snapshots__/VolumeItem.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`VolumeItem get VolumeItem component 1`] = `
 <div>
   <div class="menuContainer_e296pg">
-    <button class="button_1j0k413" type="button">
+    <button aria-label="Mute" class="button_1j0k413" type="button">
       <span class="root_s9vkyf"
         ><svg viewBox="0 0 24 24" class="svg_11u3rwe">
           <path

packages/griffith/src/constants/locales.ts

@@ -15,6 +15,8 @@ const en = {
   replay: 'Replay',
   play: 'Play',
   pause: 'Pause',
+  mute: 'Mute',
+  unmute: 'Unmute',
 }
 export type LocaleCode = 'en' | 'ja' | 'zh-Hans' | 'zh-Hant'
 export type LocaleConfig = {
@@ -47,6 +49,8 @@ const locales: LocaleConfigMap = {
     replay: 'もう一回見る',
     play: '再生',
     pause: '一時停止',
+    mute: 'ミュート（消音）',
+    unmute: 'ミュート解除',
   },
   // covers zh-Hans-CN and zh-Hans-SG
   'zh-Hans': {
@@ -65,6 +69,8 @@ const locales: LocaleConfigMap = {
     replay: '重新播放',
     play: '播放',
     pause: '暂停',
+    mute: '静音',
+    unmute: '取消静音',
   },
   // covers zh-Hant-HK and zh-Hant-TW
   'zh-Hant': {
@@ -83,6 +89,8 @@ const locales: LocaleConfigMap = {
     replay: '重新播放',
     play: '播放',
     pause: '暫停',
+    mute: '静音',
+    unmute: '解除静音',
   },
 }
 

packages/griffith/src/contexts/LocaleContext.ts

@@ -1,7 +1,24 @@
-import React from 'react'
+import React, {useContext} from 'react'
 import locales, {defaultLocale} from '../constants/locales'
+import type {LocaleConfig, LocaleConfigKey} from '../constants/locales'
 
 const LocaleContext = React.createContext(locales[defaultLocale])
 LocaleContext.displayName = 'LocaleContext'
 
+/** Get i18n locale text */
+export const useLocaleText = (
+  name: LocaleConfigKey,
+  style: 'narrow' | 'text' = 'text'
+): string => {
+  const locale = useContext(LocaleContext)
+  if (typeof locale[name] === 'object') {
+    const value = locale[name] as Exclude<
+      LocaleConfig[keyof LocaleConfig],
+      string
+    >
+    return value[style]
+  }
+  return locale[name] as string
+}
+
 export default LocaleContext