fix(player): add focus styles to live button default theme

mihar-22 · mihar-22 · commit 6261f1809d02 · 2023-11-14T19:56:25.000+11:00
diff --git a/packages/vidstack/package.json b/packages/vidstack/package.json
@@ -31,7 +31,7 @@
     "types": "pnpm build:types && rollup -c --config-types",
     "clean": "rimraf dist cdn",
     "format": "prettier src --write --loglevel warn",
-    "sandbox": "node ../../.scripts/sandbox.js",
+    "sandbox": "node ../../.scripts/sandbox.js & node rollup.config.js -w",
     "sandbox:build": "vite build sandbox",
     "test": "vitest --run",
     "test:watch": "vitest --watch",
diff --git a/packages/vidstack/player/styles/default/buttons.css b/packages/vidstack/player/styles/default/buttons.css
@@ -119,6 +119,10 @@
   transition: color 0.3s ease;
 }
 
+:where(.vds-live-button[data-focus] .vds-live-button-text) {
+  box-shadow: var(--media-focus-ring);
+}
+
 :where(.vds-live-button[data-edge]) {
   cursor: unset;
 }
diff --git a/packages/vidstack/src/components/ui/buttons/live-button.ts b/packages/vidstack/src/components/ui/buttons/live-button.ts
@@ -46,7 +46,7 @@ export class LiveButton extends Component<LiveButtonProps> {
     this.setAttributes({
       'data-edge': liveEdge,
       'data-hidden': isHidden,
-      'aria-disabled': $ariaBool(disabled),
+      'aria-disabled': $ariaBool(() => disabled() || liveEdge()),
       'aria-hidden': $ariaBool(isHidden),
     });
   }

Original file line number	Diff line number	Diff line change
`@@ -119,6 +119,10 @@`
`119`	`119`	`transition: color 0.3s ease;`
`120`	`120`	`}`
`121`	`121`
	`122`	`+:where(.vds-live-button[data-focus] .vds-live-button-text) {`
	`123`	`+ box-shadow: var(--media-focus-ring);`
	`124`	`+}`
	`125`	`+`
`122`	`126`	`:where(.vds-live-button[data-edge]) {`
`123`	`127`	`cursor: unset;`
`124`	`128`	`}`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ export class LiveButton extends Component<LiveButtonProps> {`
`46`	`46`	`this.setAttributes({`
`47`	`47`	`'data-edge': liveEdge,`
`48`	`48`	`'data-hidden': isHidden,`
`49`		`- 'aria-disabled': $ariaBool(disabled),`
	`49`	`+ 'aria-disabled': $ariaBool(() => disabled() \|\| liveEdge()),`
`50`	`50`	`'aria-hidden': $ariaBool(isHidden),`
`51`	`51`	`});`
`52`	`52`	`}`