Merge pull request #5990 from liferay/LPD-52380

fix(@clayui/focus-trap): LPD-52380 Change tabindlex from not focusable elements on date picker

Author: Ilza Medeiros

packages/clay-core/src/focus-trap/FocusTrap.tsx

@@ -73,7 +73,7 @@ export function FocusTrap({active = false, children, focusElementRef}: Props) {
 					<span
 						aria-hidden="true"
 						data-focus-scope-start="true"
-						tabIndex={0}
+						tabIndex={-1}
 					/>
 				) : null}
 
@@ -83,7 +83,7 @@ export function FocusTrap({active = false, children, focusElementRef}: Props) {
 					<span
 						aria-hidden="true"
 						data-focus-scope-end="true"
-						tabIndex={0}
+						tabIndex={-1}
 					/>
 				) : null}
 			</div>

packages/clay-core/src/focus-trap/__tests__/__snapshots__/BasicRendering.tsx.snap

@@ -9,7 +9,7 @@ exports[`FocusTrap basic rendering render static content when focus trap is acti
       <span
         aria-hidden="true"
         data-focus-scope-start="true"
-        tabindex="0"
+        tabindex="-1"
       />
       <button
         class="btn btn-primary"
@@ -20,7 +20,7 @@ exports[`FocusTrap basic rendering render static content when focus trap is acti
       <span
         aria-hidden="true"
         data-focus-scope-end="true"
-        tabindex="0"
+        tabindex="-1"
       />
     </div>
   </div>

packages/clay-core/src/tree-view/DragAndDrop.tsx

@@ -487,13 +487,13 @@ export function DragAndDropProvider<T>({
 					<span
 						aria-hidden="true"
 						data-focus-scope-start="true"
-						tabIndex={0}
+						tabIndex={-1}
 					/>
 					{children}
 					<span
 						aria-hidden="true"
 						data-focus-scope-end="true"
-						tabIndex={0}
+						tabIndex={-1}
 					/>
 				</>
 			) : (

packages/clay-date-picker/src/__tests__/__snapshots__/BasicRendering.tsx.snap

@@ -2602,6 +2602,7 @@ exports[`BasicRendering renders date picker with time 1`] = `
                           <button
                             aria-label="Delete the entered time"
                             class="clay-time-clear-btn btn btn-unstyled"
+                            tabindex="-1"
                             type="button"
                           >
                             <svg

packages/clay-date-picker/src/__tests__/__snapshots__/Internationalization.tsx.snap

@@ -7011,6 +7011,7 @@ exports[`Internationalization renders the date picker in russian 1`] = `
                           <button
                             aria-label="Delete the entered time"
                             class="clay-time-clear-btn btn btn-unstyled"
+                            tabindex="-1"
                             type="button"
                           >
                             <svg

packages/clay-time-picker/src/__tests__/__snapshots__/index.tsx.snap

@@ -539,6 +539,7 @@ const TimePicker = ({
 													  }
 											)
 										}
+										tabIndex={visibleActionReset ? 0 : -1}
 									>
 										<ClayIcon
 											spritemap={spritemap}