Merge pull request #7192 from KDSBrowne/2.2-High-contrast-outline

Adds outline to elements for high contrast themes (windows)
2019-05-07 11:02:01 -04:00 · 2019-05-07 11:02:01 -04:00 · e56a3d5364
commit e56a3d5364
parent be5ccc2abd 128e0b9cec
30 changed files with 212 additions and 61 deletions
--- a/bigbluebutton-html5/imports/ui/components/app/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/app/styles.scss
@ -2,6 +2,7 @@
@import "/imports/ui/stylesheets/variables/general";
@import "/imports/ui/stylesheets/variables/palette";
@import "/imports/ui/stylesheets/variables/typography";
+@import '/imports/ui/stylesheets/mixins/_indicators';

 :root {
  --navbar-height: 63px; // TODO: Change to NavBar real height
@ -100,7 +101,8 @@
 .userList {
  @extend %full-page;
  @extend %text-elipsis;
-
+  @include highContrastOutline();
+  outline-style: solid;
  z-index: 2;
  overflow: visible;
  order: 1;
@ -133,7 +135,8 @@
 .note,
 .chat {
  @extend %full-page;
-
+  @include highContrastOutline();
+  outline-style: solid;
  order: 2;
  height: 100%;
  @include mq($small-only) {
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss
@ -1,4 +1,5 @@
@import "/imports/ui/stylesheets/variables/_all";
+@import '/imports/ui/stylesheets/mixins/_indicators';

 .col,
 .formWrapper{
@ -37,8 +38,6 @@
  }

  &.spacedLeft {
-	// @extend .spaced;
-
    label {
      flex-grow: 1;
      flex-basis: 0;
@ -89,8 +88,16 @@
  border-radius: .125rem;
  color: var(--color-text);
  width: 100%;
-  // appearance: none;
  padding: .4rem;
+
+  &:hover {
+    @include highContrastOutline();
+  }
+
+  &:focus {
+    @include highContrastOutline();
+    outline-style: solid;
+  }
 }

 .audioMeter {
--- a/bigbluebutton-html5/imports/ui/components/button/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/button/styles.scss
@ -1,4 +1,5 @@
@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/mixins/_indicators";

 /* Base
 * ==========
@ -62,17 +63,18 @@

  &:hover,
  &:focus {
+    @include highContrastOutline();
    text-decoration: none;
-    outline-color: transparent;
-    outline-width: 2px;
-    outline-style: dotted;
+  }
+
+  &:active,
+  &:focus {
+    @include highContrastOutline();
+    outline-style: solid;
  }

  &:active {
    background-image: none;
-    outline-color: transparent;
-    outline-width: 2px;
-    outline-style: dotted;
  }

  &[aria-disabled="true"] {
@ -101,17 +103,21 @@
    outline: none;
  }

-  &:focus {
-    outline-color: transparent;
-    outline-width: 2px;
-    outline-style: dotted;
+  &:focus,
+  &:hover {
+    @include highContrastOutline();
+  }
+
+  &:focus {
+    outline-style: solid;
  }

-  &,
  &:active {
    &:focus {
      span:first-of-type::before {
        border-radius: 50%;
+        @include highContrastOutline();
+        outline-style: solid;
      }
    }
  }
--- a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
@ -1,4 +1,5 @@
@import "/imports/ui/stylesheets/mixins/focus";
+@import "/imports/ui/stylesheets/mixins/_indicators";
@import "/imports/ui/stylesheets/variables/_all";

 .form {
@ -56,7 +57,6 @@
  margin: 0;
  color: var(--color-text);
  -webkit-appearance: none;
-  outline: 0;
  padding: calc(var(--sm-padding-y) * 2.5) calc(var(--sm-padding-x) * 1.25);
  resize: none;
  transition: none;
@ -73,6 +73,16 @@
    opacity: .75;
    background-color: rgba(167,179,189,0.25);
  }
+
+  &:hover {
+    @include highContrastOutline();
+  }
+
+  &:active,
+  &:focus {
+    @include highContrastOutline();
+    outline-style: solid;
+  }
 }

 .sendButton {
--- a/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss
@ -18,6 +18,9 @@
  display: flex;
  flex-flow: row;
  flex: 1;
+  position: relative;
+  margin-left: var(--border-size);
+  margin-top: var(--border-size);
 }

 .systemMessage {
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
@ -1,4 +1,5 @@
@import "/imports/ui/stylesheets/variables/_all";
+@import '/imports/ui/stylesheets/mixins/_indicators';

 %list {
  list-style: none;
@ -75,8 +76,8 @@

  &:hover,
  &:focus {
+    @include highContrastOutline();
    cursor: pointer;
-    outline: none;
    background-color: var(--color-primary);
    color: var(--color-white);

@ -116,6 +117,7 @@

  &:focus {
    box-shadow: 0 0 0 2px var(--color-white), 0 0 2px 4px rgba(var(--color-primary), .4);
+    outline-style: solid;
  }
 }

--- a/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss
@ -1,5 +1,6 @@
@import "/imports/ui/stylesheets/variables/_all";
@import "/imports/ui/stylesheets/mixins/_scrollable";
+@import "/imports/ui/stylesheets/mixins/_indicators";

 :root {
  --dropdown-bg: var(--color-white);
@ -19,6 +20,8 @@
 }

 .content {
+  @include highContrastOutline();
+  outline-style: solid;
  z-index: 9999;
  position: absolute;
  background: var(--dropdown-bg);
--- a/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss
@ -9,7 +9,6 @@
  border-radius: var(--border-radius);
  background: #fff;
  overflow: auto;
-  outline: none;

  @include mq($small-only) {
    max-width: 95vw;
--- a/bigbluebutton-html5/imports/ui/components/modal/fullscreen/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/modal/fullscreen/styles.scss
@ -1,11 +1,14 @@
@import "../../../stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/mixins/_indicators";

 .modal {
+  @include highContrastOutline();
+  outline-style: solid;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  padding: calc(var(--line-height-computed) / 2) var(--line-height-computed);
-  outline: none;
+
  @include mq($small-only) {
    width: 100%;
    height: 100%;
--- a/bigbluebutton-html5/imports/ui/components/modal/simple/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/modal/simple/styles.scss
@ -1,11 +1,15 @@
@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/mixins/_indicators";
@import "../base/styles";

 .modal {
+  @include highContrastOutline();
+  outline-style: solid;
  display: flex;
  flex-direction: column;
  padding: calc(var(--line-height-computed) / 2) var(--line-height-computed);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
+  background-color: var(--color-white) !important;
 }

 .content {
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx
@ -65,7 +65,7 @@ class RecordingIndicator extends React.PureComponent {
    const showButton = amIModerator && allowStartStopRecording;

    return (
-      <div>
+      <div className={styles.recordingIndicator}>
        {showButton ? (
          <Tooltip
            title={buttonTitle}
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
@ -1,4 +1,5 @@
@import "../../../stylesheets/variables/_all";
+@import '/imports/ui/stylesheets/mixins/_indicators';
@import "../../../stylesheets/variables/typography";

 .visuallyHidden {
@ -48,7 +49,7 @@
  @extend %recordingControl;

  padding: 7px;
-  border: 1px solid var(--color-white);
+  border: var(--border-size-small) solid var(--color-white);
  
  &:focus {
    padding: 5px;
@ -85,7 +86,7 @@
 }

 %recordingIndicator {
-  border: 1px solid var(--color-white) !important;
+  border: var(--border-size-small) solid var(--color-white) !important;
  border-radius: 50%;
  span {
    border: none;
@ -114,6 +115,7 @@
 .recordingIndicatorON {
  @extend %recordingIndicator;
  &:after {
+    border: var(--border-size) solid transparent;
    background-color: var(--color-danger);
  }
 }
@ -126,7 +128,7 @@
 }

 .isRecordingCircle {
-  border: 1px solid var(--color-white) !important;
+  border: var(--border-size-small) solid var(--color-white) !important;
  border-radius: 50%;
  span {
    border: none;
@ -135,3 +137,15 @@
  }
 }

+.recordingIndicator {
+  &:hover {
+    @include highContrastOutline();
+  }
+
+  &:active,
+  &:focus,
+  &:focus-within {
+    @include highContrastOutline();
+    outline-style: solid;
+  }
+}
--- a/bigbluebutton-html5/imports/ui/components/poll/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/poll/styles.scss
@ -1,5 +1,6 @@
@import "/imports/ui/stylesheets/variables/_all";
@import "/imports/ui/stylesheets/mixins/focus";
+@import "/imports/ui/stylesheets/mixins/_indicators";

 :root {
    --poll-column-amount: 2;
@ -153,8 +154,16 @@

 .input {
    @include inputFocus(var(--color-blue-light));
+ 
+    &:hover,
+    &:focus {
+        @include highContrastOutline();
+    }

-    outline: 0;
+    &:focus {
+        outline-style: solid !important;
+    }
+    
    margin: 0;
    color: var(--color-text);
    background: var(--color-white);
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
@ -325,7 +325,7 @@ class PresentationToolbar extends Component {
                : intl.formatMessage(intlMessages.fitToWidth)
              }
              hideLabel
-              className={cx(styles.skipSlide, styles.presentationBtn)}
+              className={cx(styles.fitToWidth, styles.presentationBtn)}
              tooltipDistance={tooltipDistance}
            />
            {
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
@ -1,4 +1,11 @@
@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/mixins/_indicators";
+
+:root {
+  --whiteboard-toolbar-padding-sm: .3rem; 
+  --whiteboard-toolbar-padding: .5rem; 
+  --whiteboard-toolbar-margin: .5rem; 
+}

 .visuallyhidden {
  position: absolute;
@ -13,8 +20,8 @@

 .presentationSlideControls {
  justify-content: center;
-  padding-left: .5rem;
-  padding-right: .5rem;
+  padding-left: var(--whiteboard-toolbar-padding);
+  padding-right: var(--whiteboard-toolbar-padding);
 }

 .presentationBtn {
@ -23,7 +30,7 @@

 .presentationZoomControls {
  justify-content: flex-end;
-  padding-right: .5rem;
+  padding-right: var(--whiteboard-toolbar-padding);
 }

 .presentationSlideControls,
@ -39,7 +46,7 @@
 .presentationZoomControls,
 .zoomWrapper {
  button {
-    padding: .5rem;
+    padding: var(--whiteboard-toolbar-padding);
  }
 }

@ -55,12 +62,13 @@
  grid-template-columns: 1fr 1fr 1fr;

  select {
-    margin-right: .5rem;
-    padding: .5rem .5rem .5rem .3rem;
+    &:-moz-focusring {
+      outline: none;
+    }

-    outline-color: transparent;
-    outline-style: none;
-    outline: none;
+    margin-right: var(--whiteboard-toolbar-margin);
+    padding: var(--whiteboard-toolbar-padding);
+    padding-left: var(--whiteboard-toolbar-padding-sm);

    option {
      color: var(--toolbar-button-color);
@ -103,6 +111,7 @@
  border-right: 0 !important;
 }

+.fitToWidth,
 .skipSlide,
 .prevSlide {
  border: none !important;
@ -112,8 +121,13 @@
  }
 }

-.presentationZoomControls {
+.fitToWidth {
+  margin-left: var(--whiteboard-toolbar-margin);
+  margin-right: var(--whiteboard-toolbar-margin);
+}

+.presentationZoomControls {
+  .fitToWidth,
  .skipSlide,
  .prevSlide {
    i {
@ -124,6 +138,21 @@

 .skipSlideSelect {
  padding: 0 var(--sm-padding-y);
+  margin: var(--border-size);
+  margin-left: var(--whiteboard-toolbar-margin);
+
+  &:-moz-focusring {
+    outline: none;
+  }
+  
+  &:hover {
+    @include highContrastOutline();
+  }
+
+  &:focus {
+    @include highContrastOutline();
+    outline-style: solid;
+  }
 }

 .zoomSlider {
@ -142,8 +171,10 @@
  justify-content: center;
  border: 0 !important;
  font-weight: 200;
+  margin-left: var(--whiteboard-toolbar-margin);
+  margin-right: var(--whiteboard-toolbar-margin);

  &:hover {
    opacity: .8;
  }
-}
+}
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.scss
@ -1,4 +1,5 @@
@import '/imports/ui/stylesheets/mixins/focus';
+@import '/imports/ui/stylesheets/mixins/_indicators';
@import '/imports/ui/stylesheets/variables/_all';

 .title {
@ -68,6 +69,15 @@
  width: 100%;
  height: 1.75rem;
  padding: 1px;
+
+  &:hover {
+    @include highContrastOutline();
+  }
+
+  &:focus {
+    @include highContrastOutline();
+    outline-style: solid;
+  }
 }

 .pullContentRight {
--- a/bigbluebutton-html5/imports/ui/components/switch/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/switch/component.jsx
@ -1,7 +1,9 @@
 import React from 'react';
 import Toggle from 'react-toggle';
 import classNames from 'classnames';
+import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
+import { styles } from './styles';

 const intlMessages = defineMessages({
  on: {
@ -35,7 +37,7 @@ class Switch extends Toggle {

    return (
      <div
-        className={classes}
+        className={cx(classes, styles.switch)}
        onClick={this.handleClick}
        onTouchStart={this.handleTouchStart}
        onTouchMove={this.handleTouchMove}
--- a/bigbluebutton-html5/imports/ui/components/switch/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/switch/styles.scss
@ -0,0 +1,13 @@
+@import '/imports/ui/stylesheets/mixins/_indicators';
+
+.switch {
+    &:hover {
+        @include highContrastOutline();
+    }
+
+    &:focus,
+    &:focus-within {
+        @include highContrastOutline();
+        outline-style: solid;
+    }
+}
--- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
@ -16,13 +16,11 @@

 .avatar {
  position: relative;
-  width: 100%;
-  height: 0;
-  padding-bottom: 100%;
+  padding-bottom: 2rem;
  border-radius: 50%;
  text-align: center;
-  text-transform: capitalize;
  font-size: .85rem;
+  border: 2px solid transparent;

  :global(.animationsEnabled) & {
    transition: .3s ease-in-out;
--- a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/chat-icon/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/chat-icon/styles.scss
@ -1,4 +1,5 @@
@import "/imports/ui/components/user-list/styles.scss";
+@import "/imports/ui/stylesheets/mixins/_indicators";

 .chatThumbnail {
  @extend %flex-column;
@ -8,5 +9,7 @@
 }

 .chatIcon {
+  @include highContrastOutline();
+  outline-style: solid;
  flex: 0 0 2.2rem;
 }
--- a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss
@ -1,6 +1,7 @@
@import "../styles.scss";
@import "/imports/ui/stylesheets/variables/_all";
@import "/imports/ui/stylesheets/variables/typography";
+@import "/imports/ui/stylesheets/mixins/_indicators";

 .chatListItem {
  @extend %list-item;
@ -13,6 +14,9 @@
  padding-top: var(--lg-padding-y);
  padding-bottom: var(--lg-padding-y);
  padding-left: var(--lg-padding-y);
+  margin-left: var(--border-size);
+  margin-top: var(--border-size);
+  margin-bottom: var(--border-size);
 }

 .chatListItemLink {
@ -50,5 +54,4 @@
 .active {
  background-color: var(--list-item-bg-hover);
  box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border);
-  outline: none;
 }
--- a/bigbluebutton-html5/imports/ui/components/user-list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/styles.scss
@ -1,5 +1,6 @@
@import "/imports/ui/stylesheets/variables/_all";
@import "/imports/ui/stylesheets/mixins/_scrollable";
+@import "/imports/ui/stylesheets/mixins/_indicators";

 /* Variables
 * ==========
@ -48,22 +49,21 @@
  border-bottom-left-radius: 5px;
  cursor: pointer;

-  :global(.animationsEnabled) & {
-    transition: all .3s;
-  }
-
  &:first-child {
    margin-top: 0;
  }

-  &:focus {
+  &:hover {
+    @include highContrastOutline();
    background-color: var(--list-item-bg-hover);
-    box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border);
-    outline: none;
  }

-  &:hover {
+  &:active,
+  &:focus {
+    @include highContrastOutline();
+    outline-style: solid;
    background-color: var(--list-item-bg-hover);
+    box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border);
  }
 }

@ -84,9 +84,15 @@
  @extend %flex-column;
  @extend %no-margin;
  padding: 0;
+  padding-top: var(--border-size);
  outline: none;
 }

+.participantsList {
+  padding-left: var(--border-size);
+  padding-bottom: var(--border-size);
+}
+
 .participantsList,
 .chatsList {
  @extend .lists;
--- 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
@ -4,7 +4,6 @@
@import "/imports/ui/stylesheets/variables/_all";
@import "/imports/ui/stylesheets/variables/typography";

-
 .smallTitle {
  @extend .smallTitle;
  margin-bottom: var(--lg-padding-y);
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss
@ -1,6 +1,7 @@
@import "/imports/ui/components/user-list/styles.scss";
@import "/imports/ui/stylesheets/mixins/_scrollable";
@import "/imports/ui/stylesheets/mixins/focus";
+@import "/imports/ui/stylesheets/mixins/_indicators";
@import "/imports/ui/stylesheets/variables/_all";

 .content {
@ -19,11 +20,20 @@
 .scrollableList {
  @include elementFocus(var(--list-item-bg-hover));
  @include scrollbox-vertical(var(--user-list-bg));
+  @include highContrastOutline();
+
+  &:focus-within,
+  &:focus {
+    outline-style: solid;
+  }

  &:active {
    box-shadow: none;
    border-radius: none;
  }
+
+  outline-width: 1px !important;
+  outline-color: transparent !important;
 }

 .list {
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-notes/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-notes/styles.scss
@ -14,13 +14,11 @@

 .scrollableList {
  margin-left: var(--md-padding-y);
-  outline: none;
 }

 .noteLink {
  @extend %list-item;
  align-items: center;
-
  cursor: pointer;
  display: flex;
  flex-flow: row;
@ -56,6 +54,5 @@
  &:active {
    background-color: var(--list-item-bg-hover);
    box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border);
-    outline: none;
  }
 }
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss
@ -1,5 +1,6 @@
@import "/imports/ui/components/user-list/styles.scss";
@import "/imports/ui/stylesheets/variables/_all";
+@import '/imports/ui/stylesheets/mixins/_indicators';

 /* Animations
 * ==========
@ -80,15 +81,20 @@
 .active {
  background-color: var(--list-item-bg-hover);
  box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border);
-  outline: none;
 }

 .usertListItemWithMenu {
+  @include highContrastOutline();
+  outline-style: solid;
  background-color: var(--list-item-bg-hover);
+
+  &:focus {
+    outline-style: solid;
+    outline-color: transparent !important;
+  }
 }

 .userListItem {
-
  @extend %list-item;
  flex-flow: column;
  flex-shrink: 0;
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-polls/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-polls/styles.scss
@ -1,7 +1,6 @@
@import "../../styles.scss";
@import "/imports/ui/stylesheets/variables/_all";

-
 $list-item-bg-hover: darken(#F3F6F9, 7%);
 $item-focus-border: #92BCEA;

@ -18,12 +17,10 @@ $item-focus-border: #92BCEA;
 .scrollableList {
    margin-left: 0.45rem;
    margin-bottom: 1px;
-    outline: none;
 }

 .pollLink {
    @extend %list-item;
-
    cursor: pointer;
    display: flex;
    flex-flow: row;
@ -59,6 +56,5 @@ $item-focus-border: #92BCEA;
    &:active {
        background-color: $list-item-bg-hover;
        box-shadow: inset 0 0 0 var(--border-size) $item-focus-border, inset 1px 0 0 1px $item-focus-border;
-        outline: none;
    }
 }
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.scss
@ -14,6 +14,7 @@
  --toolbar-list-bg: #ddd;
  --toolbar-list-bg-focus: #c6c6c6;
  --toolbar-list-color: var(--color-gray);
+  --toolbar-item-outline-offset: -.19rem;
 }

 .toolbarContainer {
@ -44,6 +45,7 @@
  pointer-events: all;

  .buttonWrapper > .toolbarButton {
+    outline-offset: var(--toolbar-item-outline-offset);
    border-bottom: var(--toolbar-button-border) solid var(--toolbar-button-border-color);
  }

@ -140,6 +142,7 @@
  box-shadow: none;
  border-radius: 0;
  padding: initial;
+  outline-offset: var(--toolbar-item-outline-offset);

  &:hover,
  &:focus {
--- a/bigbluebutton-html5/imports/ui/stylesheets/mixins/_indicators.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/mixins/_indicators.scss
@ -39,3 +39,10 @@
    padding-bottom: var(--indicator-padding-bottom);
  }
 }
+
+@mixin highContrastOutline() {
+  /* Visible in Windows high-contrast themes */
+  outline: transparent;
+  outline-style: dotted;
+  outline-width: 2px;
+}
--- a/bigbluebutton-html5/imports/ui/stylesheets/mixins/_scrollable.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/mixins/_scrollable.scss
@ -12,6 +12,10 @@
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;

+  :global(.browser-edge) & {
+    background: none;
+  }
+
 	// Fancy scroll
  &::-webkit-scrollbar {
    width: 5px;