Accessibility of is-block

[bodograumann]

I really like the visuals of the is-block variant. In fact I previously achieved something similar by nesting an unstyled checkbox inside a bulma tag element.

Now I wanted to transition to the styled checkboxes from bulma-checkradio. The same nesting does not quite work because of the background colors of is-checkradio is-block and tag not working together easily. (Though with some hacking this could probably be made to work) So I intented to use a simple checkbox with is-checkradio is-block only.

What I noticed, is, that now it is difficult for the user to actually see that these are checkboxes to be clicked. So I would suggest the following:

• Show the square of the checkbox inside the colored block.
• Make the square a little smaller (for is-block only), so there is some space to the outer block border.
• Give the whole block a :hover effect with adjusted background color, just like buttons have.

What do you think?

[Wikiki]

Hi @bodograumann,

thanks for your feedback.

I'm working on a more advanced "block" display style. But waiting, don't hesitate to create a PR so I'll be able to integrate your proposal into it.