feat(a11y): explicitly associate label and input elements

TriliumNext · Dec 18, 2024 · 6a044ee · 6a044ee
1 parent 1a5e251
commit 6a044ee
Show file tree

Hide file tree

Showing 16 changed files with 72 additions and 72 deletions.
diff --git a/src/public/app/widgets/dialogs/bulk_actions.js b/src/public/app/widgets/dialogs/bulk_actions.js
@@ -45,8 +45,8 @@ const TPL = `
                 <h4>${t('bulk_actions.affected_notes')}: <span class="affected-note-count">0</span></h4>
 
                 <div class="form-check">
-                    <input class="include-descendants form-check-input" type="checkbox" value="">
-                    <label class="form-check-label">${t('bulk_actions.include_descendants')}</label>
+                    <input id="include-descendants" class="include-descendants form-check-input" type="checkbox" value="">
+                    <label for="include-descendants" class="form-check-label">${t('bulk_actions.include_descendants')}</label>
                 </div>
 
                 <h4>${t('bulk_actions.available_actions')}</h4>

diff --git a/src/public/app/widgets/dialogs/delete_notes.js b/src/public/app/widgets/dialogs/delete_notes.js
@@ -15,13 +15,13 @@ const TPL = `
             </div>
             <div class="modal-body">
                 <div class="form-checkbox">
-                    <input class="delete-all-clones form-check-input" value="1" type="checkbox">
-                    <label class="form-check-label">${t('delete_notes.delete_all_clones_description')}</label>
+                    <input id="delete-all-clones" class="delete-all-clones form-check-input" value="1" type="checkbox">
+                    <label for="delete-all-clones" class="form-check-label">${t('delete_notes.delete_all_clones_description')}</label>
                 </div>
 
                 <div class="form-checkbox" style="margin-bottom: 1rem">
-                    <input class="erase-notes form-check-input" value="1" type="checkbox">
-                    <label class="form-check-label">${t('delete_notes.erase_notes_warning')}</label>
+                    <input id="erase-notes" class="erase-notes form-check-input" value="1" type="checkbox">
+                    <label for="erase-notes" class="form-check-label">${t('delete_notes.erase_notes_warning')}</label>
                 </div>
 
                 <div class="delete-notes-list-wrapper">

diff --git a/src/public/app/widgets/dialogs/protected_session_password.js b/src/public/app/widgets/dialogs/protected_session_password.js
@@ -14,8 +14,8 @@ const TPL = `
             </div>
             <form class="protected-session-password-form">
                 <div class="modal-body">
-                    <label class="col-form-label">${t("protected_session_password.form_label")}</label>
-                    <input class="form-control protected-session-password" type="password">
+                    <label for="protected-session-password" class="col-form-label">${t("protected_session_password.form_label")}asbd</label>
+                    <input id="protected-session-password" class="form-control protected-session-password" type="password">
                 </div>
                 <div class="modal-footer">
                     <button class="btn btn-primary">${t("protected_session_password.start_button")}</button>

diff --git a/src/public/app/widgets/dialogs/sort_child_notes.js b/src/public/app/widgets/dialogs/sort_child_notes.js
@@ -14,38 +14,38 @@ const TPL = `<div class="sort-child-notes-dialog modal mx-auto" tabindex="-1" ro
                 <div class="modal-body">
                     <h5>${t("sort_child_notes.sorting_criteria")}</h5>
                     <div class="form-check">
-                        <input class="form-check-input" type="radio" name="sort-by" value="title" checked>
-                        <label class="form-check-label">${t("sort_child_notes.title")}</label>
+                        <input id="sort-by-title" class="form-check-input" type="radio" name="sort-by" value="title" checked>
+                        <label for="sort-by-title" class="form-check-label">${t("sort_child_notes.title")}</label>
                     </div>
                     <div class="form-check">
