From 609fc1c94e28ea6cbbc9f5aa49be4fdc7165ca64 Mon Sep 17 00:00:00 2001
From: whilstsomebody <vishwakarmarambhawan572@gmail.com>
Date: Thu, 7 Nov 2024 05:04:34 +0530
Subject: [PATCH] settings: Add id and for attributes for label-input
 interaction.

This commit adds for and id attributes to enable
interaction between labels and their corresponding
input elements.

The changes have been made in the following areas:

Channel Settings:

-Create Channel > General Configurations
-Create Channel > Advanced Configurations

Organization Settings:

-Organization Profile
-Organization Settings
-Organization Permissions
-Custom Emoji
-Bots
-Custom Profile Fields
-Default User Settings
-Data Exports

Group Settings:

-Create User Group > General Settings
-Create User Group > Group Permissions

Personal Settings:

-Profile
-Account & Privacy
-Preferences
-Notifications
-Bots
-Alert Words

Fixes part of #21769.
---
 web/templates/change_email_modal.hbs          |  2 +-
 web/templates/dialog_change_password.hbs      |  8 ++++++--
 web/templates/settings/account_settings.hbs   | 10 ++++------
 web/templates/settings/add_new_bot_form.hbs   |  4 ++--
 web/templates/settings/api_key_modal.hbs      |  4 +++-
 .../settings/custom_user_profile_field.hbs    | 10 +++++-----
 .../settings/language_selection_widget.hbs    |  4 ++--
 .../settings/notification_settings.hbs        |  9 ++++-----
 .../organization_permissions_admin.hbs        | 20 +++++++++----------
 .../settings/organization_profile_admin.hbs   |  4 ++--
 .../settings/organization_settings_admin.hbs  |  4 ++--
 .../organization_user_settings_defaults.hbs   |  2 +-
 .../settings/preferences_general.hbs          |  4 ++--
 .../settings/preferences_information.hbs      |  6 +++---
 .../settings/preferences_navigation.hbs       |  6 +++---
 web/templates/settings/profile_settings.hbs   |  2 +-
 16 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/web/templates/change_email_modal.hbs b/web/templates/change_email_modal.hbs
index e76e397593..9648fc0a11 100644
--- a/web/templates/change_email_modal.hbs
+++ b/web/templates/change_email_modal.hbs
@@ -2,5 +2,5 @@
     <label for="email" class="modal-field-label">
         <span class="modal-field-label-text">{{t "New email" }}</span>
     </label>
-    <input type="text" name="email" class="modal_text_input" value="{{delivery_email}}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
+    <input id="email" type="text" name="email" class="modal_text_input" value="{{delivery_email}}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
 </form>
diff --git a/web/templates/dialog_change_password.hbs b/web/templates/dialog_change_password.hbs
index 012c70de30..c45f227b8e 100644
--- a/web/templates/dialog_change_password.hbs
+++ b/web/templates/dialog_change_password.hbs
@@ -1,6 +1,8 @@
 <form id="change_password_container">
     <div class="settings-password-div">
-        <label for="old_password" class="modal-field-label">{{t "Old password" }}</label>
+        <label for="old_password" class="modal-field-label">
+            <span class="modal-field-label-text">{{t "Old password" }}</span>
+        </label>
         <div class="password-input-row">
             <input type="password" autocomplete="off" name="old_password" id="old_password" class="inline-block modal_password_input" value="" />
             <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button" tabindex="0"></i>
@@ -8,7 +10,9 @@
         </div>
     </div>
     <div class="settings-password-div">
-        <label for="new_password" class="modal-field-label">{{t "New password" }}</label>
+        <label for="new_password" class="modal-field-label">
+            <span class="modal-field-label-text">{{t "New password" }}</span>
+        </label>
         <div class="password-input-row">
             <input type="password" autocomplete="new-password" name="new_password" id="new_password" class="inline-block modal_password_input" value=""
               data-min-length="{{password_min_length}}" data-min-guesses="{{password_min_guesses}}" />
