An accessibility analysis tool gives me this error:
Fix the following:
Using a negative tabindex on an element inside an interactive control does not prevent assistive technologies from focusing the element (even with 'aria-hidden=true')
about this piece of code:
<div class="container-tab-section ....">
<button class="tab-section px-4 lg:px-sp-40 flex items-center w-1/2 bg-general-divider">
<div class="input-radio-container flex relative d-flex w-full h-full items-center">
<input type="radio" id="ab123cd" name="groupTest" aria-describedby="null"
class="input-radio input-radio-standard"
value="TestValue" aria-hidden="true" aria-label="test" tabindex="-1"><!--v-if-->
</div>
</button>
</div>
I need some help solving this problem. I already tried to remove tabindex but it creates another error, I tried to remove aria-hidden="true" but it doesn't work.
Do you have any advice?
Related
I have a checkbox in my Next.js project and after adding some Tailwind utility classes nothing takes effect except changes to width, height and cursor. Color, bg, border, etc. don't work.
<div className="flex py-4 m-auto w-2/3 justify-between items-start">
<div className="w-1/7">
<div className="border-b pb-4">
<h1 className="mb-2 font-medium">Filter 1</h1>
<label htmlFor="c1">
<div className="flex group active:ring-2 ring-black rounded">
<input
id="c1"
type="checkbox"
className="rounded-full h-8 w-8 cursor-pointer bg-red-100 border-red-300 text-red-600 focus:ring-red-200"
/>
<p className="pl-2 text-reg cursor-pointer group-hover:underline decoration-solid">
Subfilter 1
</p>
</div>
</label>
</div>
</div>
</div>
cursor-pointer, h-8 and w-8 are the only utility classes that are working in the checkbox. color still defaults to blue, there's no ring appearing on focus, and bg still white.
Others elements in the example code like p, div and h1 are working perfectly.
Add tailwindcss/forms to your config file:
module.exports = {
theme: {
extend: {
// ...
},
},
plugins: [require("#tailwindcss/forms")],
};
You can read more about it in the docs and the GitHub repository.
Here is a working example in Tailwind Play.
The key here is appearance CSS property - set it to none to kinda reset default browser styling
The appearance CSS property is used to control native appearance of UI controls, that are based on operating system's theme
In Tailwind it is appearance-none utility
Use appearance-none to reset any browser specific styling on an element.
<input
type="checkbox"
class="appearance-none ..."
/>
DEMO
I'm trying to make a website using svelte and tailwind. I made a little popup that pops up when you hover over the home icon. But when I later added a div it pops up under the div and does not show fully. How do I fix this?
Code:
Div that popup goes under: (is in seprate svelte component and is imported in index.svelte.)
<div class="fixed ml-15 mb-auto w-screen h-10 bg-gray-700">
<h1 class="text-center text-white font-extrabold text-lg">Welcome.</h1>
</div>
Div for the one of the popups and icons: (this one is also in another separate svelte component and is imported in index.svelte.)
<div class="sidebar-icon group">
<a href="https://github.com/ratinchat" target="_blank">
<DiGithubBadge />
</a>
<span class="sidebar-tooltip group-hover:scale-100">Github</span>
</div>
Css for popup:
.sidebar-tooltip {
#apply absolute w-auto p-2 m-2 min-w-max left-14 rounded-md shadow-md
text-white bg-gray-900
text-xs font-bold
transition-all duration-100 scale-0 origin-left;
}
Helpfull images:
No popups
With popups
The home button popup is hidden under the topbar div.
How can I make it so that the popup (also named tooltip.) pops above the div instead of below. (specifically the home but what if I wanted to make more divs under?) Any help would be greatly appreciated.
Add the TailwindCSS class z-10 or higher to .sidebar-tooltip.
Without setting a z-index your elements will be rendered on the same plane as each other, causing overlaps to occur.
According to tailwind css official documentation, I can use outline-4 class to set outline width as 4px but when I am trying to write this on my HTML code, no changes in width of the outline is seen. Here is the code:
<input class="border-2 border-rose-600 block rounded-lg outline-rose-600 outline-4">
This code only changes the color of the outline but no change in the width of the outline. Pls, help to fix this issue.
One of thing is that you can use border-4 only to thicken the border instead of outline. Another thing is that you can use ring class also.
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col space-y-8 p-10">
<input class="block rounded-lg border-4 border-rose-600" />
<input class="block rounded-lg ring-4 ring-green-600" />
</div>
I have been trying to shrink my flex box, but I haven't had much luck getting this to work.
Here is the code sample:
<div className="flex justify-center bg-white rounded w-23 mx-auto">
<p>Contact Number</p>
<button className="px-4 py-3"><DropIcon /></button>
</div>
This is the current state of the element
This question already has an answer here:
Apply blur effect to parent container only
(1 answer)
Closed 11 months ago.
When the focus is in the text-area (Form) I want the body EXCEPT THAT FORM to blur.
React & Tailwind code:
<div className="sub-main-container">
<another component/>
<another component/>
<another component/>
<article id="form-message" className="contact-form container mx-auto text-white flex flex-col justify-center items-center m-4">
<h3 className="font-bold text-3xl">Thanks for your visit!</h3>
<form className="bg-white mx-6 w-full flex flex-col mt-2">
<textarea
id="textarea-form-message"
className="p-2 text-black"
placeholder="Let me your message! 💬"
/>
<button className="font-bold text-white bg-[#63b8ea] px-5 rounded-b-sm">
Send me the messagge!
</button>
</form>
</article>
<div>
Css code:
.sub-main-container:focus-within:not(#form-message) {
filter: blur(0.5rem);
}
I'm using the pseudo-class :focus-within to blur the container and pseudo-class :not() to avoid that form but all the page is going blur.
Any idea what is happening?
Sadly, not in the simple way you're hoping.
A blur filter applies to descendants and cannot be reversed for the form itself.
One option might be to use a backdrop-filter, though it isn't supported in every browser.