Add ARIA roles to Tippy dropdowns for screen reader support

Author: SalmanDeveloperz

core/src/main/resources/lib/layout/breadcrumb.jelly

@@ -82,7 +82,7 @@ THE SOFTWARE.
             </j:otherwise>
           </j:choose>
           <j:if test="${attrs.hasMenu or attrs.hasChildrenMenu}">
-            <div aria-label="dropdown menu for ${attrs.title}" data-iscurrent="${isCurrent}" data-href="${attrs.href}" data-base="${baseUrl}" tabindex="0" class="dropdown-indicator" data-model="${attrs.hasMenu}" data-children="${attrs.hasChildrenMenu}" >
+            <div aria-label="dropdown menu for ${attrs.title}" aria-haspopup="menu" aria-expanded="false" data-iscurrent="${isCurrent}" data-href="${attrs.href}" data-base="${baseUrl}" tabindex="0" class="dropdown-indicator" data-model="${attrs.hasMenu}" data-children="${attrs.hasChildrenMenu}" >
               <l:icon class="icon-sm jenkins-!-text-color-secondary" src="symbol-chevron-down" />
             </div>
           </j:if>

src/main/js/components/dropdowns/templates.js

@@ -80,7 +80,7 @@ function menuItem(options) {
   const tag = itemOptions.type === "link" ? "a" : "button";
 
   const item = createElementFromHtml(`
-      <${tag} class="jenkins-dropdown__item ${itemOptions.clazz ? xmlEscape(itemOptions.clazz) : ""}"
+      <${tag} role="menuitem" class="jenkins-dropdown__item ${itemOptions.clazz ? xmlEscape(itemOptions.clazz) : ""}"
         ${itemOptions.url ? `href="${xmlEscape(itemOptions.url)}"` : ""} ${itemOptions.id ? `id="${xmlEscape(itemOptions.id)}"` : ""}
         ${itemOptions.tooltip ? `data-html-tooltip="${xmlEscape(itemOptions.tooltip)}"` : ""}>
           ${

src/main/js/components/dropdowns/utils.js

@@ -81,6 +81,12 @@ function generateDropdown(element, callback, immediate, options = {}) {
 function generateDropdownItems(items, compact) {
   const menuItems = document.createElement("div");
   menuItems.classList.add("jenkins-dropdown");
+  menuItems.setAttribute("role", "menu");
+  const menuLabel = items.length > 0 && items[0].label 
+    ? `${items[0].label} menu` 
+    : "dropdown menu";
+  menuItems.setAttribute("aria-label", menuLabel);
+  
   if (compact === true) {
     menuItems.classList.add("jenkins-dropdown--compact");
   }