LPD-34947 Prevent button focus on tab navigation, enable on arrow nav…

…igation
liferay · Sep 10, 2024 · 87ee657 · 87ee657
1 parent ce3b2a0
commit 87ee657
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/src/calendar/js/calendar-base.js b/src/calendar/js/calendar-base.js
@@ -1525,8 +1525,10 @@ Y.CalendarBase = Y.extend( CalendarBase, Y.Widget, {
         * @static
         */
     CALDAY_TEMPLATE: '<td class="{calendar_col_class} {calendar_day_class} {calendar_col_visibility_class}" id="{calendar_day_id}" ' +
-                        'role="gridcell" tabindex="-1">' +
-                        '{day_content}' +
+                        'role="gridcell">' +
+                            '<button tabindex="-1" type="button" style="all: unset">' +
+                                '{day_content}' +
+                            '</button>' +
                     '</td>',
 
      /**

diff --git a/src/calendar/js/calendar.js b/src/calendar/js/calendar.js
@@ -102,6 +102,22 @@ Y.Calendar = Y.extend(Calendar, Y.CalendarBase, {
         event.preventDefault();
     },
 
+    /**
+     * Prevent button focus on tab navigation, enable on arrow navigation
+     * @method _setTabIndex
+     * @param node {Node} The parent node
+     * @param tabIndexValue {Number} Corresponding to the value to be updated in the tabindex
+     * @protected
+     */
+    _setTabIndex : function (node, tabIndexValue) {
+        var buttonChild = node.one('button');
+        buttonChild.setAttribute('tabindex', tabIndexValue);
+
+        if(tabIndexValue === 0) {
+            buttonChild.focus();
+        }
+    },
+
     /**
      * Highlights a specific date node with keyboard highlight class
      * @method _highlightDateNode
@@ -111,7 +127,7 @@ Y.Calendar = Y.extend(Calendar, Y.CalendarBase, {
     _highlightDateNode : function (oDate) {
         this._unhighlightCurrentDateNode();
         var newNode = this._dateToNode(oDate);
-        newNode.focus();
+        this._setTabIndex(newNode, 0);
         newNode.addClass(CAL_DAY_HILITED);
     },
 
@@ -124,6 +140,10 @@ Y.Calendar = Y.extend(Calendar, Y.CalendarBase, {
         var allHilitedNodes = this.get("contentBox").all("." + CAL_DAY_HILITED);
         if (allHilitedNodes) {
             allHilitedNodes.removeClass(CAL_DAY_HILITED);
+
+            for (var i = 0; i < allHilitedNodes.length; i++) {
+                this._setTabIndex(allHilitedNodes[i], -1);
+            }
         }
     },