I have some buttons inside a <div> with display: none. These buttons only get the text values filled in at runtime if the div becomes visible. The checker is flagging these as “Empty button” errors even though they are not visible on the page.
Shouldn’t HTML elements inside “display:none” parts of the code be ignored by the checker as they are not “visible” to any user?
The checker should ignore elements with display:none;. If they become visible based on some interaction then it’s likely they are visible by the time the checker runs. I’d need to see this in action to know for sure. Do you have this on a public website somewhere?
I spent some time looking into this more yesterday and I can replicate what you see now.
In the past I have made the choice explicitly to test buttons for empty even when they are hidden via aria-hidden because interactive elements are still focusable even when they have aria-hidden assigned. I did not make considerations at that time for buttons inside containers that are hidden though.
I will look into what it will take to exclude those from inside hidden containers and decide if we do want to release that change (because in my mind checking contents that exists on a page and could have their visibility changed might still be better than missing potential issues if they are skipped due to initial state alone).
As an asside it might also be a good idea to consider an alternative lightbox script. Colorbox was arhived by the repo owner earlier this year and hasn’t had any update other than string fixes since 2016.
After a lot of testing and internal discussions we ended up thinking it is best to not modify an existing rule to solve for this. If we change things here to solve this for this use case it will mean that thigns like mobile menus won’t be checked appropriately.
The only solution I have for you just now is to suggest ignoring the issue when it shows up. I know that this means having to ignore them on every page but I don’t have a better solution just now.
Sorry that this isn’t a good solution for you but I don’t think there is a better solve for this specific problem that I can give you just now other than ignoring them.
