Bridgeman-Accessible/ba-web-components
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Continuing to work on dropdown
All checks were successful
Build, Test, and Publish (to Private NPM Registry) UI Components Library / publish (push) Successful in 1m0s
Details

Browse source
This commit is contained in:
Alan Bridgeman 2026-07-08 21:04:07 -05:00
parent cdeb8071ef
commit 0290bc6dd5
2 changed files with 5 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/dropdown/dropdown.ejs
View file

@ -55,7 +55,7 @@
<% } %> <% } %>
<!-- END: Scripts --> <!-- END: Scripts -->
<div role="button" class="dropdown-trigger<%= typeof triggerStyleClasses !== 'undefined' ? ' ' + triggerStyleClasses.join(' ') : '' %>" tabindex="0" aria-expanded="false" aria-controls="<%= typeof menuId !== 'undefined' ? menuId : 'dropdown-menu' %>" aria-haspopup="true" popovertarget="<%= typeof menuId !== 'undefined' ? menuId : 'dropdown-menu' %>"> <button role="button" class="dropdown-trigger<%= typeof triggerStyleClasses !== 'undefined' ? ' ' + triggerStyleClasses.join(' ') : '' %>" tabindex="0" aria-expanded="false" aria-controls="<%= typeof menuId !== 'undefined' ? menuId : 'dropdown-menu' %>" aria-haspopup="true" popovertarget="<%= typeof menuId !== 'undefined' ? menuId : 'dropdown-menu' %>">
<slot name="dropdown-trigger"></slot> <slot name="dropdown-trigger"></slot>
<% <%
@ -75,7 +75,7 @@
<%# <i class="fas fa-chevron-down" aria-hidden="true"></i> %> <%# <i class="fas fa-chevron-down" aria-hidden="true"></i> %>
<%- chevronSvg %> <%- chevronSvg %>
<% } %> <% } %>
</div> </button>
<div id="<%= typeof menuId !== 'undefined' ? menuId : 'dropdown-menu' %>" class="dropdown-menu<%= typeof menuStyleClasses !== 'undefined' ? ' ' + menuStyleClasses.join(' ') : '' %>"<%# hidden%> popover> <div id="<%= typeof menuId !== 'undefined' ? menuId : 'dropdown-menu' %>" class="dropdown-menu<%= typeof menuStyleClasses !== 'undefined' ? ' ' + menuStyleClasses.join(' ') : '' %>"<%# hidden%> popover>
<slot name="dropdown-menu"></slot> <slot name="dropdown-menu"></slot>
</div> </div>

4
src/components/dropdown/dropdown.mjs
View file

@ -41,6 +41,8 @@ export class Dropdown extends ComposableElement {
event.preventDefault(); event.preventDefault();
console.log(`Dropdown keydown: ${event.key}`);
const focusableItems = Array.from(this.querySelectorAll('li')); const focusableItems = Array.from(this.querySelectorAll('li'));
if (focusableItems.length === 0) { if (focusableItems.length === 0) {
@ -146,7 +148,7 @@ export class Dropdown extends ComposableElement {
shadow.appendChild(cssAnchorPolyfill); shadow.appendChild(cssAnchorPolyfill);
// Create the trigger div for the dropdown component // Create the trigger div for the dropdown component
const dropdownTriggerDiv = document.createElement('div'); const dropdownTriggerDiv = document.createElement('button');
dropdownTriggerDiv.role = 'button'; dropdownTriggerDiv.role = 'button';
dropdownTriggerDiv.tabIndex = 0; dropdownTriggerDiv.tabIndex = 0;
dropdownTriggerDiv.setAttribute('aria-expanded', 'false'); dropdownTriggerDiv.setAttribute('aria-expanded', 'false');