-                        <input class="form-check-input" type="radio" name="sort-by" value="dateCreated">
-                        <label class="form-check-label">${t("sort_child_notes.date_created")}</label>
+                        <input id="sort-by-dateCreated" class="form-check-input" type="radio" name="sort-by" value="dateCreated">
+                        <label for="sort-by-dateCreated" class="form-check-label">${t("sort_child_notes.date_created")}</label>
                     </div>
                     <div class="form-check">
-                        <input class="form-check-input" type="radio" name="sort-by" value="dateModified">
-                        <label class="form-check-label">${t("sort_child_notes.date_modified")}</label>
+                        <input id="sort-by-dateModified" class="form-check-input" type="radio" name="sort-by" value="dateModified">
+                        <label for="sort-by-dateModified" class="form-check-label">${t("sort_child_notes.date_modified")}</label>
                     </div>
                     <br/>
                     <h5>${t("sort_child_notes.sorting_direction")}</h5>
                     <div class="form-check">
-                        <input class="form-check-input" type="radio" name="sort-direction" value="asc" checked>
-                        <label class="form-check-label">${t("sort_child_notes.ascending")}</label>
+                        <input id="sort-direction-asc" class="form-check-input" type="radio" name="sort-direction" value="asc" checked>
+                        <label for="sort-direction-asc" class="form-check-label">${t("sort_child_notes.ascending")}</label>
                     </div>
                     <div class="form-check">
-                        <input class="form-check-input" type="radio" name="sort-direction" value="desc">
-                        <label class="form-check-label">${t("sort_child_notes.descending")}</label>
+                        <input id="sort-direction-desc" class="form-check-input" type="radio" name="sort-direction" value="desc">
+                        <label for="sort-direction-desc" class="form-check-label">${t("sort_child_notes.descending")}</label>
                     </div>
                     <br />
                     <h5>${t("sort_child_notes.folders")}</h5>
                     <div class="form-check">
-                        <input class="form-check-input" type="checkbox" name="sort-folders-first" value="1">
-                        <label class="form-check-label">${t("sort_child_notes.sort_folders_at_top")}</label>
+                        <input id="sort-folders-first" class="form-check-input" type="checkbox" name="sort-folders-first" value="1">
+                        <label for="sort-folders-first" class="form-check-label">${t("sort_child_notes.sort_folders_at_top")}</label>
                     </div>
                     <br />
                     <h5>${t("sort_child_notes.natural_sort")}</h5>
                     <div class="form-check">
-                        <input class="form-check-input" type="checkbox" name="sort-natural" value="1">
-                        <label class="form-check-label">${t("sort_child_notes.sort_with_respect_to_different_character_sorting")}</label>
+                        <input id="sort-natural" class="form-check-input" type="checkbox" name="sort-natural" value="1">
+                        <label for="sort-natural" class="form-check-label">${t("sort_child_notes.sort_with_respect_to_different_character_sorting")}</label>
                     </div>
                     <br />
                     <div class="form-check">

diff --git a/src/public/app/widgets/type_widgets/options/appearance/code_block.js b/src/public/app/widgets/type_widgets/options/appearance/code_block.js
@@ -28,8 +28,8 @@ const TPL = `
 
     <div class="form-group row">
         <div class="col-6">
-            <label>${t("highlighting.color-scheme")}</label>
-            <select class="theme-select form-select"></select>
+            <label for="highlighting-color-scheme-select">${t("highlighting.color-scheme")}</label>
+            <select id="highlighting-color-scheme-select" class="theme-select form-select"></select>
         </div>
 
         <div class="col-6 side-checkbox">

diff --git a/src/public/app/widgets/type_widgets/options/appearance/electron_integration.js b/src/public/app/widgets/type_widgets/options/appearance/electron_integration.js
@@ -8,8 +8,8 @@ const TPL = `
 
     <div class="form-group row">
         <div class="col-12">
-            <label>${t("electron_integration.zoom-factor")}</label>
-            <input type="number" class="zoom-factor-select form-control options-number-input" min="0.3" max="2.0" step="0.1"/>            
+            <label for="zoom-factor-select">${t("electron_integration.zoom-factor")}</label>
+            <input id="zoom-factor-select" type="number" class="zoom-factor-select form-control options-number-input" min="0.3" max="2.0" step="0.1"/>            
             <p>${t("zoom_factor.description")}</p>
         </div>
     </div>

