diff --git a/libs/components/src/disclosure/disclosure-trigger-for.directive.ts b/libs/components/src/disclosure/disclosure-trigger-for.directive.ts index 48a6e9623f8..05470281729 100644 --- a/libs/components/src/disclosure/disclosure-trigger-for.directive.ts +++ b/libs/components/src/disclosure/disclosure-trigger-for.directive.ts @@ -2,8 +2,6 @@ import { Directive, HostBinding, HostListener, Input } from "@angular/core"; import { DisclosureComponent } from "./disclosure.component"; -let nextId = 0; - @Directive({ selector: "[bitDisclosureTriggerFor]", exportAs: "disclosureTriggerFor", @@ -15,14 +13,12 @@ export class DisclosureTriggerForDirective { */ @Input("bitDisclosureTriggerFor") disclosure: DisclosureComponent; - @HostBinding("id") id = `bit-trigger-for-${nextId++}`; - @HostBinding("attr.aria-expanded") get ariaExpanded() { return this.disclosure.open; } @HostBinding("attr.aria-controls") get ariaControls() { - return this.id; + return this.disclosure.id; } @HostListener("click") click() { diff --git a/libs/components/src/disclosure/disclosure.mdx b/libs/components/src/disclosure/disclosure.mdx index 1bee14f648f..8df8e7025b8 100644 --- a/libs/components/src/disclosure/disclosure.mdx +++ b/libs/components/src/disclosure/disclosure.mdx @@ -11,34 +11,44 @@ import { DisclosureComponent, DisclosureTriggerForDirective } from "@bitwarden/c # Disclosure The `bit-disclosure` component is used in tandem with the `bitDisclosureTriggerFor` directive to -create a content area whose visibility is controlled by a trigger button. +create an accessible content area whose visibility is controlled by a trigger button. -## Using Icon Button as the Disclosure Trigger +To compose a disclosure and trigger: -The icon button can be used as the trigger for displaying the disclosure area. To do so: - -1. Create a `buttonType="muted"` icon button. (This is currently the only supported icon button type - for use as a disclosure trigger button) +1. Create a trigger component (see "Supported Trigger Components" section below) 2. Create a `bit-disclosure` 3. Set a template reference on the `bit-disclosure` -4. Use the `bitDisclosureTriggerFor` directive on the icon button, and pass it the `bit-disclosure` - template reference +4. Use the `bitDisclosureTriggerFor` directive on the trigger component, and pass it the + `bit-disclosure` template reference 5. Set the `open` property on the `bit-disclosure` to init the disclosure as either currently expanded or currently collapsed. The disclosure will default to `false`, meaning it defaults to being hidden. ``` - + click button to hide this content ``` +
+
+ +## Supported Trigger Components + +This is the list of currently supported trigger components: + +- Icon button `muted` variant + ## Accessibility -The disclosure and trigger directive functionality follow the Disclosure (Show/Hide) pattern for +The disclosure and trigger directive functionality follow the +[Disclosure (Show/Hide)](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) pattern for accessibility, automatically handling the `aria-controls` and `aria-expanded` properties. A `button` element must be used as the trigger for the disclosure. The `button` element must also have an accessible label/title -- please follow the accessibility guidelines for whatever trigger component diff --git a/libs/components/src/disclosure/disclosure.stories.ts b/libs/components/src/disclosure/disclosure.stories.ts index 1c6e6625636..974589a667c 100644 --- a/libs/components/src/disclosure/disclosure.stories.ts +++ b/libs/components/src/disclosure/disclosure.stories.ts @@ -22,7 +22,6 @@ export const DisclosureWithIconButton: Story = { props: args, template: /*html*/ ` click button to hide this content `,