diff --git a/web/templates/settings/account_settings.hbs b/web/templates/settings/account_settings.hbs
index a0e35d4873..ee367d14f6 100644
--- a/web/templates/settings/account_settings.hbs
+++ b/web/templates/settings/account_settings.hbs
@@ -7,7 +7,7 @@
             <form class="grid">
                 {{#if user_has_email_set}}
                 <div class="input-group">
-                    <label class="settings-field-label">
+                    <label class="settings-field-label" for="change_email_button">
                         <span class="settings-field-label-text">{{t "Email" }}</span>
                     </label>
                     <div id="change_email_button_container" class="{{#unless user_can_change_email}}disabled_setting_tooltip{{/unless}}">
@@ -44,7 +44,7 @@
             <form class="password-change-form grid">
                 {{#if user_can_change_password}}
                 <div>
-                    <label class="settings-field-label">
+                    <label class="settings-field-label" for="change_password">
                         <span class="settings-field-label-text">{{t "Password" }}</span>
                     </label>
                     <div class="input-group">
@@ -106,14 +106,12 @@
                   }}
             </div>
             <div class="input-group">
-                <label for="email_address_visibility" class="settings-field-label">
+                <label for="user_email_address_visibility" class="settings-field-label">
                     <span class="settings-field-label-text">{{t "Who can access your email address" }}</span>
                     {{> ../help_link_widget link="/help/configure-email-visibility" }}
                 </label>
                 <div id="user_email_address_dropdown_container" class="inline-block {{#unless user_has_email_set}}disabled_setting_tooltip{{/unless}}">
-                    <select name="email_address_visibility" class="email_address_visibility prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number"
-                      id="user_email_address_visibility" {{#unless user_has_email_set}}disabled="disabled"{{/unless}}>
-                        {{> dropdown_options_widget option_values=email_address_visibility_values}}
+                    <select name="email_address_visibility" class="email_address_visibility prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number" id="user_email_address_visibility" {{#unless user_has_email_set}}disabled="disabled"{{/unless}}>{{> dropdown_options_widget option_values=email_address_visibility_values}}
                     </select>
                 </div>
             </div>
diff --git a/web/templates/settings/add_new_bot_form.hbs b/web/templates/settings/add_new_bot_form.hbs
index 0be847b189..78a43a4675 100644
--- a/web/templates/settings/add_new_bot_form.hbs
+++ b/web/templates/settings/add_new_bot_form.hbs
@@ -1,7 +1,7 @@
 <form id="create_bot_form">
     <div class="new-bot-form">
         <div class="input-group">
-            <label for="bot_type" class="modal-field-label">
+            <label for="create_bot_type" class="modal-field-label">
                 <span class="modal-field-label-text">{{t "Bot type" }}</span>
                 {{> ../help_link_widget link="/help/bots-overview#bot-type" }}
             </label>
@@ -32,7 +32,7 @@
             <div><label for="create_bot_name" generated="true" class="text-error"></label></div>
         </div>
         <div class="input-group">
-            <label for="bot_short_name" class="modal-field-label">
+            <label for="create_bot_short_name" class="modal-field-label">
                 <span class="modal-field-label-text">{{t "Bot email (a-z, 0-9, and dashes only)" }}</span>
             </label>
             <input type="text" name="bot_short_name" id="create_bot_short_name" class="required bot_local_part modal_text_input"
diff --git a/web/templates/settings/api_key_modal.hbs b/web/templates/settings/api_key_modal.hbs
index eaa08d44ce..a4d189316a 100644
--- a/web/templates/settings/api_key_modal.hbs
+++ b/web/templates/settings/api_key_modal.hbs
@@ -13,7 +13,9 @@
                     <div id="api_key_form">
                         <p>{{t "Please re-enter your password to confirm your identity." }}</p>
                         <div class="settings-password-div">
-                            <label for="password" class="modal-field-label">{{t "Your password" }}</label>
+                            <label for="password" class="modal-field-label">
+                                <span class="modal-field-label-text">{{t "Your password" }}</span>
+                            </label>
                             <div class="password-input-row">
                                 <input type="password" autocomplete="off" name="password" id="get_api_key_password" class=" modal_password_input" value="" />
                                 <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
diff --git a/web/templates/settings/custom_user_profile_field.hbs b/web/templates/settings/custom_user_profile_field.hbs
index 438e449d1f..e64f960132 100644
--- a/web/templates/settings/custom_user_profile_field.hbs
+++ b/web/templates/settings/custom_user_profile_field.hbs
@@ -9,9 +9,9 @@
     <div class="settings-profile-user-field-hint">{{ field.hint }}</div>
     <div class="settings-profile-user-field {{#if is_empty_required_field}}empty-required-field{{/if}} {{#unless editable_by_user}}not-editable-by-user-input-wrapper{{/unless}}">
         {{#if is_long_text_field}}
-        <textarea maxlength="500" class="custom_user_field_value settings_textarea" name="{{ field.id }}" {{#unless editable_by_user}}disabled{{/unless}}>{{ field_value.value }}</textarea>
+        <textarea id="{{ field.name }}" maxlength="500" class="custom_user_field_value settings_textarea" name="{{ field.id }}" {{#unless editable_by_user}}disabled{{/unless}}>{{ field_value.value }}</textarea>
         {{else if is_select_field}}
-        <select class="custom_user_field_value {{#if for_manage_user_modal}}modal_select{{else}}settings_select{{/if}} bootstrap-focus-style" name="{{ field.id }}" {{#unless editable_by_user}}disabled{{/unless}}>
+        <select id="{{ field.name }}" class="custom_user_field_value {{#if for_manage_user_modal}}modal_select{{else}}settings_select{{/if}} bootstrap-focus-style" name="{{ field.id }}" {{#unless editable_by_user}}disabled{{/unless}}>
             <option value=""></option>
             {{#each field_choices}}
                 <option value="{{ this.value }}" {{#if this.selected}}selected{{/if}}>{{ this.text }}</option>
@@ -26,11 +26,11 @@
           value="{{ field_value.value }}" {{#unless editable_by_user}}disabled{{/unless}}/>
         {{#if editable_by_user}}<span class="remove_date"><i class="fa fa-close"></i></span>{{/if}}
         {{else if is_url_field }}
-        <input class="custom_user_field_value {{#if for_manage_user_modal}}modal_url_input{{else}}settings_url_input{{/if}}" name="{{ field.id }}" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="2048" {{#unless editable_by_user}}disabled{{/unless}}/>
+        <input id="{{ field.name }}" class="custom_user_field_value {{#if for_manage_user_modal}}modal_url_input{{else}}settings_url_input{{/if}}" name="{{ field.id }}" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="2048" {{#unless editable_by_user}}disabled{{/unless}}/>
         {{else if is_pronouns_field}}
-        <input class="custom_user_field_value pronouns_type_field {{#if for_manage_user_modal}}modal_text_input{{else}}settings_text_input{{/if}}" name="{{ field.id }}" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" {{#unless editable_by_user}}disabled{{/unless}}/>
+        <input id="{{ field.name }}" class="custom_user_field_value pronouns_type_field {{#if for_manage_user_modal}}modal_text_input{{else}}settings_text_input{{/if}}" name="{{ field.id }}" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" {{#unless editable_by_user}}disabled{{/unless}}/>
         {{else}}
-        <input class="custom_user_field_value {{#if for_manage_user_modal}}modal_text_input{{else}}settings_text_input{{/if}}" name="{{ field.id }}" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" {{#unless editable_by_user}}disabled{{/unless}}/>
+        <input id="{{ field.name }}" class="custom_user_field_value {{#if for_manage_user_modal}}modal_text_input{{else}}settings_text_input{{/if}}" name="{{ field.id }}" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" {{#unless editable_by_user}}disabled{{/unless}}/>
         {{/if}}
     </div>
 </div>
diff --git a/web/templates/settings/language_selection_widget.hbs b/web/templates/settings/language_selection_widget.hbs
index e7033732a6..d6a591afca 100644
--- a/web/templates/settings/language_selection_widget.hbs
+++ b/web/templates/settings/language_selection_widget.hbs
@@ -1,11 +1,11 @@
 <div class="language_selection_widget input-group prop-element" id="id_{{section_name}}" data-setting-widget-type="language-setting">
-    <label class="settings-field-label">
+    <label class="settings-field-label" for="select_language">
         <span class="settings-field-label-text">{{section_title}}</span>
         {{#if help_link_widget_link}}
         {{> ../help_link_widget link=help_link_widget_link }}
         {{/if}}
     </label>
-    <button type="button" class="language_selection_button button rounded tippy-zulip-delayed-tooltip" data-section="{{section_name}}" data-tippy-content="{{t 'Change language' }}">
+    <button id="select_language" type="button" class="language_selection_button button rounded tippy-zulip-delayed-tooltip" data-section="{{section_name}}" data-tippy-content="{{t 'Change language' }}">
         <span class="{{section_name}}" data-language-code="{{language_code}}">{{setting_value}}</span>
     </button>
 </div>
diff --git a/web/templates/settings/notification_settings.hbs b/web/templates/settings/notification_settings.hbs
index b242e983d7..824a9ac3a3 100644
--- a/web/templates/settings/notification_settings.hbs
+++ b/web/templates/settings/notification_settings.hbs
@@ -65,7 +65,7 @@
         </div>
 
         <div class="input-group">
-            <label for="automatically_follow_topics_policy" class="settings-field-label">
+            <label for="{{prefix}}automatically_follow_topics_policy" class="settings-field-label">
                 <span class="settings-field-label-text">{{ settings_label.automatically_follow_topics_policy }}</span>
                 {{> ../help_link_widget link="/help/follow-a-topic" }}
             </label>
@@ -76,7 +76,7 @@
         </div>
 
         <div class="input-group">
-            <label for="automatically_unmute_topics_in_muted_streams_policy" class="settings-field-label">
+            <label for="{{prefix}}automatically_unmute_topics_in_muted_streams_policy" class="settings-field-label">
                 <span class="settings-field-label-text">{{ settings_label.automatically_unmute_topics_in_muted_streams_policy }}</span>
                 {{> ../help_link_widget link="/help/mute-a-topic" }}
             </label>
@@ -134,7 +134,7 @@
         </div>
 
         <div class="input-group">
-            <label for="desktop_icon_count_display" class="settings-field-label">
+            <label for="{{prefix}}desktop_icon_count_display" class="settings-field-label">
                 <span class="settings-field-label-text">{{ settings_label.desktop_icon_count_display }}</span>
             </label>
             <select name="desktop_icon_count_display" class="setting_desktop_icon_count_display prop-element settings_select bootstrap-focus-style" id="{{prefix}}desktop_icon_count_display" data-setting-widget-type="number">
@@ -180,8 +180,7 @@
         </div>
 
         <div class="input-group time-limit-setting">
-
-            <label for="email_notifications_batching_period" class="settings-field-label">
+            <label for="{{prefix}}email_notifications_batching_period_seconds" class="settings-field-label">
                 <span class="settings-field-label-text">{{t "Delay before sending message notification emails" }}</span>
             </label>
             <select name="email_notifications_batching_period_seconds" class="setting_email_notifications_batching_period_seconds prop-element settings_select bootstrap-focus-style" id="{{prefix}}email_notifications_batching_period_seconds" data-setting-widget-type="time-limit">
diff --git a/web/templates/settings/organization_permissions_admin.hbs b/web/templates/settings/organization_permissions_admin.hbs
index 66e61565c6..76f0d99fc7 100644
--- a/web/templates/settings/organization_permissions_admin.hbs
+++ b/web/templates/settings/organization_permissions_admin.hbs
@@ -16,7 +16,7 @@
                       prefix="id_"
                       is_checked=realm_invite_required
                       label=admin_settings_label.realm_invite_required}}
-                    <label for="realm_invite_to_realm_policy" class="settings-field-label">
+                    <label for="id_realm_invite_to_realm_policy" class="settings-field-label">
                         <span class="settings-field-label-text">{{t "Who can send email invitations to new users" }}</span>
                     </label>
                     <select name="realm_invite_to_realm_policy" id="id_realm_invite_to_realm_policy" class="prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number">
@@ -29,7 +29,7 @@
                   label=(t 'Who can create reusable invitation links')}}
 
                 <div class="input-group">
-                    <label for="realm_org_join_restrictions" class="settings-field-label">
+                    <label for="id_realm_org_join_restrictions" class="settings-field-label">
                         <span class="settings-field-label-text">{{t "Restrict email domains of new users" }}</span>
                     </label>
                     <select name="realm_org_join_restrictions" id="id_realm_org_join_restrictions" class="prop-element settings_select bootstrap-focus-style" data-setting-widget-type="string">
@@ -45,7 +45,7 @@
                     </div>
                 </div>
                 <div class="input-group time-limit-setting">
-                    <label for="realm_waiting_period_threshold" class="settings-field-label">
+                    <label for="id_realm_waiting_period_threshold" class="settings-field-label">
                         <span class="settings-field-label-text">{{t "Waiting period before new members turn into full members" }}</span>
                         {{> ../help_link_widget link="/help/restrict-permissions-of-new-members" }}
                     </label>
@@ -95,7 +95,7 @@
                   label=(t 'Who can create private channels')}}
 
                 <div class="input-group">
-                    <label for="realm_invite_to_stream_policy" class="settings-field-label">
+                    <label for="id_realm_invite_to_stream_policy" class="settings-field-label">
                         <span class="settings-field-label-text">{{t "Who can add users to channels" }}</span>
                     </label>
                     <select name="realm_invite_to_stream_policy" id="id_realm_invite_to_stream_policy" class="prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number">
@@ -103,7 +103,7 @@
                     </select>
                 </div>
                 <div class="input-group">
-                    <label for="realm_wildcard_mention_policy" class="settings-field-label">
+                    <label for="id_realm_wildcard_mention_policy" class="settings-field-label">
                         <span class="settings-field-label-text">{{t "Who can notify a large number of users with a wildcard mention" }}</span>
                         {{> ../help_link_widget link="/help/restrict-wildcard-mentions" }}
                     </label>
@@ -170,7 +170,7 @@
                   label=admin_settings_label.realm_allow_edit_history}}
 
                 <div class="input-group time-limit-setting">
-                    <label for="realm_message_content_edit_limit_seconds" class="settings-field-label">
+                    <label for="id_realm_message_content_edit_limit_seconds" class="settings-field-label">
                         <span class="settings-field-label-text">{{t "Time limit for editing messages" }}</span>
                     </label>
                     <select name="realm_message_content_edit_limit_seconds" id="id_realm_message_content_edit_limit_seconds" class="prop-element settings_select bootstrap-focus-style" {{#unless realm_allow_message_editing}}disabled{{/unless}} data-setting-widget-type="time-limit">
@@ -206,7 +206,7 @@
               label=(t 'Who can move messages to another topic')}}
 
             <div class="input-group time-limit-setting">
-                <label for="realm_move_messages_within_stream_limit_seconds" class="settings-field-label">
+                <label for="id_realm_invite_to_realm_policyrealm_move_messages_within_stream_limit_seconds" class="settings-field-label">
                     <span class="settings-field-label-text">{{t "Time limit for editing topics" }}
                         <i>({{t "does not apply to moderators and administrators" }})</i></span>
                 </label>
@@ -231,7 +231,7 @@
               label=(t 'Who can move messages to another channel')}}
 
             <div class="input-group time-limit-setting">
-                <label for="realm_move_messages_between_streams_limit_seconds" class="settings-field-label">
+                <label for="id_realm_move_messages_between_streams_limit_seconds" class="settings-field-label">
                     <span class="settings-field-label-text">{{t "Time limit for moving messages between channels" }}
                         <i>({{t "does not apply to moderators and administrators" }})</i></span>
                 </label>
@@ -269,7 +269,7 @@
                   label=(t 'Who can delete their own messages')}}
 
                 <div class="input-group time-limit-setting">
-                    <label for="realm_message_content_delete_limit_seconds" class="settings-field-label">
+                    <label for="id_realm_message_content_delete_limit_seconds" class="settings-field-label">
                         <span class="settings-field-label-text">{{t "Time limit for deleting messages" }}
                             <i>({{t "does not apply to users who can delete any message" }})</i></span>
                     </label>
@@ -355,7 +355,7 @@
             </div>
             <div class="m-10 inline-block organization-permissions-parent">
                 <div class="input-group">
-                    <label for="realm_bot_creation_policy" class="settings-field-label">
+                    <label for="id_realm_bot_creation_policy" class="settings-field-label">
                         <span class="settings-field-label-text">{{t "Who can add bots" }}</span>
                     </label>
                     <select name="realm_bot_creation_policy" class="setting-widget prop-element settings_select bootstrap-focus-style" id="id_realm_bot_creation_policy" data-setting-widget-type="number">
diff --git a/web/templates/settings/organization_profile_admin.hbs b/web/templates/settings/organization_profile_admin.hbs
index 1aace3e7e9..9ec2ac222f 100644
--- a/web/templates/settings/organization_profile_admin.hbs
+++ b/web/templates/settings/organization_profile_admin.hbs
@@ -20,7 +20,7 @@
                       value="{{ realm_name }}" maxlength="40" />
                 </div>
                 <div class="input-group admin-realm">
-                    <label for="realm_org_type" class="settings-field-label">
+                    <label for="id_realm_org_type" class="settings-field-label">
                         <span class="settings-field-label-text">{{t "Organization type" }}</span>
                         {{> ../help_link_widget link="/help/organization-type" }}
                     </label>
@@ -36,7 +36,7 @@
                   label=admin_settings_label.realm_want_advertise_in_communities_directory
                   help_link="/help/communities-directory"}}
                 <div class="input-group admin-realm">
-                    <label for="realm_description" class="settings-field-label">
+                    <label for="id_realm_description" class="settings-field-label">
                         <span class="settings-field-label-text">{{t "Organization description" }}</span>
                     </label>
                     <textarea id="id_realm_description" name="realm_description" class="admin-realm-description setting-widget prop-element settings_textarea"
diff --git a/web/templates/settings/organization_settings_admin.hbs b/web/templates/settings/organization_settings_admin.hbs
index 2c73f7c606..ddab05cbd1 100644
--- a/web/templates/settings/organization_settings_admin.hbs
+++ b/web/templates/settings/organization_settings_admin.hbs
@@ -113,7 +113,7 @@
             </div>
             <div class="inline-block organization-settings-parent">
                 <div class="input-group">
-                    <label for="realm_video_chat_provider" class="settings-field-label">
+                    <label for="id_realm_video_chat_provider" class="settings-field-label">
                         <span class="settings-field-label-text">{{t 'Call provider' }}</span>
                         {{> ../help_link_widget link="/help/start-a-call" }}
                     </label>
@@ -151,7 +151,7 @@
                     </div>
                 </div>
                 <div class="input-group">
-                    <label for="realm_giphy_rating" class="settings-field-label">
+                    <label for="id_realm_giphy_rating" class="settings-field-label">
                         <span class="settings-field-label-text">{{t 'GIPHY integration' }}</span>
                         {{> ../help_link_widget link=giphy_help_link }}
                     </label>
diff --git a/web/templates/settings/organization_user_settings_defaults.hbs b/web/templates/settings/organization_user_settings_defaults.hbs
index e94b4d6568..b2cde7a1db 100644
--- a/web/templates/settings/organization_user_settings_defaults.hbs
+++ b/web/templates/settings/organization_user_settings_defaults.hbs
@@ -44,7 +44,7 @@
                 <span class="settings-field-label-text">{{t "Who can access user's email address" }}</span>
                 {{> ../help_link_widget link="/help/configure-email-visibility" }}
             </label>
-            <select name="email_address_visibility" class="email_address_visibility prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number"
+            <select id="email_address_visibility" name="email_address_visibility" class="email_address_visibility prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number"
               id="realm_email_address_visibility">
                 {{> dropdown_options_widget option_values=email_address_visibility_values}}
             </select>
diff --git a/web/templates/settings/preferences_general.hbs b/web/templates/settings/preferences_general.hbs
index a0032cca22..370eac87a7 100644
--- a/web/templates/settings/preferences_general.hbs
+++ b/web/templates/settings/preferences_general.hbs
@@ -14,7 +14,7 @@
     {{/unless}}
 
     <div class="input-group">
-        <label for="twenty_four_hour_time" class="settings-field-label">
+        <label for="{{prefix}}twenty_four_hour_time" class="settings-field-label">
             <span class="settings-field-label-text">{{ settings_label.twenty_four_hour_time }}</span>
         </label>
         <select name="twenty_four_hour_time" class="setting_twenty_four_hour_time prop-element settings_select bootstrap-focus-style" id="{{prefix}}twenty_four_hour_time" data-setting-widget-type="string">
@@ -24,7 +24,7 @@
         </select>
     </div>
     <div class="input-group">
-        <label for="color_scheme" class="settings-field-label">
+        <label for="{{prefix}}color_scheme" class="settings-field-label">
             <span class="settings-field-label-text">{{t "Theme" }}</span>
         </label>
         <select name="color_scheme" class="setting_color_scheme prop-element settings_select bootstrap-focus-style" id="{{prefix}}color_scheme" data-setting-widget-type="number">
diff --git a/web/templates/settings/preferences_information.hbs b/web/templates/settings/preferences_information.hbs
index 8ab3a98023..f91c5eb01e 100644
--- a/web/templates/settings/preferences_information.hbs
+++ b/web/templates/settings/preferences_information.hbs
@@ -52,7 +52,7 @@
     </div>
 
     <div class="input-group thinner setting-next-is-related">
-        <label for="web_animate_image_previews" class="settings-field-label">
+        <label for="{{prefix}}web_animate_image_previews" class="settings-field-label">
             <span class="settings-field-label-text">{{t "Play animated images" }}</span>
         </label>
         <select name="web_animate_image_previews" class="setting_web_animate_image_previews prop-element settings_select bootstrap-focus-style" id="{{prefix}}web_animate_image_previews" data-setting-widget-type="string">
@@ -61,7 +61,7 @@
     </div>
 
     <div class="input-group">
-        <label for="web_stream_unreads_count_display_policy" class="settings-field-label">
+        <label for="{{prefix}}web_stream_unreads_count_display_policy" class="settings-field-label">
             <span class="settings-field-label-text">{{t "Show unread counts for" }}</span>
         </label>
         <select name="web_stream_unreads_count_display_policy" class="setting_web_stream_unreads_count_display_policy prop-element bootstrap-focus-style settings_select" id="{{prefix}}web_stream_unreads_count_display_policy"  data-setting-widget-type="number">
@@ -79,7 +79,7 @@
     {{/each}}
 
     <div class="input-group">
-        <label for="demote_inactive_streams" class="settings-field-label">
+        <label for="{{prefix}}demote_inactive_streams" class="settings-field-label">
             <span class="settings-field-label-text">{{t "Demote inactive channels" }}</span>
             {{> ../help_link_widget link="/help/manage-inactive-channels" }}
         </label>
diff --git a/web/templates/settings/preferences_navigation.hbs b/web/templates/settings/preferences_navigation.hbs
index 358d550a6a..f82ba254c6 100644
--- a/web/templates/settings/preferences_navigation.hbs
+++ b/web/templates/settings/preferences_navigation.hbs
@@ -5,7 +5,7 @@
     </div>
 
     <div class="input-group thinner setting-next-is-related">
-        <label for="web_home_view" class="settings-field-label">
+        <label for="{{prefix}}web_home_view" class="settings-field-label">
             <span class="settings-field-label-text">{{t "Home view" }}</span>
             {{> ../help_link_widget link="/help/configure-home-view" }}
         </label>
@@ -27,7 +27,7 @@
       prefix=prefix}}
 
     <div class="input-group">
-        <label for="web_mark_read_on_scroll_policy" class="settings-field-label">
+        <label for="{{prefix}}web_mark_read_on_scroll_policy" class="settings-field-label">
             <span class="settings-field-label-text">{{t "Automatically mark messages as read" }}</span>
             {{> ../help_link_widget link="/help/marking-messages-as-read" }}
         </label>
@@ -37,7 +37,7 @@
     </div>
 
     <div class="input-group">
-        <label for="web_channel_default_view" class="settings-field-label">
+        <label for="{{prefix}}web_channel_default_view" class="settings-field-label">
             <span class="settings-field-label-text">{{t "Channel links in the left sidebar go to" }}</span>
         </label>
         <select name="web_channel_default_view" class="setting_web_channel_default_view prop-element settings_select bootstrap-focus-style" id="{{prefix}}web_channel_default_view"  data-setting-widget-type="number">
diff --git a/web/templates/settings/profile_settings.hbs b/web/templates/settings/profile_settings.hbs
index 15186280b3..2579aff29f 100644
--- a/web/templates/settings/profile_settings.hbs
+++ b/web/templates/settings/profile_settings.hbs
@@ -20,7 +20,7 @@
 
                 <form class="timezone-setting-form">
                     <div class="input-group grid">
-                        <label for="timezone" class="settings-field-label inline-block">
+                        <label for="user_timezone" class="settings-field-label inline-block">
                             <span class="settings-field-label-text">{{t "Time zone" }}</span>
                         </label>
                         <div class="alert-notification timezone-setting-status"></div>