diff --git a/src/public/app/widgets/type_widgets/options/appearance/fonts.js b/src/public/app/widgets/type_widgets/options/appearance/fonts.js
@@ -36,15 +36,15 @@ const TPL = `
     
     <div class="form-group row">
         <div class="col-6">
-            <label>${t("fonts.font_family")}</label>
-            <select class="main-font-family form-select"></select>
+            <label for="main-font-family">${t("fonts.font_family")}</label>
+            <select id="main-font-family" class="main-font-family form-select"></select>
         </div>
     
         <div class="col-6">
-            <label>${t("fonts.size")}</label>
+            <label for="main-font-size">${t("fonts.size")}</label>
 
             <div class="input-group">
-                <input type="number" class="main-font-size form-control options-number-input" min="50" max="200" step="10"/>
+                <input id="main-font-size" type="number" class="main-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <span class="input-group-text">%</span>
             </div>
         </div>
@@ -54,15 +54,15 @@ const TPL = `
 
     <div class="form-group row">
         <div class="col-4">
-            <label>${t("fonts.font_family")}</label>
-            <select class="tree-font-family form-select"></select>
+            <label for="tree-font-family">${t("fonts.font_family")}</label>
+            <select id="tree-font-family" class="tree-font-family form-select"></select>
         </div>
     
         <div class="col-6">
-            <label>${t("fonts.size")}</label>
+            <label for="tree-font-size">${t("fonts.size")}</label>
 
             <div class="input-group">
-                <input type="number" class="tree-font-size form-control options-number-input" min="50" max="200" step="10"/>
+                <input id="tree-font-size" type="number" class="tree-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <span class="input-group-text">%</span>
             </div>
         </div>
@@ -72,15 +72,15 @@ const TPL = `
     
     <div class="form-group row">
         <div class="col-4">
-            <label>${t("fonts.font_family")}</label>
-            <select class="detail-font-family form-select"></select>
+            <label for="detail-font-family">${t("fonts.font_family")}</label>
+            <select id="detail-font-family" class="detail-font-family form-select"></select>
         </div>
         
         <div class="col-6">
-            <label>${t("fonts.size")}</label>
+            <label for="detail-font-size">${t("fonts.size")}</label>
 
             <div class="input-group">
-                <input type="number" class="detail-font-size form-control options-number-input" min="50" max="200" step="10"/>
+                <input id="detail-font-size" type="number" class="detail-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <span class="input-group-text">%</span>
             </div>
         </div>
@@ -90,15 +90,15 @@ const TPL = `
     
     <div class="form-group row">
         <div class="col-4">
-            <label>${t("fonts.font_family")}</label>
-            <select class="monospace-font-family form-select"></select>
+            <label for="monospace-font-family">${t("fonts.font_family")}</label>
+            <select id="monospace-font-family" class="monospace-font-family form-select"></select>
         </div>
     
         <div class="col-6">
-            <label>${t("fonts.size")}</label>
+            <label for="monospace-font-size">${t("fonts.size")}</label>
 
             <div class="input-group">
-                <input type="number" class="monospace-font-size form-control options-number-input" min="50" max="200" step="10"/>
+                <input id="monospace-font-size" type="number" class="monospace-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <span class="input-group-text">%</span>
             </div>
         </div>

