diff --git a/src/components/RightSidebar/Participants/ParticipantsTab.vue b/src/components/RightSidebar/Participants/ParticipantsTab.vue
index e1f5940323b..3dd2d64c251 100644
--- a/src/components/RightSidebar/Participants/ParticipantsTab.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsTab.vue
@@ -12,9 +12,17 @@
:value.sync="searchText"
:is-focused.sync="isFocused"
:placeholder-text="searchBoxPlaceholder"
+ :aria-describedby="showSearchBoxDescription && searchBoxDescriptionId"
@input="handleInput"
@keydown.enter="addParticipants(participantPhoneItem)"
@abort-search="abortSearch" />
+
+
+ {{ searchBoxDescription }}
+
@@ -55,8 +63,11 @@
import debounce from 'debounce'
import { ref, toRefs } from 'vue'
+import IconInformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+
import { showError } from '@nextcloud/dialogs'
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
import { t } from '@nextcloud/l10n'
import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
@@ -71,6 +82,7 @@ import SearchBox from '../../UIShared/SearchBox.vue'
import { useArrowNavigation } from '../../../composables/useArrowNavigation.js'
import { useGetParticipants } from '../../../composables/useGetParticipants.js'
+import { useId } from '../../../composables/useId.ts'
import { useIsInCall } from '../../../composables/useIsInCall.js'
import { useSortParticipants } from '../../../composables/useSortParticipants.js'
import { ATTENDEE } from '../../../constants.js'
@@ -80,6 +92,8 @@ import { EventBus } from '../../../services/EventBus.js'
import { addParticipant } from '../../../services/participantsService.js'
import CancelableRequest from '../../../utils/cancelableRequest.js'
+const isFederationEnabled = loadState('spreed', 'federation_enabled')
+
export default {
name: 'ParticipantsTab',
components: {
@@ -91,6 +105,7 @@ export default {
ParticipantsSearchResults,
SearchBox,
SelectPhoneNumber,
+ IconInformationOutline,
},
props: {
@@ -118,7 +133,12 @@ export default {
const { initializeNavigation, resetNavigation } = useArrowNavigation(wrapper, searchBox)
+ const searchBoxDescriptionId = `search-box-description-${useId()}`
+ const searchBoxDescription = t('spreed', 'You can search or add participants via name, email, or Federated Cloud ID')
+
return {
+ searchBoxDescriptionId,
+ searchBoxDescription,
initializeNavigation,
resetNavigation,
wrapper,
@@ -164,6 +184,11 @@ export default {
? t('spreed', 'Search or add participants')
: t('spreed', 'Search participants')
},
+
+ showSearchBoxDescription() {
+ return isFederationEnabled && this.canAdd
+ },
+
show() {
return this.$store.getters.getSidebarStatus
},
@@ -343,13 +368,26 @@ export default {
}
.search-form {
- display: flex;
- align-items: center;
- gap: 4px;
-
- .search-form__input {
- margin: 0;
- }
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ .search-form__input {
+ margin: 0;
+ }
+
+ &__description {
+ width: var(--default-clickable-area);
+ height: var(--default-clickable-area);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &,
+ & > :deep(*) {
+ cursor: help;
+ }
+ }
}
.scroller {
diff --git a/src/components/UIShared/SearchBox.vue b/src/components/UIShared/SearchBox.vue
index 09f1254b44f..2b8c0fba8ff 100644
--- a/src/components/UIShared/SearchBox.vue
+++ b/src/components/UIShared/SearchBox.vue
@@ -7,6 +7,7 @@