Page MenuHomePhorge
Files F85804893

No OneTemporary
Actions

Size
15 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index ae71d7bd56..17c7411d0e 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -1,7 +1,7 @@
<template>
<label
class="checkbox"
- :class="[{ ['-disabled']: disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }, radio ? '-radio' : '-checkbox']"
+ :class="[$attrs.class, { ['-disabled']: disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }, radio ? '-radio' : '-checkbox']"
>
<span
v-if="!!$slots.before"
@@ -17,7 +17,7 @@
:checked="modelValue"
:indeterminate="indeterminate"
@change="$emit('update:modelValue', $event.target.checked)"
- v-bind="$attrs"
+ v-bind="inputAttrs"
>
<i
class="input checkbox-indicator"
@@ -37,6 +37,7 @@
<script>
export default {
+ inheritAttrs: false,
props: {
radio: Boolean,
modelValue: Boolean,
@@ -54,6 +55,13 @@ export default {
}
},
},
+ computed: {
+ inputAttrs() {
+ const { class: _unused, ...rest } = this.$attrs
+
+ return rest
+ }
+ },
methods: {
onTransitionEnd() {
if (!this.indeterminate) {
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index c81b6be2a3..e7dcacfb09 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -76,18 +76,19 @@
class="additional-tabs"
role="tablist"
>
- <span
+ <button
class="button-unstyled stickers-tab-icon additional-tabs-item"
:class="{toggled: showingStickers}"
:title="$t('emoji.stickers')"
@click.prevent="toggleStickers"
+ :aria-selected="showingStickers"
role="tab"
>
<FAIcon
icon="sticky-note"
fixed-width
/>
- </span>
+ </button>
</span>
</div>
<div
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 20ce335477..f03d33daef 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -34,7 +34,6 @@
v-if="currentUser || !privateMode"
:show-pin="false"
:item="{ icon: 'stream', label: 'nav.timelines' }"
- role="menuitem"
aria-controls="nav-timelines-list"
:aria-expanded="showTimelines"
@click="toggleTimelines"
@@ -68,7 +67,6 @@
:show-pin="false"
:item="{ icon: 'list', label: 'nav.lists' }"
:aria-expanded="showLists ? 'true' : 'false'"
- role="menuitem"
aria-controls="nav-lists-list"
:aria-label="$t('nav.lists')"
@click="toggleLists"
@@ -109,7 +107,6 @@
:show-pin="false"
:item="{ icon: 'bookmark', label: 'nav.bookmarks' }"
:aria-expanded="showBookmarkFolders ? 'true' : 'false'"
- role="menuitem"
aria-controls="nav-bookmark-folders-list"
:aria-label="$t('nav.bookmarks')"
@click="toggleBookmarkFolders"
@@ -136,7 +133,7 @@
class="timelines-background menu-item-collapsible"
:class="{ '-expanded': showBookmarkFolders }"
:aria-label="$t('nav.bookmark_folders')"
- :aria-expanded="showLists"
+ :aria-expanded="showBookmarkFolders"
id="nav-bookmark-folders-list"
role="group"
>
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index cc4e255b0a..89f103d159 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -36,9 +36,7 @@
</div>
<div
v-else
- :role="poll.multiple ? 'checkbox' : 'radio'"
- :aria-labelledby="`option-vote-${randomSeed}-${index}`"
- :aria-checked="choices[index]"
+ :aria-labelledby="`option-vote-${uniqueId}-${index}`"
>
<Checkbox
:radio="!poll.multiple"
@@ -47,7 +45,7 @@
@update:model-value="value => activateOption(index, value)"
>
<RichContent
- :id="`option-vote-${randomSeed}-${index}`"
+ :id="`option-vote-${uniqueId}-${index}`"
:html="option.title_html"
:handle-links="false"
:emoji="emoji"
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
index 98c2cbc222..ec24c2f271 100644
--- a/src/components/range_input/range_input.vue
+++ b/src/components/range_input/range_input.vue
@@ -12,20 +12,12 @@
</label>
<input
v-if="fallback !== undefined"
- :id="name + '-o'"
- :title="label"
- class="input -checkbox opt visible-for-screenreader-only"
+ :title="$t('settings.style.themes3.define')"
+ class="input -checkbox opt"
type="checkbox"
:checked="present"
@change="$emit('update:modelValue', !present ? fallback : undefined)"
>
- <label
- v-if="fallback !== undefined"
- class="opt-l"
- :title="$t('settings.style.themes3.define')"
- :for="name + '-o'"
- :aria-hidden="true"
- />
<input
:id="name"
class="input input-number"
diff --git a/src/components/select/select.js b/src/components/select/select.js
index 2b41231d31..426ac605d2 100644
--- a/src/components/select/select.js
+++ b/src/components/select/select.js
@@ -4,7 +4,7 @@ import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
library.add(faChevronDown)
export default {
- emits: ['update:modelValue'],
+ inheritAttrs: false,
props: {
rootClass: String,
modelValue: String,
@@ -12,5 +12,12 @@ export default {
unstyled: Boolean,
kind: String,
},
- inheritAttrs: false,
+ computed: {
+ inputAttrs() {
+ const { class: _unused, ...rest } = this.$attrs
+
+ return rest
+ }
+ },
+ emits: ['update:modelValue'],
}
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index cf485adb4d..1f52c36354 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -1,13 +1,12 @@
<template>
<label
class="Select input"
- :class="[rootClass, { disabled, unstyled }]"
- role="presentation"
+ :class="[$attrs.class, { disabled, unstyled }]"
>
<select
:disabled="disabled"
:value="modelValue"
- v-bind="$attrs"
+ v-bind="inputAttrs"
@change="$emit('update:modelValue', $event.target.value)"
>
<slot />
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 4fb37fab7b..5367966911 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -1,25 +1,19 @@
<template>
- <label
+ <div
v-if="matchesExpertLevel"
class="BooleanSetting setting-item"
>
- <Checkbox
- class="setting-control setting-label"
- :model-value="visibleState"
- :disabled="shouldBeDisabled"
- :indeterminate="isIndeterminate"
- @update:model-value="update"
+ <span
+ class="setting-label"
+ :class="{ 'faint': shouldBeDisabled }"
>
- <span
- class="label"
- :class="{ 'faint': shouldBeDisabled }"
- >
- <ModifiedIndicator
- :changed="isChanged"
- :onclick="reset"
- />
- <LocalSettingIndicator :is-local="isLocalSetting" />
- {{ ' ' }}
+ <ModifiedIndicator
+ :changed="isChanged"
+ :onclick="reset"
+ />
+ <LocalSettingIndicator :is-local="isLocalSetting" />
+ {{ ' ' }}
+ <label :for="idPrefix + 'checkbox'">
<template v-if="backendDescriptionLabel">
{{ backendDescriptionLabel }}
</template>
@@ -27,8 +21,16 @@
MISSING LABEL FOR {{ path }}
</template>
<slot v-else />
- </span>
- </Checkbox>
+ </label>
+ </span>
+ <Checkbox
+ :id="idPrefix + 'checkbox'"
+ class="setting-control"
+ :model-value="visibleState"
+ :disabled="shouldBeDisabled"
+ :indeterminate="isIndeterminate"
+ @update:model-value="update"
+ />
<p
v-if="backendDescriptionDescription || showDescription"
class="setting-description"
@@ -39,7 +41,7 @@
</slot>
</p>
<DraftButtons />
- </label>
+ </div>
</template>
<script src="./boolean_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
index 866b86fa86..67c56cebdf 100644
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -1,31 +1,35 @@
<template>
- <label
+ <div
v-if="matchesExpertLevel"
class="ChoiceSetting setting-item"
- :for="idPrefix + 'select'"
- :id="idPrefix + 'label'"
:class="{ 'faint': shouldBeDisabled }"
>
- <span class="setting-label">
+ <div
+ class="setting-label"
+ >
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<LocalSettingIndicator :is-local="isLocalSetting" />
{{ ' ' }}
- <template v-if="backendDescriptionLabel">
- {{ backendDescriptionLabel }}
- </template>
- <template v-else>
- <slot />
- </template>
- </span>
+ <label
+ :for="idPrefix + 'select'"
+ :id="idPrefix + 'label'"
+ >
+ <template v-if="backendDescriptionLabel">
+ {{ backendDescriptionLabel }}
+ </template>
+ <template v-else>
+ <slot />
+ </template>
+ </label>
+ </div>
<Select
class="setting-control"
:id="idPrefix + 'select'"
:model-value="realDraftMode ? draft : state"
:disabled="shouldBeDisabled"
- :aria-labelledby="idPrefix + 'label'"
@update:model-value="update"
>
<option
@@ -44,7 +48,7 @@
>
{{ backendDescriptionDescription + ' ' }}
</p>
- </label>
+ </div>
</template>
<script src="./choice_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/help_indicator.vue b/src/components/settings_modal/helpers/help_indicator.vue
index 6332455a36..e36bb727df 100644
--- a/src/components/settings_modal/helpers/help_indicator.vue
+++ b/src/components/settings_modal/helpers/help_indicator.vue
@@ -1,8 +1,9 @@
<template>
<span class="HelpIndicator">
<Popover
- trigger="click"
- :aria-label="$t('settings.setting_changed')"
+ trigger="hover"
+ :aria-label="$t('general.help')"
+ tooltip
>
<template #trigger>
<FAIcon icon="circle-question" />
diff --git a/src/components/settings_modal/helpers/local_setting_indicator.vue b/src/components/settings_modal/helpers/local_setting_indicator.vue
index e58f2cc71e..8286b03f43 100644
--- a/src/components/settings_modal/helpers/local_setting_indicator.vue
+++ b/src/components/settings_modal/helpers/local_setting_indicator.vue
@@ -5,11 +5,12 @@
>
<Popover
trigger="hover"
+ :aria-label="$t('settings.setting_local_side')"
+ tooltip
>
<template #trigger>
<FAIcon
icon="desktop"
- :aria-label="$t('settings.setting_local_side')"
/>
</template>
<template #content>
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
index 01993d42a1..8c51ea3a00 100644
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -6,6 +6,7 @@
<Popover
trigger="hover"
:aria-label="$t('settings.setting_changed')"
+ tooltip
>
<template #trigger>
<FAIcon
diff --git a/src/components/settings_modal/helpers/tuple_setting.vue b/src/components/settings_modal/helpers/tuple_setting.vue
index 2ea4e3af4d..0286b9ebde 100644
--- a/src/components/settings_modal/helpers/tuple_setting.vue
+++ b/src/components/settings_modal/helpers/tuple_setting.vue
@@ -5,7 +5,6 @@
>
<legend
v-if="!hideLabel"
- :for="path"
class="setting-label"
:class="{ 'faint': shouldBeDisabled }"
>
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 9e4fa45c71..5d42c3e2c1 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -118,6 +118,7 @@
&.checkbox {
display: grid;
grid-template-columns: subgrid;
+ grid-template-rows: subgrid;
.label {
grid-area: label;
@@ -126,9 +127,7 @@
.checkbox-indicator {
grid-area: control;
- height: 1.5em;
- line-height: 1.5em;
- align-self: baseline;
+ align-self: end;
}
.-mobile & {
diff --git a/src/components/settings_modal/tabs/filtering_tab.scss b/src/components/settings_modal/tabs/filtering_tab.scss
index 2340421d30..af35f7677a 100644
--- a/src/components/settings_modal/tabs/filtering_tab.scss
+++ b/src/components/settings_modal/tabs/filtering_tab.scss
@@ -46,12 +46,13 @@
grid-column: 1 / span 3;
align-items: baseline;
- label {
+ > label,
+ > .filter-field-label {
grid-column: 1;
text-align: right;
}
- > label.checkbox {
+ > .input-boolean {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index eaf1665d72..51889856de 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -197,7 +197,7 @@
</Checkbox>
</div>
<div class="filter-type filter-field">
- <label :for="'filterType' + filter[0]">
+ <span class="filter-field-label">
<HelpIndicator>
<p>
{{ $t('settings.filter.help.word') }}
@@ -219,8 +219,10 @@
</template>
</i18n-t>
</HelpIndicator>
- {{ $t('settings.filter.type') }}
- </label>
+ <label :for="'filterType' + filter[0]">
+ {{ $t('settings.filter.type') }}
+ </label>
+ </span>
<Select
:id="'filterType' + filter[0]"
class="filter-field-value"
@@ -243,6 +245,7 @@
</div>
<div class="filter-value filter-field">
<label
+ class="filter-field-label"
:for="'filterValue' + filter[0]"
>
{{ $t('settings.filter.value') }}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 6d2ff96aed..a1cca56669 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -337,7 +337,7 @@
<Select
:id="'userHighlightSel'+user.id"
v-model="userHighlightType"
- :root-class="['userHighlightSel', { '-none': userHighlightType === 'disabled' }]"
+ :class="['userHighlightSel', { '-none': userHighlightType === 'disabled' }]"
unstyled
>
<option value="disabled">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d21c11b549..586b2efef6 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -134,6 +134,7 @@
"not_available": "N/A",
"peek": "Peek",
"scroll_to_top": "Scroll to top",
+ "help": "Help",
"role": {
"admin": "Admin",
"moderator": "Moderator"

File Metadata

Mime Type
text/x-diff
Expires
Sat, Oct 10, 5:08 PM (1 d, 6 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1785365
Default Alt Text
(15 KB)

Event Timeline