Consider dilating pointer areas for checkboxes

phetsims / graphing-quadratics

"Graphing Quadratics" is an educational simulation in HTML5, by PhET Interactive Simulations.

MIT License

1 stars 4 forks source link

Consider dilating pointer areas for checkboxes #197

Closed Nancy-Salpepi closed 1 year ago

Nancy-Salpepi commented 1 year ago

Test device MacBook Air M1 chip

Operating System 13.4

Browser Safari 16.5

Problem description For https://github.com/phetsims/qa/issues/959, I see the same thing that I reported in https://github.com/phetsims/molecule-polarity/issues/161. On all screens, the touch/pointer areas for checkboxes are not flush against each other.

Visuals

zepumph commented 1 year ago

@arouinfar can you comment on this? Don't we have a stand for extending them to the edge of the panel?

arouinfar commented 1 year ago

The pointerAreas usually have the same width, extending to the end of largest Node in the group. For example:

Here, I would dilate things a bit vertically, and match the width of the longest checkbox title.

pixelzoom commented 1 year ago

@zepumph said:

@arouinfar can you comment on this? Don't we have a stand for extending them to the edge of the panel?

Assuming you mean "standard"... This happens to be a standard that I don't at all agree with. It works great on a device like an phone or tablet. It's not at all appropriate imo for a general web application.

It's also burdensome when it's not possible to use VerticalCheckboxGroup -- like in this example, where there's a separator.

But I'll do it rather than debate it again.

pixelzoom commented 1 year ago

This affects all accordion boxes and panels that contain checkboxes, in all 4 screens.

pixelzoom commented 1 year ago

Done in the above commits, screenshots below. @arouinfar please review in master. Close if OK.

Notet that for the "Quadratic Terms" accordion box in the first screen, the pointer areas are determined by the width of the accordion box, not the width of the widest checkbox. This is caused by the fact that the VBox and horizontal separator are stretched to accommodate the title width. This is the default behavior. I could program around it, but it would be complicated, more difficult to maintain, and of little/no value.

arouinfar commented 1 year ago

Thanks @pixelzoom. I didn't realize there were mitigating factors preventing the use of VerticalCheckboxGroup. I appreciate that you took the time to make this change. Looks good in master, closing.