From b2d905ef2c7c53ba4f07e442a6414c1a7c0976be Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sun, 29 Mar 2020 20:07:32 +0100
Subject: [PATCH] Make FormatButton use AccessibleButtons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/rooms/MessageComposerFormatBar.js      | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/views/rooms/MessageComposerFormatBar.js b/src/components/views/rooms/MessageComposerFormatBar.js
index 79ae9f34e8..42d54f5987 100644
--- a/src/components/views/rooms/MessageComposerFormatBar.js
+++ b/src/components/views/rooms/MessageComposerFormatBar.js
@@ -19,12 +19,13 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import classNames from 'classnames';
+import AccessibleButton from "../elements/AccessibleButton";
 
 export default class MessageComposerFormatBar extends React.PureComponent {
     static propTypes = {
         onAction: PropTypes.func.isRequired,
         shortcuts: PropTypes.object.isRequired,
-    }
+    };
 
     constructor(props) {
         super(props);
@@ -64,7 +65,7 @@ class FormatButton extends React.PureComponent {
         icon: PropTypes.string.isRequired,
         shortcut: PropTypes.string,
         visible: PropTypes.bool,
-    }
+    };
 
     render() {
         const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip');
@@ -82,11 +83,12 @@ class FormatButton extends React.PureComponent {
 
         return (
             <InteractiveTooltip content={tooltipContent} forceHidden={!this.props.visible}>
-                <span aria-label={this.props.label}
-                   role="button"
-                   onClick={this.props.onClick}
-                   className={className}>
-                </span>
+                <AccessibleButton
+                    as="span"
+                    role="button"
+                    onClick={this.props.onClick}
+                    aria-label={this.props.label}
+                    className={className} />
             </InteractiveTooltip>
         );
     }