Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-31 04:51:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(a11y): explicitly associate label and input elements

Browse Source
This commit is contained in:
Panagiotis Papadopoulos 2024-12-18 00:10:28 +01:00
parent 1a5e2519df
commit 6a044ee848
16 changed files with 72 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/public/app/widgets/dialogs/bulk_actions.js
View File

@ -45,8 +45,8 @@ const TPL = `
<h4>${t('bulk_actions.affected_notes')}: <span class="affected-note-count">0</span></h4> <h4>${t('bulk_actions.affected_notes')}: <span class="affected-note-count">0</span></h4>
<div class="form-check"> <div class="form-check">
<input class="include-descendants form-check-input" type="checkbox" value=""> <input id="include-descendants" class="include-descendants form-check-input" type="checkbox" value="">
<label class="form-check-label">${t('bulk_actions.include_descendants')}</label> <label for="include-descendants" class="form-check-label">${t('bulk_actions.include_descendants')}</label>
</div> </div>
<h4>${t('bulk_actions.available_actions')}</h4> <h4>${t('bulk_actions.available_actions')}</h4>

8
src/public/app/widgets/dialogs/delete_notes.js
View File

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

4
src/public/app/widgets/dialogs/protected_session_password.js
View File

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

28
src/public/app/widgets/dialogs/sort_child_notes.js
View File

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

4
src/public/app/widgets/type_widgets/options/appearance/code_block.js
View File

@ -28,8 +28,8 @@ const TPL = `
<div class="form-group row"> <div class="form-group row">
<div class="col-6"> <div class="col-6">
<label>${t("highlighting.color-scheme")}</label> <label for="highlighting-color-scheme-select">${t("highlighting.color-scheme")}</label>
<select class="theme-select form-select"></select> <select id="highlighting-color-scheme-select" class="theme-select form-select"></select>
</div> </div>
<div class="col-6 side-checkbox"> <div class="col-6 side-checkbox">

4
src/public/app/widgets/type_widgets/options/appearance/electron_integration.js
View File

@ -8,8 +8,8 @@ const TPL = `
<div class="form-group row"> <div class="form-group row">
<div class="col-12"> <div class="col-12">
<label>${t("electron_integration.zoom-factor")}</label> <label for="zoom-factor-select">${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"/> <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> <p>${t("zoom_factor.description")}</p>
</div> </div>
</div> </div>

32
src/public/app/widgets/type_widgets/options/appearance/fonts.js
View File

@ -36,15 +36,15 @@ const TPL = `
<div class="form-group row"> <div class="form-group row">
<div class="col-6"> <div class="col-6">
<label>${t("fonts.font_family")}</label> <label for="main-font-family">${t("fonts.font_family")}</label>
<select class="main-font-family form-select"></select> <select id="main-font-family" class="main-font-family form-select"></select>
</div> </div>
<div class="col-6"> <div class="col-6">
<label>${t("fonts.size")}</label> <label for="main-font-size">${t("fonts.size")}</label>
<div class="input-group"> <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> <span class="input-group-text">%</span>
</div> </div>
</div> </div>
@ -54,15 +54,15 @@ const TPL = `
<div class="form-group row"> <div class="form-group row">
<div class="col-4"> <div class="col-4">
<label>${t("fonts.font_family")}</label> <label for="tree-font-family">${t("fonts.font_family")}</label>
<select class="tree-font-family form-select"></select> <select id="tree-font-family" class="tree-font-family form-select"></select>
</div> </div>
<div class="col-6"> <div class="col-6">
<label>${t("fonts.size")}</label> <label for="tree-font-size">${t("fonts.size")}</label>
<div class="input-group"> <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> <span class="input-group-text">%</span>
</div> </div>
</div> </div>
@ -72,15 +72,15 @@ const TPL = `
<div class="form-group row"> <div class="form-group row">
<div class="col-4"> <div class="col-4">
<label>${t("fonts.font_family")}</label> <label for="detail-font-family">${t("fonts.font_family")}</label>
<select class="detail-font-family form-select"></select> <select id="detail-font-family" class="detail-font-family form-select"></select>
</div> </div>
<div class="col-6"> <div class="col-6">
<label>${t("fonts.size")}</label> <label for="detail-font-size">${t("fonts.size")}</label>
<div class="input-group"> <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> <span class="input-group-text">%</span>
</div> </div>
</div> </div>
@ -90,15 +90,15 @@ const TPL = `
<div class="form-group row"> <div class="form-group row">
<div class="col-4"> <div class="col-4">
<label>${t("fonts.font_family")}</label> <label for="monospace-font-family">${t("fonts.font_family")}</label>
<select class="monospace-font-family form-select"></select> <select id="monospace-font-family" class="monospace-font-family form-select"></select>
</div> </div>
<div class="col-6"> <div class="col-6">
<label>${t("fonts.size")}</label> <label for="monospace-font-size">${t("fonts.size")}</label>
<div class="input-group"> <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> <span class="input-group-text">%</span>
</div> </div>
</div> </div>

8
src/public/app/widgets/type_widgets/options/appearance/i18n.js
View File

@ -9,13 +9,13 @@ const TPL = `
<div class="form-group row"> <div class="form-group row">
<div class="col-6"> <div class="col-6">
<label>${t("i18n.language")}</label> <label for="locale-select">${t("i18n.language")}</label>
<select class="locale-select form-select"></select> <select id="locale-select" class="locale-select form-select"></select>
</div> </div>
<div class="col-6"> <div class="col-6">
<label>${t("i18n.first-day-of-the-week")}</label> <label for="first-day-of-week-select">${t("i18n.first-day-of-the-week")}</label>
<select class="first-day-of-week-select form-select"> <select id="first-day-of-week-select" class="first-day-of-week-select form-select">
<option value="0">${t("i18n.sunday")}</option> <option value="0">${t("i18n.sunday")}</option>
<option value="1">${t("i18n.monday")}</option> <option value="1">${t("i18n.monday")}</option>
</select> </select>

