refactor(core): [CORE-23] complete keyboard controls and focus lifecycle

packages/artplayer/src/display/mini-view.ts

@@ -1,5 +1,8 @@
 import type ResourceScope from '../lifecycle/scope'
 import type { MiniHost } from './types'
+import { keyboardButton } from '../accessibility/button'
+import { claimKey, plainKey } from '../accessibility/keyboard'
+import { isClosing } from '../lifecycle/instance'
 import { listen } from '../lifecycle/resources'
 import { silencePromise } from '../utils/error'
 import { miniDrag } from './mini-drag'
@@ -8,6 +11,7 @@ export interface MiniView {
   element: HTMLElement
   cancelDrag: () => void
   fresh: boolean
+  focus?: () => void
 }
 
 export function createMiniView(art: MiniHost, parent: ResourceScope, active: () => boolean, hide: () => void): MiniView | undefined {
@@ -42,6 +46,24 @@ export function createMiniView(art: MiniHost, parent: ResourceScope, active: ()
       return
     state.append(play, pause)
     element.append(close, state)
+    keyboardButton(scope, close, () => close.click(), active)
+    keyboardButton(scope, state, () => (art.playing ? pause : play).click(), active)
+    const closeLabel = art.i18n.get('Close')
+    if (scope.closed || isClosing(art))
+      return
+    close.setAttribute('aria-label', closeLabel)
+    const groupLabel = art.i18n.get('Mini Player')
+    if (scope.closed || isClosing(art))
+      return
+    element.setAttribute('role', 'group')
+    element.setAttribute('aria-label', groupLabel)
+    listen(scope, element, 'keydown', (input) => {
+      const event = input as KeyboardEvent
+      if (active() && plainKey(event) && !event.defaultPrevented && event.key === 'Escape') {
+        claimKey(event)
+        hide()
+      }
+    })
     listen(scope, close, 'click', hide)
     listen(scope, play, 'click', () => {
       silencePromise(art.play())
@@ -52,6 +74,10 @@ export function createMiniView(art: MiniHost, parent: ResourceScope, active: ()
     const update = () => {
       if (scope.closed)
         return
+      const label = art.i18n.get(art.playing ? 'Pause' : 'Play')
+      if (scope.closed || isClosing(art))
+        return
+      state.setAttribute('aria-label', label)
       play.style.display = art.playing ? 'none' : 'flex'
       pause.style.display = art.playing ? 'flex' : 'none'
     }
@@ -68,7 +94,7 @@ export function createMiniView(art: MiniHost, parent: ResourceScope, active: ()
     art.template.$mini = element
     document.body.append(element)
     if (!scope.closed)
-      return { element, cancelDrag, fresh: true }
+      return { element, cancelDrag, fresh: true, focus: () => close.focus({ preventScroll: true }) }
   }
   catch (error) {
     scope.dispose()