From cfe670a4b45d8b335bae38d01b174bca8591f111 Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Wed, 25 May 2022 23:27:20 -0700 Subject: [PATCH] update dialog trap focus to default to false (#6016) * change trapFocus on dialog to noFocusTrap to better support boolean attributes * Change files --- ...-f2ecedda-fb31-42c8-9919-9b0f157cce36.json | 7 ++++++ .../fast-foundation/docs/api-report.md | 4 +-- .../fast-foundation/src/dialog/README.md | 25 +++++++++---------- .../fast-foundation/src/dialog/dialog.spec.ts | 12 ++++----- .../fast-foundation/src/dialog/dialog.ts | 14 +++++------ 5 files changed, 33 insertions(+), 29 deletions(-) create mode 100644 change/@microsoft-fast-foundation-f2ecedda-fb31-42c8-9919-9b0f157cce36.json diff --git a/change/@microsoft-fast-foundation-f2ecedda-fb31-42c8-9919-9b0f157cce36.json b/change/@microsoft-fast-foundation-f2ecedda-fb31-42c8-9919-9b0f157cce36.json new file mode 100644 index 00000000000..618eaa5d52b --- /dev/null +++ b/change/@microsoft-fast-foundation-f2ecedda-fb31-42c8-9919-9b0f157cce36.json @@ -0,0 +1,7 @@ +{ + "type": "major", + "comment": "change trapFocus on dialog to noFocusTrap to better support boolean attributes", + "packageName": "@microsoft/fast-foundation", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md index a5afbcdb482..fda1989628f 100644 --- a/packages/web-components/fast-foundation/docs/api-report.md +++ b/packages/web-components/fast-foundation/docs/api-report.md @@ -1085,10 +1085,8 @@ export class Dialog extends FoundationElement { hidden: boolean; hide(): void; modal: boolean; + noFocusTrap: boolean; show(): void; - trapFocus: boolean; - // (undocumented) - protected trapFocusChanged: () => void; } // @public diff --git a/packages/web-components/fast-foundation/src/dialog/README.md b/packages/web-components/fast-foundation/src/dialog/README.md index d3706a3110b..ae76fe03478 100644 --- a/packages/web-components/fast-foundation/src/dialog/README.md +++ b/packages/web-components/fast-foundation/src/dialog/README.md @@ -63,18 +63,17 @@ export const myDialog = Dialog.compose({ #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------ | --------- | ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -| `modal` | public | `boolean` | `false` | Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal overlay. Clicks on the overlay will cause the dialog to emit a "dismiss" event. | | -| `hidden` | public | `boolean` | `false` | The hidden state of the element. | | -| `trapFocus` | public | `boolean` | `true` | Indicates that the dialog should trap focus. | | -| `trapFocusChanged` | protected | | | | | -| `ariaDescribedby` | public | `string` | | The id of the element describing the dialog. | | -| `ariaLabelledby` | public | `string` | | The id of the element labeling the dialog. | | -| `ariaLabel` | public | `string` | | The label surfaced to assistive technologies. | | -| `$presentation` | public | `ComponentPresentation or null` | | A property which resolves the ComponentPresentation instance for the current component. | FoundationElement | -| `template` | public | `ElementViewTemplate or void or null` | | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition. | FoundationElement | -| `styles` | public | `ElementStyles or void or null` | | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement | +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------------- | ------- | ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | +| `modal` | public | `boolean` | `false` | Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal overlay. Clicks on the overlay will cause the dialog to emit a "dismiss" event. | | +| `hidden` | public | `boolean` | `false` | The hidden state of the element. | | +| `noFocusTrap` | public | `boolean` | `false` | Indicates that the dialog should not trap focus. | | +| `ariaDescribedby` | public | `string` | | The id of the element describing the dialog. | | +| `ariaLabelledby` | public | `string` | | The id of the element labeling the dialog. | | +| `ariaLabel` | public | `string` | | The label surfaced to assistive technologies. | | +| `$presentation` | public | `ComponentPresentation or null` | | A property which resolves the ComponentPresentation instance for the current component. | FoundationElement | +| `template` | public | `ElementViewTemplate or void or null` | | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition. | FoundationElement | +| `styles` | public | `ElementStyles or void or null` | | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement | #### Methods @@ -98,7 +97,7 @@ export const myDialog = Dialog.compose({ | ------------------ | --------------- | -------------- | | | modal | | | | hidden | | -| `trap-focus` | trapFocus | | +| `no-focus-trap` | noFocusTrap | | | `aria-describedby` | ariaDescribedby | | | `aria-labelledby` | ariaLabelledby | | | `aria-label` | ariaLabel | | diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts b/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts index e736890eef7..837ee764d9e 100644 --- a/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts +++ b/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts @@ -128,27 +128,27 @@ describe("Dialog", () => { await disconnect(); }); - it("should add an attribute of `trap-focus` when trapFocus is true", async () => { + it("should add an attribute of `no-focus-trap` when noFocusTrap is true", async () => { const { element, connect, disconnect } = await setup(); - element.trapFocus = true; + element.noFocusTrap = true; await connect(); await Updates.next(); - expect(element.hasAttribute("trap-focus")).to.equal(true); + expect(element.hasAttribute("no-focus-trap")).to.equal(true); await disconnect(); }); - it("should add a default attribute of `trap-focus` when trapFocus not defined", async () => { + it("should NOT add a default attribute of `no-focus-trap` when noFocusTrap not defined", async () => { const { element, connect, disconnect } = await setup(); await connect(); await Updates.next(); - expect(element.trapFocus).to.equal(true); - expect(element.hasAttribute("trap-focus")).to.equal(true); + expect(element.noFocusTrap).to.equal(false); + expect(element.hasAttribute("no-focus-trap")).to.equal(false); await disconnect(); }); diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.ts b/packages/web-components/fast-foundation/src/dialog/dialog.ts index f8af810fe78..c45657fe2de 100644 --- a/packages/web-components/fast-foundation/src/dialog/dialog.ts +++ b/packages/web-components/fast-foundation/src/dialog/dialog.ts @@ -40,16 +40,16 @@ export class Dialog extends FoundationElement { public hidden: boolean = false; /** - * Indicates that the dialog should trap focus. + * Indicates that the dialog should not trap focus. * * @public * @defaultValue - true * @remarks - * HTML Attribute: trap-focus + * HTML Attribute: no-focus-trap */ - @attr({ attribute: "trap-focus", mode: "boolean" }) - public trapFocus: boolean = true; - protected trapFocusChanged = (): void => { + @attr({ attribute: "no-focus-trap", mode: "boolean" }) + public noFocusTrap: boolean = false; + private noFocusTrapChanged = (): void => { if ((this as FoundationElement).$fastController.isConnected) { this.updateTrapFocus(); } @@ -190,7 +190,7 @@ export class Dialog extends FoundationElement { }; private handleTabKeyDown = (e: KeyboardEvent): void => { - if (!this.trapFocus || this.hidden) { + if (this.noFocusTrap || this.hidden) { return; } @@ -250,7 +250,7 @@ export class Dialog extends FoundationElement { * we should we be active trapping focus */ private shouldTrapFocus = (): boolean => { - return this.trapFocus && !this.hidden; + return !this.noFocusTrap && !this.hidden; }; /**