4
src/public/app/widgets/type_widgets/options/appearance/max_content_width.js
View File

@ -12,8 +12,8 @@ const TPL = `
<div class="form-group row"> <div class="form-group row">
<div class="col-6"> <div class="col-6">
<label>${t("max_content_width.max_width_label")}</label> <label for="max-content-width">${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"> <input id="max-content-width" type="number" min="${MIN_VALUE}" step="10" class="max-content-width form-control options-number-input">
</div> </div>
</div> </div>

4
src/public/app/widgets/type_widgets/options/appearance/theme.js
View File

@ -31,8 +31,8 @@ const TPL = `
<div class="form-group row"> <div class="form-group row">
<div class="col-6"> <div class="col-6">
<label>${t("theme.theme_label")}</label> <label for="theme-select">${t("theme.theme_label")}</label>
<select class="theme-select form-select"></select> <select id="theme-select" class="theme-select form-select"></select>
</div> </div>
<div class="col-6 side-checkbox"> <div class="col-6 side-checkbox">

4
src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.js
View File

@ -8,8 +8,8 @@ const TPL = `
<p>${t('code_auto_read_only_size.description')}</p> <p>${t('code_auto_read_only_size.description')}</p>
<div class="form-group"> <div class="form-group">
<label>${t('code_auto_read_only_size.label')}</label> <label for="auto-readonly-size-code">${t('code_auto_read_only_size.label')}</label>
<input class="auto-readonly-size-code form-control options-number-input" type="number" min="0"> <input id="auto-readonly-size-code" class="auto-readonly-size-code form-control options-number-input" type="number" min="0">
</div> </div>
</div>`; </div>`;

4
src/public/app/widgets/type_widgets/options/other/search_engine.js
View File

@ -10,8 +10,8 @@ const TPL = `
<form class="sync-setup-form"> <form class="sync-setup-form">
<div class="form-group"> <div class="form-group">
<label>${t("search_engine.predefined_templates_label")}</label> <label for="predefined-search-engine-select">${t("search_engine.predefined_templates_label")}</label>
<select class="predefined-search-engine-select form-control"> <select id="predefined-search-engine-select" class="predefined-search-engine-select form-control">
<option value="Bing">${t("search_engine.bing")}</option> <option value="Bing">${t("search_engine.bing")}</option>
<option value="Baidu">${t("search_engine.baidu")}</option> <option value="Baidu">${t("search_engine.baidu")}</option>
<option value="DuckDuckGo">${t("search_engine.duckduckgo")}</option> <option value="DuckDuckGo">${t("search_engine.duckduckgo")}</option>