diff --git a/src/public/app/widgets/type_widgets/options/appearance/i18n.js b/src/public/app/widgets/type_widgets/options/appearance/i18n.js
@@ -9,13 +9,13 @@ const TPL = `
 
     <div class="form-group row">
         <div class="col-6">
-            <label>${t("i18n.language")}</label>
-            <select class="locale-select form-select"></select>
+            <label for="locale-select">${t("i18n.language")}</label>
+            <select id="locale-select" class="locale-select form-select"></select>
         </div>
 
         <div class="col-6">
-            <label>${t("i18n.first-day-of-the-week")}</label>
-            <select class="first-day-of-week-select form-select">
+            <label for="first-day-of-week-select">${t("i18n.first-day-of-the-week")}</label>
+            <select id="first-day-of-week-select" class="first-day-of-week-select form-select">
                 <option value="0">${t("i18n.sunday")}</option>
                 <option value="1">${t("i18n.monday")}</option>
             </select>

diff --git a/src/public/app/widgets/type_widgets/options/appearance/max_content_width.js b/src/public/app/widgets/type_widgets/options/appearance/max_content_width.js
@@ -12,8 +12,8 @@ const TPL = `
     
     <div class="form-group row">
         <div class="col-6">
-            <label>${t("max_content_width.max_width_label")}</label>
-            <input type="number" min="${MIN_VALUE}" step="10" class="max-content-width form-control options-number-input">
+            <label for="max-content-width">${t("max_content_width.max_width_label")}</label>
+            <input id="max-content-width" type="number" min="${MIN_VALUE}" step="10" class="max-content-width form-control options-number-input">
         </div>
     </div>
     

diff --git a/src/public/app/widgets/type_widgets/options/appearance/theme.js b/src/public/app/widgets/type_widgets/options/appearance/theme.js
@@ -31,8 +31,8 @@ const TPL = `
     
     <div class="form-group row">
         <div class="col-6">
-            <label>${t("theme.theme_label")}</label>
-            <select class="theme-select form-select"></select>
+            <label for="theme-select">${t("theme.theme_label")}</label>
+            <select id="theme-select" class="theme-select form-select"></select>
         </div>
         
         <div class="col-6 side-checkbox">

diff --git a/src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.js b/src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.js
@@ -8,8 +8,8 @@ const TPL = `
     <p>${t('code_auto_read_only_size.description')}</p>
 
     <div class="form-group">
-        <label>${t('code_auto_read_only_size.label')}</label>
-        <input class="auto-readonly-size-code form-control options-number-input" type="number" min="0">
+        <label for="auto-readonly-size-code">${t('code_auto_read_only_size.label')}</label>
+        <input id="auto-readonly-size-code" class="auto-readonly-size-code form-control options-number-input" type="number" min="0">
     </div>
 </div>`;
 

diff --git a/src/public/app/widgets/type_widgets/options/other/search_engine.js b/src/public/app/widgets/type_widgets/options/other/search_engine.js
@@ -10,8 +10,8 @@ const TPL = `
     
     <form class="sync-setup-form">
         <div class="form-group">
-            <label>${t("search_engine.predefined_templates_label")}</label>
-            <select class="predefined-search-engine-select form-control">
+            <label for="predefined-search-engine-select">${t("search_engine.predefined_templates_label")}</label>
+            <select id="predefined-search-engine-select" class="predefined-search-engine-select form-control">
                 <option value="Bing">${t("search_engine.bing")}</option>
                 <option value="Baidu">${t("search_engine.baidu")}</option>
                 <option value="DuckDuckGo">${t("search_engine.duckduckgo")}</option>

diff --git a/src/public/app/widgets/type_widgets/options/password.js b/src/public/app/widgets/type_widgets/options/password.js
@@ -14,18 +14,18 @@ const TPL = `
     
     <form class="change-password-form">
         <div class="old-password-form-group form-group">
-            <label>${t("password.old_password")}</label>
-            <input class="old-password form-control" type="password">
+            <label for="old-password">${t("password.old_password")}</label>
+            <input id="old-password" class="old-password form-control" type="password">
         </div>
     
         <div class="form-group">
-            <label>${t("password.new_password")}</label>
-            <input class="new-password1 form-control" type="password">
+            <label for="new-password1">${t("password.new_password")}</label>
+            <input id="new-password1" class="new-password1 form-control" type="password">
         </div>
     
         <div class="form-group">
-            <label>${t("password.new_password_confirmation")}</label>
-            <input class="new-password2 form-control" type="password">
+            <label for="new-password2">${t("password.new_password_confirmation")}</label>
+            <input id="new-password2" class="new-password2 form-control" type="password">
         </div>
     
         <button class="save-password-button btn btn-primary">${t("password.change_password")}</button>
@@ -38,8 +38,8 @@ const TPL = `
     <p>${t("password.protected_session_timeout_description")} <a href="https://triliumnext.github.io/Docs/Wiki/protected-notes.html" class="external">${t("password.wiki")}</a> ${t("password.for_more_info")}</p>
 
     <div class="form-group">
