fix(popup-menu): use semantic button for actionable header entries

bpmn-io · Mar 22, 2024 · 6071afd · 6071afd
1 parent af49450
commit 6071afd
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/lib/features/popup-menu/PopupMenuComponent.js b/lib/features/popup-menu/PopupMenuComponent.js
@@ -183,23 +183,23 @@ export default function PopupMenuComponent(props) {
         <div class="djs-popup-header">
           <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
           ${ headerEntries.map(entry => html`
-            <span
+            <${ entry.action ? 'button' : 'span' }
               class=${ getHeaderClasses(entry, entry === selectedEntry) }
               onClick=${ event => onSelect(event, entry) }
               title=${ entry.title || entry.label }
               data-id=${ entry.id }
               onMouseEnter=${ () => setSelectedEntry(entry) }
               onMouseLeave=${ () => setSelectedEntry(null) }
-              aria-role="button"
-              tabIndex="0"
+              onFocus=${ () => setSelectedEntry(entry) }
+              onBlur=${ () => setSelectedEntry(null) }
             >
             ${(entry.imageUrl && html`<img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />`) ||
             (entry.imageHtml && html`<div class="djs-popup-entry-icon" dangerouslySetInnerHTML=${ { __html: entry.imageHtml } } />`)}
 
               ${ entry.label ? html`
                 <span class="djs-popup-label">${ entry.label }</span>
               ` : null }
-            </span>
+            </${ entry.action ? 'button' : 'span' }>
           `) }
         </div>
       ` }