@hashicorp/design-system-components 0.11.1 → 0.11.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hashicorp/design-system-components
 
+## 0.11.2
+
+### Patch Changes
+
+- [#301](https://github.com/hashicorp/design-system/pull/301) [`4976379e`](https://github.com/hashicorp/design-system/commit/4976379e1b080c7753ceee2affe8cadc053296e5) Thanks [@alex-ju](https://github.com/alex-ju)! - Convey the disclosure state to assistive tech for dropdown and truncated breadcrumbs
+
 ## 0.11.1
 
 ### Patch Changes

package/addon/components/hds/breadcrumb/truncation.hbs

@@ -7,6 +7,7 @@
           {{if @hover 'is-hover'}}
           {{if @active 'is-active'}}
           {{if @focus 'is-focus'}}"
+        aria-expanded={{if t.isOpen "true" "false"}}
         {{on "click" t.onClickToggle}}
       >
         <FlightIcon @name="more-horizontal" @size="16" @isInlineBlock={{false}} />

package/addon/components/hds/disclosure/index.hbs

@@ -7,9 +7,9 @@
   {{on "keyup" this.onKeyUp}}
 >
   <div class="hds-disclosure__toggle" tabindex="-1">
-    {{yield (hash onClickToggle=this.onClickToggle isActive=this.isActive) to="toggle"}}
+    {{yield (hash onClickToggle=this.onClickToggle isOpen=this.isOpen) to="toggle"}}
   </div>
-  {{#if this.isActive}}
+  {{#if this.isOpen}}
     <div class="hds-disclosure__content" tabindex="-1">
       {{yield to="content"}}
     </div>

package/addon/components/hds/disclosure/index.js

@@ -3,7 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class HdsDisclosureComponent extends Component {
-  @tracked isActive; // notice: if in the future we need to add a "@isActive" prop to control the status from outside (eg to have the Disclosure opened on render) just add  "this.args.isActive" here to initalize the variable
+  @tracked isOpen; // notice: if in the future we need to add a "@isOpen" prop to control the status from outside (eg to have the Disclosure opened on render) just add  "this.args.isOpen" here to initalize the variable
   @tracked toggleRef;
   @tracked isToggleClicked;
 
@@ -18,7 +18,7 @@ export default class HdsDisclosureComponent extends Component {
     if (!this.toggleRef) {
       this.toggleRef = event.currentTarget;
     }
-    this.isActive = !this.isActive;
+    this.isOpen = !this.isOpen;
     // we explicitly apply a focus state to the toggle element to overcome a bug in WebKit (see b8abfcf)
     this.toggleRef.focus();
   }
@@ -43,8 +43,8 @@ export default class HdsDisclosureComponent extends Component {
 
   @action
   deactivate() {
-    if (this.isActive) {
-      this.isActive = false;
+    if (this.isOpen) {
+      this.isOpen = false;
     }
     // we call the "onClose" callback if it exists (and is a function)
     if (this.args.onClose && typeof this.args.onClose === 'function') {

package/addon/components/hds/dropdown/index.hbs

@@ -2,8 +2,8 @@
   <:toggle as |t|>
     {{yield
       (hash
-        ToggleButton=(component "hds/dropdown/toggle/button" isOpen=t.isActive onClick=t.onClickToggle)
-        ToggleIcon=(component "hds/dropdown/toggle/icon" isOpen=t.isActive onClick=t.onClickToggle)
+        ToggleButton=(component "hds/dropdown/toggle/button" isOpen=t.isOpen onClick=t.onClickToggle)
+        ToggleIcon=(component "hds/dropdown/toggle/icon" isOpen=t.isOpen onClick=t.onClickToggle)
       )
     }}
   </:toggle>

package/addon/components/hds/dropdown/toggle/button.hbs

@@ -19,5 +19,6 @@
   @iconPosition="trailing"
   @color={{this.color}}
   ...attributes
+  aria-expanded={{if @isOpen "true" "false"}}
   {{on "click" this.onClick}}
 />

package/addon/components/hds/dropdown/toggle/icon.hbs

@@ -1,4 +1,11 @@
-<button class={{this.classNames}} aria-label={{this.text}} ...attributes {{on "click" this.onClick}} type="button">
+<button
+  class={{this.classNames}}
+  aria-label={{this.text}}
+  ...attributes
+  aria-expanded={{if @isOpen "true" "false"}}
+  {{on "click" this.onClick}}
+  type="button"
+>
   <div class="hds-dropdown-toggle-icon__wrapper">
     {{#if @imageSrc}}
       <img src={{@imageSrc}} alt="" role="presentation" height="32" width="32" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",