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
`,