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.
This commit is contained in:
whilstsomebody 2024-11-07 05:04:34 +05:30
parent 32b4285d38
commit 609fc1c94e
16 changed files with 51 additions and 48 deletions

View File

@ -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>

View File

@ -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}}" />

View File

@ -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>

View File

@ -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"

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

@ -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">

View File

@ -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"

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

@ -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>

View File

@ -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">

View File

@ -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>