From 2fbc0447acefa85b08dee80013eebafc85e35ca2 Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Sat, 29 Dec 2018 00:02:42 +0000
Subject: [PATCH] align breakoutroom icon / make element accessible
---
.../user-list-content/breakout-room/component.jsx | 12 +++++++++---
.../user-list-content/breakout-room/styles.scss | 1 +
2 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/component.jsx
index 57eeb2d6f7..f00639a132 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/component.jsx
@@ -26,12 +26,18 @@ const BreakoutRoomItem = ({
}) => {
if (hasBreakoutRoom) {
return (
- <div role="button" onClick={toggleBreakoutPanel}>
+ <div>
<h2 className={styles.smallTitle}>
{intl.formatMessage(intlMessages.breakoutTitle).toUpperCase()}
</h2>
- <div className={styles.BreakoutRoomsItem}>
- <div className={styles.BreakoutRoomsContents}>
+ <div
+ role="button"
+ tabIndex={0}
+ onClick={toggleBreakoutPanel}
+ className={styles.BreakoutRoomsItem}
+ aria-label={intl.formatMessage(intlMessages.breakoutTitle)}
+ >
+ <div className={styles.BreakoutRoomsContents} aria-hidden>
<div className={styles.BreakoutRoomsIcon}>
<Icon iconName="rooms" />
</div>
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/styles.scss
index e66b3a9432..76c1e6543f 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/styles.scss
@@ -40,6 +40,7 @@
.BreakoutRoomsItem {
@extend %list-item;
margin-left: 0.375rem;
+ padding-left: var(--lg-padding-y);
}
.link {
--
GitLab