Fix composer format buttons on WebKit (#7898)

Author: robintown

res/css/views/rooms/_MessageComposerFormatBar.scss

@@ -37,19 +37,21 @@ limitations under the License.
         display: inline-block;
         position: relative;
         margin: 2px;
-
-        &:hover {
-            background: $panel-actions;
-            border-radius: 6px;
-            z-index: 1;
-        }
     }
 
     .mx_MessageComposerFormatBar_button {
         width: 28px;
         height: 28px;
         box-sizing: border-box;
         vertical-align: middle;
+        background: none;
+        border: none;
+
+        &:hover {
+            background: $panel-actions;
+            border-radius: 6px;
+            z-index: 1;
+        }
     }
 
     .mx_MessageComposerFormatBar_button::after {

src/components/views/rooms/MessageComposerFormatBar.tsx

@@ -103,8 +103,12 @@ class FormatButton extends React.PureComponent<IFormatButtonProps> {
             </div>
         </div>;
 
+        // element="button" and type="button" are necessary for the buttons to work on WebKit,
+        // otherwise the text is deselected before onClick can ever be called
         return (
             <AccessibleTooltipButton
+                element="button"
+                type="button"
                 onClick={this.props.onClick}
                 title={this.props.label}
                 tooltip={tooltip}