Update: I don’t recommend using this technique anymore for managing keyboard focus, because changing it triggers browser to recalc styles/layout. There is a better way to do this – with tabindex=-1
Positioning an navigation block outside the visible screen area does not prevent focusing elements resting inside with Tab key. This behavior causes confusion about the current focus position.
Disabling mouse interactions on given element is easy to achieve via
pointer-events:none; To disable keyboard interaction for any focusable UI element we need to either set
tabindex=-1 or remove it from the DOM with
display: none; property. As we know display property is not animatable for a good reason – changing display property to none removes element from the DOM and as a consequence – triggers browser to recalculate layout, paint and composite. In other words – too many dependencies to take into account for browser to make a smooth transition.
Continue reading “CSS transitions in sync with display property”
Yesterday I had an initial blog redesign meeting with a designer and a stakeholder. The purpose of the meeting was to present and discuss our initial redesign ideas. The designer already had a vision of how to improve the current information structure and content presentation. She brought some paper sketches as a mean of communication which I admire and I was there to contribute with my insights. Continue reading “Discussing design: always consider at least one alternative”
Today I want to share CSS only button progress animation. JS is only used to trigger loading animations Continue reading “Bootstrap button progress animation”
Checkboxes and radio buttons originally always were quite small UI beasts. I found a GOV.UK blog post about improving checkboxes and radios
recently. They did an interesting usability finding – users don’t click on the titles – they usually click on the UI elements themselves. Now, that is interesting! It means we should make these small UI elements to be more friendly to clicking mistakes. Continue reading “Checkbox click area improvement”