HDS-5265: Adds a11y guardrails in Dropdown ToggleIcon component

.changeset/deep-wings-arrive.md

@@ -0,0 +1,9 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/dropdown -->
+
+`Dropdown` - Added assertion to the `ToggleIcon` to provide improved developer guidance for the `hasChevron` attribute
+
+<!-- END -->

packages/components/src/components/hds/dropdown/toggle/icon.ts

@@ -7,7 +7,10 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { tracked } from '@glimmer/tracking';
-import { HdsDropdownToggleIconSizeValues } from './types.ts';
+import {
+  HdsDropdownToggleIconSizeValues,
+  HdsDropdownToggleIconAllowedIconValues,
+} from './types.ts';
 
 import type { HdsIconSignature } from '../../icon';
 import type { HdsDropdownToggleIconSizes } from './types';
@@ -18,6 +21,10 @@ import type Owner from '@ember/owner';
 export const DEFAULT_SIZE = HdsDropdownToggleIconSizeValues.Medium;
 export const SIZES: string[] = Object.values(HdsDropdownToggleIconSizeValues);
 
+export const ALLOWED_ICON_LIST: string[] = Object.values(
+  HdsDropdownToggleIconAllowedIconValues
+);
+
 export interface HdsDropdownToggleIconSignature {
   Args: {
     hasChevron?: boolean;
@@ -105,13 +112,25 @@ export default class HdsDropdownToggleIcon extends Component<HdsDropdownToggleIc
   }
 
   /**
-   * Indicates if a dropdown chevron icon should be displayed; should be displayed unless the "more-horizontal" icon is used.
+   * Indicates if a dropdown chevron icon should be displayed; should be displayed unless the "more-horizontal" or "more-vertical" icons are used.
    *
    * @param hasChevron
    * @type {boolean}
    * @default true
    */
   get hasChevron(): boolean {
+    if (
+      this.args.icon &&
+      !ALLOWED_ICON_LIST.includes(this.args.icon) &&
+      this.args.hasChevron === false
+    ) {
+      assert(
+        `@hasChevron for "Hds::Dropdown::Toggle::Icon" must be true unless the icon is one of the following: ${ALLOWED_ICON_LIST.join(
+          ', '
+        )}; received: ${this.args.icon}`
+      );
+    }
+
     return this.args.hasChevron ?? true;
   }
 

packages/components/src/components/hds/dropdown/toggle/types.ts

@@ -22,3 +22,10 @@ export enum HdsDropdownToggleButtonColorValues {
 }
 export type HdsDropdownToggleButtonColors =
   `${HdsDropdownToggleButtonColorValues}`;
+
+export enum HdsDropdownToggleIconAllowedIconValues {
+  MoreHorizontal = 'more-horizontal',
+  MoreVertical = 'more-vertical',
+}
+export type HdsDropdownToggleIconAllowedIcons =
+  `${HdsDropdownToggleIconAllowedIconValues}`;

showcase/tests/integration/components/hds/dropdown/toggle/icon-test.js

@@ -69,7 +69,7 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
   });
   test('toggle-icon renders no chevron when hasChevron is set to false', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown::Toggle::Icon @icon="user" @text="user menu" id="test-toggle-icon" @hasChevron={{false}} />`,
+      hbs`<Hds::Dropdown::Toggle::Icon @icon="more-horizontal" @text="user menu" id="test-toggle-icon" @hasChevron={{false}} />`,
     );
     assert.dom('.hds-icon.hds-icon-chevron-down').doesNotExist();
   });
@@ -155,4 +155,18 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
       throw new Error(errorMessage);
     });
   });
+  test('it should throw an assertion if an incorrect value for @icon is provided while @hasChevron is false', async function (assert) {
+    const errorMessage =
+      '@hasChevron for "Hds::Dropdown::Toggle::Icon" must be true unless the icon is one of the following: more-horizontal, more-vertical; received: apple';
+    assert.expect(2);
+    setupOnerror(function (error) {
+      assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
+    });
+    await render(
+      hbs`<Hds::Dropdown::Toggle::Icon @icon="apple" @text="user menu" @hasChevron={{false}}/>`,
+    );
+    assert.throws(function () {
+      throw new Error(errorMessage);
+    });
+  });
 });