fix(components): update dropdown to require id

Police-Data-Accessibility-Project · Jun 10, 2024 · 14410e5 · 14410e5
1 parent ba9f960
commit 14410e5
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/src/components/Dropdown/PdapDropdown.spec.ts b/src/components/Dropdown/PdapDropdown.spec.ts
@@ -10,6 +10,9 @@ let content;
 describe('PdapDropdown', () => {
  beforeEach(() => {
  wrapper = shallowMount(PdapDropdown, {
+ props: {
+ dropdownId: 'test-dropdown',
+ },
  slots: {
  trigger: 'Toggle Dropdown',
  content: '<ul><li>Option 1</li><li>Option 2</li><li>Option 3</li></ul>',
@@ -48,6 +51,7 @@ describe('PdapDropdown', () => {
  wrapper = shallowMount(PdapDropdown, {
  props: {
  disabled: true,
+ dropdownId: 'test-dropdown',
  },
  slots: {
  trigger: 'Toggle Dropdown',
@@ -67,6 +71,7 @@ describe('PdapDropdown', () => {
  it('should respect the triggerOn prop', async () => {
  wrapper = shallowMount(PdapDropdown, {
  props: {
+ dropdownId: 'test-dropdown',
  triggerOn: PdapDropdownTriggerType.HOVER,
  },
  slots: {

diff --git a/src/components/Dropdown/PdapDropdown.vue b/src/components/Dropdown/PdapDropdown.vue
@@ -57,7 +57,6 @@ const props = withDefaults(defineProps<PdapDropdownProps>(), {
 const emit = defineEmits(['update:open', 'press']);
 
 // Vars
-const dropdownId = 'pdap-dropdown';
 const contentRef = ref<HTMLElement | null>(null);
 const dropdownRef = ref<HTMLElement | null>(null);
 const open = ref<boolean>(props.defaultOpen);

diff --git a/src/components/Dropdown/__snapshots__/PdapDropdown.spec.ts.snap b/src/components/Dropdown/__snapshots__/PdapDropdown.spec.ts.snap
@@ -2,9 +2,9 @@
 
 exports[`PdapDropdown > should be accessible with keyboard 1`] = `
 <div class="pdap-dropdown">
- <pdap-button-stub aria-controls="pdap-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger" disabled="false" intent="tertiary" isloading="false"></pdap-button-stub>
+ <pdap-button-stub aria-controls="test-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger" disabled="false" intent="tertiary" isloading="false"></pdap-button-stub>
  <transition-stub appear="true" css="true" name="dropdown" persisted="true">
- <div aria-hidden="true" class="pdap-dropdown-content" id="pdap-dropdown" role="menu" style="display: none;">
+ <div aria-hidden="true" class="pdap-dropdown-content" id="test-dropdown" role="menu" style="display: none;">
  <ul>
  <li>Option 1</li>
  <li>Option 2</li>
@@ -17,9 +17,9 @@ exports[`PdapDropdown > should be accessible with keyboard 1`] = `
 
 exports[`PdapDropdown > should open and close dropdown correctly 1`] = `
 <div class="pdap-dropdown">
- <pdap-button-stub aria-controls="pdap-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger" disabled="false" intent="tertiary" isloading="false"></pdap-button-stub>
+ <pdap-button-stub aria-controls="test-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger" disabled="false" intent="tertiary" isloading="false"></pdap-button-stub>
  <transition-stub appear="true" css="true" name="dropdown" persisted="true">
- <div aria-hidden="true" class="pdap-dropdown-content" id="pdap-dropdown" role="menu" style="display: none;">
+ <div aria-hidden="true" class="pdap-dropdown-content" id="test-dropdown" role="menu" style="display: none;">
  <ul>
  <li>Option 1</li>
  <li>Option 2</li>
@@ -32,9 +32,9 @@ exports[`PdapDropdown > should open and close dropdown correctly 1`] = `
 
 exports[`PdapDropdown > should respect disabled prop 1`] = `
 <div class="pdap-dropdown">
- <pdap-button-stub aria-controls="pdap-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger pointer-events-none cursor-not-allowed" disabled="true" intent="tertiary" isloading="false"></pdap-button-stub>
+ <pdap-button-stub aria-controls="test-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger pointer-events-none cursor-not-allowed" disabled="true" intent="tertiary" isloading="false"></pdap-button-stub>
  <transition-stub appear="true" css="true" name="dropdown" persisted="true">
- <div aria-hidden="true" class="pdap-dropdown-content" id="pdap-dropdown" role="menu" style="display: none;">
+ <div aria-hidden="true" class="pdap-dropdown-content" id="test-dropdown" role="menu" style="display: none;">
  <ul>
  <li>Option 1</li>
  <li>Option 2</li>
@@ -47,9 +47,9 @@ exports[`PdapDropdown > should respect disabled prop 1`] = `
 
 exports[`PdapDropdown > should respect the triggerOn prop 1`] = `
 <div class="pdap-dropdown">
- <pdap-button-stub aria-controls="pdap-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger" disabled="false" intent="tertiary" isloading="false"></pdap-button-stub>
+ <pdap-button-stub aria-controls="test-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger" disabled="false" intent="tertiary" isloading="false"></pdap-button-stub>
  <transition-stub appear="true" css="true" name="dropdown" persisted="true">
- <div aria-hidden="true" class="pdap-dropdown-content" id="pdap-dropdown" role="menu" style="display: none;">
+ <div aria-hidden="true" class="pdap-dropdown-content" id="test-dropdown" role="menu" style="display: none;">
  <ul>
  <li>Option 1</li>
  <li>Option 2</li>

diff --git a/src/components/Dropdown/types.ts b/src/components/Dropdown/types.ts
@@ -6,5 +6,6 @@ export enum PdapDropdownTriggerType {
 export interface PdapDropdownProps {
  defaultOpen?: boolean;
  disabled?: boolean;
+ dropdownId: string;
  triggerOn?: PdapDropdownTriggerType;
 }
diff --git a/src/demo/pages/ComponentDemo.vue b/src/demo/pages/ComponentDemo.vue
@@ -112,6 +112,7 @@
  <h2>Dropdown: click or press to open</h2>
  <!-- Dropdown emits an update:open event we can use to apply state-based classes to slot elements... -->
  <Dropdown
+ dropdown-id="demo-press"
  @update:open="(isOpen: boolean) => (dropDownPressIsOpen = isOpen)"
  >
  <template #trigger>
@@ -155,6 +156,7 @@
  </h2>
  <!-- Dropdown emits an update:open event we can use to apply state-based classes to slot elements... -->
  <Dropdown
+ dropdown-id="demo-hover"
  :trigger-on="PdapDropdownTriggerType.HOVER"
  @update:open="(isOpen: boolean) => (dropDownHoverIsOpen = isOpen)"
  @press="() => buttonAlert('Hello from top-level button')"