Tailwind z-index utilites don't work well with SkipLinks z-index
david-abell opened this issue · comments
The SkipLinks z-index: 10; does not work well with Tailwind z-index utilities. Tailwind increments at z-0, z-10, z-20, z-30, z-40, z-50 so using those utility helpers will cause elements to overlap the SkipLinks.
It seems to be more of a design consideration fix than anything. I had initially thought 49 might be a good value but I'm leaning towards setting a large value in such as 9999 on the component so that none of the tailwind utilities would break functionality.
Are their considerations I've missed or should 9999 be sufficient? I can't think of a use case where the the skipLink should not be on the top layer but tailwind arbitrary value syntax z-[some_large_number] can always be used if it is really needed...
Great catch @david-abell, never thought of it 🤔 You're absolutely right, the skip links should always be on top of the UI, the only exception I can think of is a modal but then again, your focus is trapped when a modal is open, so that should not be a problem. Setting z-index: 9999 would be sufficient 🙂 I'm upgrading the Accessible Starter to Astro 4.0, I'll take this one with me when updating the new release!
Thanks David!