16
src/public/app/widgets/type_widgets/options/password.js
View File

@ -14,18 +14,18 @@ const TPL = `
<form class="change-password-form"> <form class="change-password-form">
<div class="old-password-form-group form-group"> <div class="old-password-form-group form-group">
<label>${t("password.old_password")}</label> <label for="old-password">${t("password.old_password")}</label>
<input class="old-password form-control" type="password"> <input id="old-password" class="old-password form-control" type="password">
</div> </div>
<div class="form-group"> <div class="form-group">
<label>${t("password.new_password")}</label> <label for="new-password1">${t("password.new_password")}</label>
<input class="new-password1 form-control" type="password"> <input id="new-password1" class="new-password1 form-control" type="password">
</div> </div>
<div class="form-group"> <div class="form-group">
<label>${t("password.new_password_confirmation")}</label> <label for="new-password2">${t("password.new_password_confirmation")}</label>
<input class="new-password2 form-control" type="password"> <input id="new-password2" class="new-password2 form-control" type="password">
</div> </div>
<button class="save-password-button btn btn-primary">${t("password.change_password")}</button> <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> <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"> <div class="form-group">
<label>${t("password.protected_session_timeout_label")}</label> <label for="protected-session-timeout-in-seconds">${t("password.protected_session_timeout_label")}</label>
<input class="protected-session-timeout-in-seconds form-control options-number-input" type="number" min="60"> <input id="protected-session-timeout-in-seconds" class="protected-session-timeout-in-seconds form-control options-number-input" type="number" min="60">
</div> </div>
</div>`; </div>`;

4
src/public/app/widgets/type_widgets/options/spellcheck.js
View File

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

12
src/public/app/widgets/type_widgets/options/sync.js
View File

@ -9,18 +9,18 @@ const TPL = `
<form class="sync-setup-form"> <form class="sync-setup-form">
<div class="form-group"> <div class="form-group">
<label>${t('sync_2.server_address')}</label> <label for="sync-server-host" >${t('sync_2.server_address')}</label>
<input class="sync-server-host form-control" placeholder="https://<host>:<port>"> <input id="sync-server-host" class="sync-server-host form-control" placeholder="https://<host>:<port>">
</div> </div>
<div class="form-group"> <div class="form-group">
<label>${t('sync_2.timeout')}</label> <label for="sync-server-timeout" >${t('sync_2.timeout')}</label>
<input class="sync-server-timeout form-control" min="1" max="10000000" type="number" style="text-align: left;"> <input id="sync-server-timeout" class="sync-server-timeout form-control" min="1" max="10000000" type="number" style="text-align: left;">
</div> </div>
<div class="form-group"> <div class="form-group">
<label>${t('sync_2.proxy_label')}</label> <label for="sync-proxy form-control" >${t('sync_2.proxy_label')}</label>
<input class="sync-proxy form-control" placeholder="https://<host>:<port>"> <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><strong>${t('sync_2.note')}:</strong> ${t('sync_2.note_description')}</p>
<p>${t('sync_2.special_value_description')}</p> <p>${t('sync_2.special_value_description')}</p>

4
src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.js
View File

@ -8,8 +8,8 @@ const TPL = `
<p>${t("text_auto_read_only_size.description")}</p> <p>${t("text_auto_read_only_size.description")}</p>
<div class="form-group"> <div class="form-group">
<label>${t("text_auto_read_only_size.label")}</label> <label for="auto-readonly-size-text">${t("text_auto_read_only_size.label")}</label>
<input class="auto-readonly-size-text form-control options-number-input" type="number" min="0"> <input id="auto-readonly-size-text" class="auto-readonly-size-text form-control options-number-input" type="number" min="0">
</div> </div>
</div>`; </div>`;