Collabsible UI Elements: Make the whole header clickable

[patrickatwsrn]

Feature request

Summary

Collapsing panels can be opened and closed by clocking a tiny (18x18px) up/down icon on the right side of the panel header.

It would be far easier, if the whole header would trigger this behaviour.

Why is it needed?

Familiar behaviour

A similar behavior can be found in many ui frameworks. So I'd argue that it is familiar concept for many users.

Conflicting with WCAG Standards:

The clickable area is much to small. Current recommendations are at least 44x44 (see: https://dequeuniversity.com/resources/wcag2.1/2.5.5-target-size)

Suggested solution(s)

A clear and concise description of what you want to happen.

The current styling of the headline is also lacking height (29px)

I guess this could be solved with 13px padding-bottom / padding -top and a negative margin-top of 13px;

.x-panel-header {
margin: -13px 0 0 0;
padding: 13px 0;
}

.x-panel-collapsed .x-panel-header {
margin: 0;
}

Related issue(s)/PR(s)

MODx 3.x

Cheers,

Patrick