Input: add password-icon-tabindex (#958)

* Added no-tab-stop property to password fields (affects visibility toggle)

* WIP

---------

Co-authored-by: AtmoFX <[email protected]>
Co-authored-by: Robson Tenório <[email protected]>

Author: 3 people

src/View/Components/Password.php

@@ -26,6 +26,7 @@ public function __construct(
         // Password
         public ?string $passwordIcon = 'o-eye-slash',
         public ?string $passwordVisibleIcon = 'o-eye',
+        public ?bool $passwordIconTabindex = false,
         public ?bool $right = false,
         public ?bool $onlyPassword = false,
 
@@ -127,7 +128,11 @@ public function render(): View|Closure|string
                                 @if($icon)
                                     <x-mary-icon :name="$icon" class="pointer-events-none w-4 h-4 opacity-40" />
                                 @elseif($placeToggleLeft())
-                                    <x-mary-button x-on:click="hidden = !hidden" class="btn-ghost btn-xs btn-circle -m-1">
+                                    <x-mary-button
+                                        x-on:click="hidden = !hidden"
+                                        class="btn-ghost btn-xs btn-circle -m-1"
+                                        :tabindex="$passwordIconTabindex ? null : -1"
+                                    >
                                         <x-mary-icon name="{{ $passwordIcon }}" x-show="hidden" class="w-4 h-4 opacity-40" />
                                         <x-mary-icon name="{{ $passwordVisibleIcon }}" x-show="!hidden" x-cloak class="w-4 h-4 opacity-40" />
                                     </x-mary-button>
@@ -155,7 +160,11 @@ public function render(): View|Closure|string
                                 @if($iconRight)
                                     <x-mary-icon :name="$iconRight" @class(["pointer-events-none w-4 h-4 opacity-40", "!end-10" => $clearable]) />
                                 @elseif($placeToggleRight())
-                                    <x-mary-button x-on:click="hidden = !hidden" @class(["btn-ghost btn-xs btn-circle -m-1", "!end-9" => $clearable])>
+                                    <x-mary-button
+                                        x-on:click="hidden = !hidden"
+                                        @class(["btn-ghost btn-xs btn-circle -m-1", "!end-9" => $clearable])
+                                        :tabindex="$passwordIconTabindex ? null : -1"
+                                    >
                                         <x-mary-icon name="{{ $passwordIcon }}" x-show="hidden" class="w-4 h-4 opacity-40" />
                                         <x-mary-icon name="{{ $passwordVisibleIcon }}" x-show="!hidden" x-cloak class="w-4 h-4 opacity-40" />
                                     </x-mary-button>