Bruce Lawson with the tip of the day, warning against the use of pointer-events: none
on forms labels. We know that pointer-events
is used to change how elements respond to click, tap, hover, and active states. But it apparently borks form labels, squashing their active hit target size to something small and tough to interact with. Bruce includes examples in his post.
That’s not the striking part of the post though. It’s that the issue was pinned to an implementation of Material Design’s floating labels component. Bruce fortunately had pointer events expert Patrick Lauke’s ear, who pointed (get it?) out the issue.
aha, now i remember when i first saw a few weeks ago – testing something based on material design for web https://t.co/YkEKXkU0To pic.twitter.com/31S74X1i4R
— patrick h. lauke #toryScum #clapForFlagWankers (@patrick_h_lauke) February 5, 2021
That isn’t a dig at frameworks. It’s just the reality of things. Front-end developers gotta be aware, and that includes awareness of third-party code.
Great start of an article, but those new to development and design should know the WHY part of this article.
Why is this important? Accessibility. Compliance with ADA and WCAG. Plus this impacts the usability when it comes to small form factor devices.
I’ve read it three times and still don’t get it. What’s the issue? What’s special about labels? Shouldn’t the title say “Don’t put pointer-events: none on ANY INTERACTIVE ELEMENT”? Or is the article just a hatred against Material Design?