From 0db31dfeaeb656418c5f2690eb73a3b13ded285c Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 22 Mar 2021 15:05:22 +0000
Subject: [PATCH] fix: CIDER formatting buttons on Safari

---
 res/css/views/rooms/_MessageComposerFormatBar.scss     | 2 ++
 src/components/views/rooms/MessageComposerFormatBar.js | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss
index d97c49630a..b305e91db0 100644
--- a/res/css/views/rooms/_MessageComposerFormatBar.scss
+++ b/res/css/views/rooms/_MessageComposerFormatBar.scss
@@ -60,6 +60,8 @@ limitations under the License.
         width: 27px;
         height: 24px;
         box-sizing: border-box;
+        background: none;
+        vertical-align: middle;
     }
 
     .mx_MessageComposerFormatBar_button::after {
diff --git a/src/components/views/rooms/MessageComposerFormatBar.js b/src/components/views/rooms/MessageComposerFormatBar.js
index d2539b1ef4..fc0f785b08 100644
--- a/src/components/views/rooms/MessageComposerFormatBar.js
+++ b/src/components/views/rooms/MessageComposerFormatBar.js
@@ -85,8 +85,8 @@ class FormatButton extends React.PureComponent {
 
         return (
             <AccessibleTooltipButton
-                as="span"
-                role="button"
+                element="button"
+                type="button"
                 onClick={this.props.onClick}
                 title={this.props.label}
                 tooltip={tooltip}