Skip to content

Breakout rooms: improve semantic and a11y #8984

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

Merged
nickvergessen merged 4 commits into from
Mar 7, 2023
Merged

Breakout rooms: improve semantic and a11y #8984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
609c564
change ul nesting for participants list
Antreesy Mar 7, 2023
cf08649
replace deprecated prop, add aria-label
Antreesy Mar 7, 2023
a65f9f4
remove redundant wrapper
Antreesy Mar 7, 2023
75c1a86
move a margin rule to the stable element
Antreesy Mar 7, 2023
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
2 changes: 1 addition & 1 deletion src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
<template v-for="(item, index) in assignments">
<NcAppNavigationItem :key="index"
class="participants-editor__section"
:title="roomName(index)"
:name="roomName(index)"
:allow-collapse="true"
:open="true">
<template #icon>
Expand Down
103 changes: 54 additions & 49 deletions src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,59 +21,58 @@
-->

<template>
<Fragment>
<li :key="roomName"
class="breakout-room-item"
@mouseenter="elementHoveredOrFocused = true"
@mouseleave="elementHoveredOrFocused = false">
<li :key="roomName"
class="breakout-room-item"
@mouseenter="elementHoveredOrFocused = true"
@mouseleave="elementHoveredOrFocused = false">
<div class="breakout-room-item__wrapper">
<NcButton type="tertiary-no-background"
:aria-label="toggleParticipantsListLabel"
@focus="elementHoveredOrFocused = true"
@blur="elementHoveredOrFocused = false"
@click="toggleParticipantsVisibility">
<template #icon>
<DotsCircle v-if="!elementHoveredOrFocused" :size="20" />
<MenuRight v-else-if="elementHoveredOrFocused && !showParticipants" :size="20" />
<MenuDown v-else-if="elementHoveredOrFocused && showParticipants" :size="20" />
<MenuRight v-else-if="!showParticipants" :size="20" />
<MenuDown v-else :size="20" />
</template>
</NcButton>
{{ roomName }}
<div class="breakout-room-item__actions">
<NcButton v-if="showJoinButton" @click="joinRoom">
{{ t('spreed', 'Join') }}
</NcButton>
<NcActions v-if="canModerate" :force-menu="true">
<NcActionButton v-if="showAssistanceButton"
@click="dismissRequestAssistance">
<template #icon>
<HandBackLeft :size="16" />
</template>
{{ t('spreed', 'Dismiss request for assistance') }}
</NcActionButton>
<NcActionButton @click="openSendMessageForm">
<template #icon>
<Send :size="16" />
</template>
{{ t('spreed', 'Send message to room') }}
</NcActionButton>
</NcActions>
</div>
<!-- Send message dialog -->
<SendMessageDialog v-if="isDialogOpened"
:display-name="roomName"
:token="roomToken"
@close="closeSendMessageForm" />
</li>
<span class="breakout-room-item__room-name">
{{ roomName }}
</span>
<NcButton v-if="showJoinButton" @click="joinRoom">
{{ t('spreed', 'Join') }}
</NcButton>
<NcActions v-if="canModerate" :force-menu="true">
<NcActionButton v-if="showAssistanceButton"
@click="dismissRequestAssistance">
<template #icon>
<HandBackLeft :size="16" />
</template>
{{ t('spreed', 'Dismiss request for assistance') }}
</NcActionButton>
<NcActionButton @click="openSendMessageForm">
<template #icon>
<Send :size="16" />
</template>
{{ t('spreed', 'Send message to room') }}
</NcActionButton>
</NcActions>
</div>
<ul v-show="showParticipants">
<template v-for="participant in roomParticipants">
<Participant :key="participant.actorId" :participant="participant" />
</template>
</ul>
</Fragment>
<!-- Send message dialog -->
<SendMessageDialog v-if="isDialogOpened"
:display-name="roomName"
:token="roomToken"
@close="closeSendMessageForm" />
</li>
</template>

<script>
import { Fragment } from 'vue-frag'

import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
import MenuDown from 'vue-material-design-icons/MenuDown.vue'
Expand All @@ -97,19 +96,18 @@ export default {

components: {
// Components
Participant,
NcActionButton,
SendMessageDialog,
NcButton,
NcActions,
Fragment,
NcButton,
Participant,
SendMessageDialog,

// Icons
DotsCircle,
HandBackLeft,
Send,
MenuRight,
MenuDown,
MenuRight,
Send,
},

props: {
Expand Down Expand Up @@ -163,6 +161,12 @@ export default {
showAssistanceButton() {
return this.canModerate && this.breakoutRoom.breakoutRoomStatus === CONVERSATION.BREAKOUT_ROOM_STATUS.STATUS_ASSISTANCE_REQUESTED
},

toggleParticipantsListLabel() {
return this.showParticipants
? t('spreed', 'Hide list of participants')
: t('spreed', 'Show list of participants')
},
},

watch: {
Expand Down Expand Up @@ -219,16 +223,17 @@ export default {

<style lang="scss" scoped>
.breakout-room-item {
font-weight: bold;
display: flex;
align-items: center;
margin-top: calc(var(--default-grid-baseline)*5);
gap: var(--default-grid-baseline);
font-weight: bold;

&__actions {
margin-left: auto;
&__wrapper {
display: flex;
align-items: center;
gap: var(--default-grid-baseline);
}

&__room-name {
margin-right: auto;
}
}
</style>