-        <label>${t("password.protected_session_timeout_label")}</label>
-        <input class="protected-session-timeout-in-seconds form-control options-number-input" type="number" min="60">
+        <label for="protected-session-timeout-in-seconds">${t("password.protected_session_timeout_label")}</label>
+        <input id="protected-session-timeout-in-seconds" class="protected-session-timeout-in-seconds form-control options-number-input" type="number" min="60">
     </div>
 </div>`;
 

diff --git a/src/public/app/widgets/type_widgets/options/spellcheck.js b/src/public/app/widgets/type_widgets/options/spellcheck.js
@@ -24,8 +24,8 @@ const TPL_ELECTRON = `
     <br/>
 
     <div class="form-group">
-        <label>${t('spellcheck.language_code_label')}</label>
-        <input type="text" class="spell-check-language-code form-control" placeholder="${t('spellcheck.language_code_placeholder')}">
+        <label for="spell-check-language-code">${t('spellcheck.language_code_label')}</label>
+        <input id="spell-check-language-code" type="text" class="spell-check-language-code form-control" placeholder="${t('spellcheck.language_code_placeholder')}">
     </div>
 
     <p>${t('spellcheck.multiple_languages_info')}</p>

diff --git a/src/public/app/widgets/type_widgets/options/sync.js b/src/public/app/widgets/type_widgets/options/sync.js
@@ -9,18 +9,18 @@ const TPL = `
     
     <form class="sync-setup-form">
         <div class="form-group">
-            <label>${t('sync_2.server_address')}</label>
-            <input class="sync-server-host form-control" placeholder="https://<host>:<port>">
+            <label for="sync-server-host" >${t('sync_2.server_address')}</label>
+            <input id="sync-server-host" class="sync-server-host form-control" placeholder="https://<host>:<port>">
         </div>
     
         <div class="form-group">
-            <label>${t('sync_2.timeout')}</label>
-            <input class="sync-server-timeout form-control" min="1" max="10000000" type="number" style="text-align: left;">
+            <label for="sync-server-timeout" >${t('sync_2.timeout')}</label>
+            <input id="sync-server-timeout" class="sync-server-timeout form-control" min="1" max="10000000" type="number" style="text-align: left;">
         </div>
     
         <div class="form-group">
-            <label>${t('sync_2.proxy_label')}</label>
-            <input class="sync-proxy form-control" placeholder="https://<host>:<port>">
+            <label for="sync-proxy form-control" >${t('sync_2.proxy_label')}</label>
+            <input id="sync-proxy form-control" class="sync-proxy form-control" placeholder="https://<host>:<port>">
     
             <p><strong>${t('sync_2.note')}:</strong> ${t('sync_2.note_description')}</p>
             <p>${t('sync_2.special_value_description')}</p>

diff --git a/src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.js b/src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.js
@@ -8,8 +8,8 @@ const TPL = `
     <p>${t("text_auto_read_only_size.description")}</p>
 
     <div class="form-group">
-        <label>${t("text_auto_read_only_size.label")}</label>
-        <input class="auto-readonly-size-text form-control options-number-input" type="number" min="0">
+        <label for="auto-readonly-size-text">${t("text_auto_read_only_size.label")}</label>
+        <input id="auto-readonly-size-text" class="auto-readonly-size-text form-control options-number-input" type="number" min="0">
     </div>
 </div>`;