Add Element Call room settings (#9347)

Co-authored-by: Robin <robin@robin.town>

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -21,7 +21,7 @@ import AccessibleButton from "./AccessibleButton";
 import Tooltip, { Alignment } from './Tooltip';
 
 interface IProps extends React.ComponentProps<typeof AccessibleButton> {
-    title: string;
+    title?: string;
     tooltip?: React.ReactNode;
     label?: string;
     tooltipClassName?: string;
@@ -78,7 +78,7 @@ export default class AccessibleTooltipButton extends React.PureComponent<IProps,
         const { title, tooltip, children, tooltipClassName, forceHide, alignment, onHideTooltip,
             ...props } = this.props;
 
-        const tip = this.state.hover && <Tooltip
+        const tip = this.state.hover && (title || tooltip) && <Tooltip
             tooltipClassName={tooltipClassName}
             label={tooltip || title}
             alignment={alignment}
@@ -86,11 +86,11 @@ export default class AccessibleTooltipButton extends React.PureComponent<IProps,
         return (
             <AccessibleButton
                 {...props}
-                onMouseOver={this.showTooltip}
-                onMouseLeave={this.hideTooltip}
-                onFocus={this.onFocus}
-                onBlur={this.hideTooltip}
-                aria-label={title}
+                onMouseOver={this.showTooltip || props.onMouseOver}
+                onMouseLeave={this.hideTooltip || props.onMouseLeave}
+                onFocus={this.onFocus || props.onFocus}
+                onBlur={this.hideTooltip || props.onBlur}
+                aria-label={title || props["aria-label"]}
             >
                 { children }
                 { this.props.label }

src/components/views/elements/LabelledToggleSwitch.tsx

@@ -27,6 +27,8 @@ interface IProps {
     label: string;
     // The translated caption for the switch
     caption?: string;
+    // Tooltip to display
+    tooltip?: string;
     // Whether or not to disable the toggle switch
     disabled?: boolean;
     // True to put the toggle in front of the label
@@ -53,7 +55,8 @@ export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
             checked={this.props.value}
             disabled={this.props.disabled}
             onChange={this.props.onChange}
-            aria-label={this.props.label}
+            title={this.props.label}
+            tooltip={this.props.tooltip}
         />;
 
         if (this.props.toggleInFront) {
@@ -66,7 +69,7 @@ export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
             "mx_SettingsFlag_toggleInFront": this.props.toggleInFront,
         });
         return (
-            <div className={classes}>
+            <div data-testid={this.props["data-testid"]} className={classes}>
                 { firstPart }
                 { secondPart }
             </div>

src/components/views/elements/SettingsFlag.tsx

@@ -114,7 +114,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                         checked={this.state.value}
                         onChange={this.onChange}
                         disabled={this.props.disabled || !canChange}
-                        aria-label={label}
+                        title={label}
                     />
                 </div>
             );

src/components/views/elements/ToggleSwitch.tsx

@@ -18,21 +18,27 @@ limitations under the License.
 import React from "react";
 import classNames from "classnames";
 
-import AccessibleButton from "./AccessibleButton";
+import AccessibleTooltipButton from "./AccessibleTooltipButton";
 
 interface IProps {
     // Whether or not this toggle is in the 'on' position.
     checked: boolean;
 
+    // Title to use
+    title?: string;
+
     // Whether or not the user can interact with the switch
     disabled?: boolean;
 
+    // Tooltip to show
+    tooltip?: string;
+
     // Called when the checked state changes. First argument will be the new state.
     onChange(checked: boolean): void;
 }
 
 // Controlled Toggle Switch element, written with Accessibility in mind
-export default ({ checked, disabled = false, onChange, ...props }: IProps) => {
+export default ({ checked, disabled = false, title, tooltip, onChange, ...props }: IProps) => {
     const _onClick = () => {
         if (disabled) return;
         onChange(!checked);
@@ -45,14 +51,16 @@ export default ({ checked, disabled = false, onChange, ...props }: IProps) => {
     });
 
     return (
-        <AccessibleButton {...props}
+        <AccessibleTooltipButton {...props}
             className={classes}
             onClick={_onClick}
             role="switch"
             aria-checked={checked}
             aria-disabled={disabled}
+            title={title}
+            tooltip={tooltip}
         >
             <div className="mx_ToggleSwitch_ball" />
-        </AccessibleButton>
+        </AccessibleTooltipButton>
     );
 };