Refactor #3889 - For SpeedDial

primefaces · Apr 27, 2023 · 59c25cb · 59c25cb
1 parent 5acf877
commit 59c25cb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/components/lib/speeddial/SpeedDial.d.ts b/components/lib/speeddial/SpeedDial.d.ts
@@ -39,13 +39,13 @@ export interface SpeedDialPassThroughOptions {
      */
     icon?: SpeedDialPassThroughOptionType;
     /**
-     * Uses to pass attributes to the list's DOM element.
+     * Uses to pass attributes to the menu's DOM element.
      */
-    list?: SpeedDialPassThroughOptionType;
+    menu?: SpeedDialPassThroughOptionType;
     /**
-     * Uses to pass attributes to the item's DOM element.
+     * Uses to pass attributes to the menu item's DOM element.
      */
-    item?: SpeedDialPassThroughOptionType;
+    menuitem?: SpeedDialPassThroughOptionType;
     /**
      * Uses to pass attributes to the action's DOM element.
      */

diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
@@ -22,9 +22,18 @@
                 </template>
             </SDButton>
         </slot>
-        <ul :ref="listRef" :id="id + '_list'" class="p-speeddial-list" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1" v-bind="ptm('list')">
+        <ul :ref="listRef" :id="id + '_list'" class="p-speeddial-list" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1" v-bind="ptm('menu')">
             <template v-for="(item, index) of model" :key="index">
-                <li v-if="isItemVisible(item)" :id="`${id}_${index}`" :aria-controls="`${id}_item`" class="p-speeddial-item" :class="itemClass(`${id}_${index}`)" :style="getItemStyle(index)" role="menuitem" v-bind="ptm('item')">
+                <li
+                    v-if="isItemVisible(item)"
+                    :id="`${id}_${index}`"
+                    :aria-controls="`${id}_item`"
+                    class="p-speeddial-item"
+                    :class="itemClass(`${id}_${index}`)"
+                    :style="getItemStyle(index)"
+                    role="menuitem"
+                    v-bind="ptm('menuitem', { activeDescendant: focused ? focusedOptionId : undefined })"
+                >
                     <template v-if="!$slots.item">
                         <a
                             v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
@@ -36,7 +45,7 @@
                             :target="item.target"
                             @click="onItemClick($event, item)"
                             :aria-label="item.label"
-                            v-bind="ptm('action')"
+                            v-bind="ptm('action', { activeDescendant: focused ? focusedOptionId : undefined })"
                         >
                             <span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]" v-bind="ptm('actionIcon')"></span>
                         </a>