Button: pass focus() to the inner button
Without this it's not possible to focus the button
programmatically.
Bug: none
Change-Id: Ib23bc03ec323da4d3a7ffa8d3371dcd3d3259ef7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3192855
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
diff --git a/front_end/ui/components/buttons/Button.ts b/front_end/ui/components/buttons/Button.ts
index 5214936..1bf7388 100644
--- a/front_end/ui/components/buttons/Button.ts
+++ b/front_end/ui/components/buttons/Button.ts
@@ -30,7 +30,7 @@
export class Button extends HTMLElement {
static readonly litTagName = LitHtml.literal`devtools-button`;
- private readonly shadow = this.attachShadow({mode: 'open'});
+ private readonly shadow = this.attachShadow({mode: 'open', delegatesFocus: true});
private readonly boundRender = this.render.bind(this);
private readonly props: ButtonData = {};
@@ -59,6 +59,10 @@
ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
}
+ focus(): void {
+ this.shadow.querySelector('button')?.focus();
+ }
+
connectedCallback(): void {
this.shadow.adoptedStyleSheets = [buttonStyles];
ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
diff --git a/front_end/ui/components/docs/button/basic.ts b/front_end/ui/components/docs/button/basic.ts
index 708018a..df01b36 100644
--- a/front_end/ui/components/docs/button/basic.ts
+++ b/front_end/ui/components/docs/button/basic.ts
@@ -46,8 +46,10 @@
// Secondary Icon
const secondaryIconButton = new Buttons.Button.Button();
-secondaryIconButton.innerText = 'Click me';
-secondaryIconButton.onclick = () => alert('clicked');
+secondaryIconButton.innerText = 'Focus the first button';
+secondaryIconButton.onclick = () => {
+ primaryButton.focus();
+};
secondaryIconButton.data = {
variant: Buttons.Button.Variant.SECONDARY,
iconUrl: testIcon,
