diff --git a/src/accessibility/Toolbar.tsx b/src/accessibility/Toolbar.tsx index 3b5fbb0943..a606f9aae8 100644 --- a/src/accessibility/Toolbar.tsx +++ b/src/accessibility/Toolbar.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; +import React, { forwardRef } from "react"; import { RovingTabIndexProvider } from "./RovingTabIndex"; import { getKeyBindingsManager } from "../KeyBindingsManager"; @@ -25,7 +25,7 @@ interface IProps extends Omit, "onKeyDown"> {} // This component implements the Toolbar design pattern from the WAI-ARIA Authoring Practices guidelines. // https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar // All buttons passed in children must use RovingTabIndex to set `onFocus`, `isActive`, `ref` -const Toolbar: React.FC = ({ children, ...props }) => { +const Toolbar = forwardRef(({ children, ...props }, ref) => { const onKeyDown = (ev: React.KeyboardEvent): void => { const target = ev.target as HTMLElement; // Don't interfere with input default keydown behaviour @@ -56,12 +56,12 @@ const Toolbar: React.FC = ({ children, ...props }) => { return ( {({ onKeyDownHandler }) => ( -
+
{children}
)} ); -}; +}); export default Toolbar; diff --git a/src/components/views/rooms/MessageComposerFormatBar.tsx b/src/components/views/rooms/MessageComposerFormatBar.tsx index 3a84f660ff..e1a2f9d4bd 100644 --- a/src/components/views/rooms/MessageComposerFormatBar.tsx +++ b/src/components/views/rooms/MessageComposerFormatBar.tsx @@ -18,7 +18,8 @@ import React, { createRef } from "react"; import classNames from "classnames"; import { _t } from "../../../languageHandler"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; +import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex"; +import Toolbar from "../../../accessibility/Toolbar"; export enum Formatting { Bold = "bold", @@ -51,7 +52,7 @@ export default class MessageComposerFormatBar extends React.PureComponent + this.props.onAction(Formatting.Bold)} @@ -93,7 +94,7 @@ export default class MessageComposerFormatBar extends React.PureComponent -
+ ); } @@ -140,7 +141,7 @@ class FormatButton extends React.PureComponent { // 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 ( - @@ -706,7 +708,9 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t class="mx_BasicMessageComposer" >