Modal close button: how to make it focusable ?
I use a dropdown delete action in filament table that display a modal but I want the modal close button to be also focusable. The html rendered show that the modal close button has tabindex="-1" by default for all filament modals. How can I remove this to make it focusable?
<button style="--c-300:var(--gray-300);--c-400:var(--gray-400);--c-500:var(--gray-500);--c-600:var(--gray-600);" class="fi-icon-btn relative flex items-center justify-center rounded-lg outline-none transition duration-75 focus-visible:ring-2 -m-1.5 h-9 w-9 text-gray-400 hover:text-gray-500 focus-visible:ring-primary-600 dark:text-gray-500 dark:hover:text-gray-400 dark:focus-visible:ring-primary-500 fi-color-gray fi-modal-close-btn" title="Close" type="button" tabindex="-1" x-on:click="$dispatch('close-modal', { id: '4PMaZTATeo6qNR4Xzfu4-table-action' })">
<span class="sr-only">
Close
</span>
<svg class="fi-icon-btn-icon h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
</svg>
</button>0 Replies