Landing page: clicking on "remember my preference" does not tick the associated checkbox

[wetneb]

Summary

When going to the landing page of a Mattermost instance, I am given the options "View in Desktop App" and "View in Browser" with a checkbox "Remember my preference".

Clicking on "Remember my preference" does not tick the associated checkbox: one needs to click exactly on the checkbox. This a sign for a missing <label> which goes against the guidelines from the Web Accessibility Initiative. This can impair keyboard navigation or screen reader usage for instance.

The DOM structure there is indeed:

<div class="get-app__preference">
    <button class="get-app__checkbox "></button>
    <span>Remember my preference</span>
</div>

Steps to reproduce

Observed on the landing page of a Mattermost instance (Team edition version 9.7).

Expected behavior

Clicking on the text "Remember my preference" should check / uncheck the associated checkbox.

Observed behavior (that appears unintentional)

Only clicking on the checkbox works.

Possible fixes

Adding the missing <label> element (see guidelines above).

[M-ZubairAhmed]

This needs rework to have

<label
-- input type=checkbox
-- text
</label

[amyblais]

Hi @wetneb, what Mattermost server version are you on?

[wetneb]

Hi @amyblais, I am using this version:

Mattermost Version: 9.7.0
Database Schema Version: 119
Build Number: 8510024253