Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(a11y): explicitly associate label and input elements #813

Merged
merged 1 commit into from
Dec 18, 2024
Merged

feat(a11y): explicitly associate label and input elements #813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/public/app/widgets/dialogs/bulk_actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/public/app/widgets/dialogs/delete_notes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions src/public/app/widgets/dialogs/protected_session_password.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
28 changes: 14 additions & 14 deletions src/public/app/widgets/dialogs/sort_child_notes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions src/public/app/widgets/type_widgets/options/appearance/code_block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions src/public/app/widgets/type_widgets/options/appearance/electron_integration.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
32 changes: 16 additions & 16 deletions src/public/app/widgets/type_widgets/options/appearance/fonts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/public/app/widgets/type_widgets/options/appearance/i18n.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/public/app/widgets/type_widgets/options/appearance/max_content_width.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions src/public/app/widgets/type_widgets/options/appearance/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>`;

Expand Down
4 changes: 2 additions & 2 deletions src/public/app/widgets/type_widgets/options/other/search_engine.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions src/public/app/widgets/type_widgets/options/password.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>`;

Expand Down
4 changes: 2 additions & 2 deletions src/public/app/widgets/type_widgets/options/spellcheck.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions src/public/app/widgets/type_widgets/options/sync.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>`;

Expand Down