Merge pull request #17 from GetStream/a11y

fix(aria): adjust styles for divs to buttons. display options on focus

Author: petyosi

src/styles/ChannelListMessenger.scss

@@ -3,3 +3,7 @@
   min-width: 300px;
   background: var(--grey-gainsboro);
 }
+
+.str-chat-channel-list .str-chat__channel-list-messenger__main {
+  padding-bottom: 4px;
+}

src/styles/ChannelSearch.scss

@@ -81,7 +81,7 @@
   }
 
   &-container.inline {
-    top: 60px;
+    top: 64px;
     right: 0;
     background: var(--grey-gainsboro);
     height: calc(100vh - 60px);

src/styles/EditMessageForm.scss

@@ -106,3 +106,7 @@
     }
   }
 }
+
+.str-chat__edit-message-form {
+  position: relative;
+}

src/styles/LoadMoreButton.scss

@@ -36,3 +36,8 @@
     }
   }
 }
+
+.str-chat__load-more-button__button {
+  display: flex;
+  justify-content: center;
+}

src/styles/MessageActions.scss

@@ -89,3 +89,15 @@
 .str-chat__message-actions-options:hover svg {
   fill: var(--primary-color);
 }
+
+.str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--thread {
+  display: flex;
+}
+
+.str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--reactions {
+  display: flex;
+}
+
+.str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--options {
+  display: flex;
+}

src/styles/MessageInput.scss

@@ -167,6 +167,7 @@
 .rta__entity--selected {
   background-color: var(--primary-color);
   color: var(--white);
+  width: 100%;
 }
 
 // Using separate rules for Angular so React SDK integrators don't have problems with "!important"
@@ -208,6 +209,13 @@
 .str-chat__slash-command {
   padding: var(--xs-p) var(--sm-p);
   font-size: var(--md-font);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  br {
+    display: none;
+  }
 
   &-description {
     font-size: var(--sm-font);

src/styles/Modal.scss

@@ -65,3 +65,9 @@
     }
   }
 }
+
+.str-chat__exit {
+  display: flex;
+  width: 86px;
+  justify-content: space-between;
+}

src/styles/_base.scss

@@ -15,6 +15,16 @@
   clear: both;
 }
 
+button {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  width: auto;
+}
+
 .messenger-chat {
   &.str-chat {
     display: flex;