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}>
-            <StyledRadioButton
-                className={classNames(className, d.className)}
-                onChange={_onChange}
-                checked={d.checked !== undefined ? d.checked : d.value === value}
-                name={name}
-                value={d.value}
-                disabled={d.disabled ?? disabled}
-                outlined={outlined}
-            >
-                { d.label }
-            </StyledRadioButton>
-            { d.description ? <span>{ d.description }</span> : null }
-        </React.Fragment>) }
+        { definitions.map(d => {
+            const id = `${name}-${d.value}`;
+            return (<React.Fragment key={d.value}>
+                <StyledRadioButton
+                    id={id}
+                    className={classNames(className, d.className)}
+                    onChange={_onChange}
+                    checked={d.checked !== undefined ? d.checked : d.value === value}
+                    name={name}
+                    value={d.value}
+                    disabled={d.disabled ?? disabled}
+                    outlined={outlined}
+                    aria-describedby={d.description ? `${id}-description` : undefined}
+                >
+                    { 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>;
     }