Associate room alias warning with public option in settings (#7430)

* add describedby to styledradiogroup description

Signed-off-by: Kerry Archibald <kerrya@element.io>

* alias warning in description

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update snapshot

Signed-off-by: Kerry Archibald <kerrya@element.io>

src/components/views/elements/StyledRadioGroup.tsx

@@ -52,20 +52,25 @@ function StyledRadioGroup<T extends string>({
     };
 
     return <React.Fragment>
-        { definitions.map(d => <React.Fragment key={d.value}>
+        { definitions.map(d => {
-            <StyledRadioButton
+            const id = `${name}-${d.value}`;
-                className={classNames(className, d.className)}
+            return (<React.Fragment key={d.value}>
-                onChange={_onChange}
+                <StyledRadioButton
-                checked={d.checked !== undefined ? d.checked : d.value === value}
+                    id={id}
-                name={name}
+                    className={classNames(className, d.className)}
-                value={d.value}
+                    onChange={_onChange}
-                disabled={d.disabled ?? disabled}
+                    checked={d.checked !== undefined ? d.checked : d.value === value}
-                outlined={outlined}
+                    name={name}
-            >
+                    value={d.value}
-                { d.label }
+                    disabled={d.disabled ?? disabled}
-            </StyledRadioButton>
+                    outlined={outlined}
-            { d.description ? <span>{ d.description }</span> : null }
+                    aria-describedby={d.description ? `${id}-description` : undefined}
-        </React.Fragment>) }
+                >
+                    { d.label }
+                </StyledRadioButton>
+                { d.description ? <span id={`${id}-description`}>{ d.description }</span> : null }
+            </React.Fragment>);
+        }) }
     </React.Fragment>;
 }
 

src/components/views/settings/JoinRuleSettings.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, { ReactNode } from "react";
 import { IJoinRuleEventContent, JoinRule, RestrictedAllowType } from "matrix-js-sdk/src/@types/partials";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { EventType } from "matrix-js-sdk/src/@types/event";
@@ -40,9 +40,10 @@ interface IProps {
     closeSettingsFn(): void;
     onError(error: Error): void;
     beforeChange?(joinRule: JoinRule): Promise<boolean>; // if returns false then aborts the change
+    aliasWarning?: ReactNode;
 }
 
-const JoinRuleSettings = ({ room, promptUpgrade, onError, beforeChange, closeSettingsFn }: IProps) => {
+const JoinRuleSettings = ({ room, promptUpgrade, aliasWarning, onError, beforeChange, closeSettingsFn }: IProps) => {
     const cli = room.client;
 
     const restrictedRoomCapabilities = SpaceStore.instance.restrictedJoinRuleSupport;
@@ -90,7 +91,10 @@ const JoinRuleSettings = ({ room, promptUpgrade, onError, beforeChange, closeSet
     }, {
         value: JoinRule.Public,
         label: _t("Public"),
-        description: _t("Anyone can find and join."),
+        description: <>
+            { _t("Anyone can find and join.") }
+            { aliasWarning }
+        </>,
     }];
 
     if (roomSupportsRestricted || preferredRestrictionVersion || joinRule === JoinRule.Restricted) {

src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx

@@ -270,14 +270,13 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
         });
 
         return <SettingsFieldset legend={_t("Access")} description={description}>
-            { aliasWarning }
-
             <JoinRuleSettings
                 room={room}
                 beforeChange={this.onBeforeJoinRuleChange}
                 onError={this.onJoinRuleChangeError}
                 closeSettingsFn={this.props.closeSettingsFn}
                 promptUpgrade={true}
+                aliasWarning={aliasWarning}
             />
         </SettingsFieldset>;
     }

test/components/views/elements/StyledRadioGroup-test.tsx

@@ -0,0 +1,115 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import "../../../skinned-sdk";
+
+import React from 'react';
+import { mount } from 'enzyme';
+import { act } from "react-dom/test-utils";
+
+import StyledRadioGroup from "../../../../src/components/views/elements/StyledRadioGroup";
+
+describe('<StyledRadioGroup />', () => {
+    const optionA = {
+        value: 'Anteater',
+        label: <span>Anteater label</span>,
+        description: 'anteater description',
+        className: 'a-class',
+    };
+    const optionB = {
+        value: 'Badger',
+        label: <span>Badger label</span>,
+    };
+    const optionC = {
+        value: 'Canary',
+        label: <span>Canary label</span>,
+        description: <span>Canary description</span>,
+    };
+    const defaultDefinitions = [optionA, optionB, optionC];
+    const defaultProps = {
+        name: 'test',
+        className: 'test-class',
+        definitions: defaultDefinitions,
+        onChange: jest.fn(),
+    };
+    const getComponent = (props = {}) => mount(<StyledRadioGroup {...defaultProps} {...props} />);
+
+    const getInputByValue = (component, value) => component.find(`input[value="${value}"]`);
+    const getCheckedInput = component => component.find('input[checked=true]');
+
+    it('renders radios correctly when no value is provided', () => {
+        const component = getComponent();
+
+        expect(component).toMatchSnapshot();
+        expect(getCheckedInput(component).length).toBeFalsy();
+    });
+
+    it('selects correct button when value is provided', () => {
+        const component = getComponent({
+            value: optionC.value,
+        });
+
+        expect(getCheckedInput(component).at(0).props().value).toEqual(optionC.value);
+    });
+
+    it('selects correct buttons when definitions have checked prop', () => {
+        const definitions = [
+            { ...optionA, checked: true },
+            optionB,
+            { ...optionC, checked: false },
+        ];
+        const component = getComponent({
+            value: optionC.value, definitions,
+        });
+
+        expect(getInputByValue(component, optionA.value).props().checked).toBeTruthy();
+        expect(getInputByValue(component, optionB.value).props().checked).toBeFalsy();
+        // optionC.checked = false overrides value matching
+        expect(getInputByValue(component, optionC.value).props().checked).toBeFalsy();
+    });
+
+    it('disables individual buttons based on definition.disabled', () => {
+        const definitions = [
+            optionA,
+            { ...optionB, disabled: true },
+            { ...optionC, disabled: true },
+        ];
+        const component = getComponent({ definitions });
+        expect(getInputByValue(component, optionA.value).props().disabled).toBeFalsy();
+        expect(getInputByValue(component, optionB.value).props().disabled).toBeTruthy();
+        expect(getInputByValue(component, optionC.value).props().disabled).toBeTruthy();
+    });
+
+    it('disables all buttons with disabled prop', () => {
+        const component = getComponent({ disabled: true });
+        expect(getInputByValue(component, optionA.value).props().disabled).toBeTruthy();
+        expect(getInputByValue(component, optionB.value).props().disabled).toBeTruthy();
+        expect(getInputByValue(component, optionC.value).props().disabled).toBeTruthy();
+    });
+
+    it('calls onChange on click', () => {
+        const onChange = jest.fn();
+        const component = getComponent({
+            value: optionC.value,
+            onChange,
+        });
+
+        act(() => {
+            getInputByValue(component, optionB.value).simulate('change');
+        });
+
+        expect(onChange).toHaveBeenCalledWith(optionB.value);
+    });
+});

test/components/views/elements/__snapshots__/StyledRadioGroup-test.tsx.snap

@@ -0,0 +1,158 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<StyledRadioGroup /> renders radios correctly when no value is provided 1`] = `
+<StyledRadioGroup
+  className="test-class"
+  definitions={
+    Array [
+      Object {
+        "className": "a-class",
+        "description": "anteater description",
+        "label": <span>
+          Anteater label
+        </span>,
+        "value": "Anteater",
+      },
+      Object {
+        "label": <span>
+          Badger label
+        </span>,
+        "value": "Badger",
+      },
+      Object {
+        "description": <span>
+          Canary description
+        </span>,
+        "label": <span>
+          Canary label
+        </span>,
+        "value": "Canary",
+      },
+    ]
+  }
+  name="test"
+  onChange={[MockFunction]}
+>
+  <StyledRadioButton
+    aria-describedby="test-Anteater-description"
+    checked={false}
+    childrenInLabel={true}
+    className="test-class a-class"
+    id="test-Anteater"
+    name="test"
+    onChange={[Function]}
+    value="Anteater"
+  >
+    <label
+      className="mx_StyledRadioButton test-class a-class mx_StyledRadioButton_enabled"
+    >
+      <input
+        aria-describedby="test-Anteater-description"
+        checked={false}
+        id="test-Anteater"
+        name="test"
+        onChange={[Function]}
+        type="radio"
+        value="Anteater"
+      />
+      <div>
+        <div />
+      </div>
+      <div
+        className="mx_StyledRadioButton_content"
+      >
+        <span>
+          Anteater label
+        </span>
+      </div>
+      <div
+        className="mx_StyledRadioButton_spacer"
+      />
+    </label>
+  </StyledRadioButton>
+  <span
+    id="test-Anteater-description"
+  >
+    anteater description
+  </span>
+  <StyledRadioButton
+    checked={false}
+    childrenInLabel={true}
+    className="test-class"
+    id="test-Badger"
+    name="test"
+    onChange={[Function]}
+    value="Badger"
+  >
+    <label
+      className="mx_StyledRadioButton test-class mx_StyledRadioButton_enabled"
+    >
+      <input
+        checked={false}
+        id="test-Badger"
+        name="test"
+        onChange={[Function]}
+        type="radio"
+        value="Badger"
+      />
+      <div>
+        <div />
+      </div>
+      <div
+        className="mx_StyledRadioButton_content"
+      >
+        <span>
+          Badger label
+        </span>
+      </div>
+      <div
+        className="mx_StyledRadioButton_spacer"
+      />
+    </label>
+  </StyledRadioButton>
+  <StyledRadioButton
+    aria-describedby="test-Canary-description"
+    checked={false}
+    childrenInLabel={true}
+    className="test-class"
+    id="test-Canary"
+    name="test"
+    onChange={[Function]}
+    value="Canary"
+  >
+    <label
+      className="mx_StyledRadioButton test-class mx_StyledRadioButton_enabled"
+    >
+      <input
+        aria-describedby="test-Canary-description"
+        checked={false}
+        id="test-Canary"
+        name="test"
+        onChange={[Function]}
+        type="radio"
+        value="Canary"
+      />
+      <div>
+        <div />
+      </div>
+      <div
+        className="mx_StyledRadioButton_content"
+      >
+        <span>
+          Canary label
+        </span>
+      </div>
+      <div
+        className="mx_StyledRadioButton_spacer"
+      />
+    </label>
+  </StyledRadioButton>
+  <span
+    id="test-Canary-description"
+  >
+    <span>
+      Canary description
+    </span>
+  </span>
+</StyledRadioGroup>
+`;

test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap

@@ -40,6 +40,7 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
             childrenInLabel={true}
             className="mx_ThemeSelector_light"
             disabled={true}
+            id="theme-light"
             name="theme"
             onChange={[Function]}
             outlined={true}
@@ -51,6 +52,7 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
               <input
                 checked={false}
                 disabled={true}
+                id="theme-light"
                 name="theme"
                 onChange={[Function]}
                 type="radio"
@@ -74,6 +76,7 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
             childrenInLabel={true}
             className="mx_ThemeSelector_dark"
             disabled={true}
+            id="theme-dark"
             name="theme"
             onChange={[Function]}
             outlined={true}
@@ -85,6 +88,7 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
               <input
                 checked={false}
                 disabled={true}
+                id="theme-dark"
                 name="theme"
                 onChange={[Function]}
                 type="radio"