Add Playwright tests for settings toggles (#30318)

* Add playwright tests

* import pages/ remove duplicate create-room

* Update screenshots

* Fix accessibility for devtools

* Disable region test

* Fixup headers

* remove extra test

* Fix permissions dialog

* fixup tests

* update snapshot

* Update jest tests

* Clear up playwright tests

* update widget screenshot

* Fix wrong snaps from using wrong compound version

* Revert mistaken s/checkbox/switch/

src/components/views/avatars/WidgetAvatar.tsx

@@ -37,6 +37,8 @@ const WidgetAvatar: React.FC<IProps> = ({ app, className, size = "20px", ...prop
     return (
         <BaseAvatar
             {...props}
+            // Span elements cannot have a label
+            role="img"
             name={app.id}
             className={classNames("mx_WidgetAvatar", className)}
             // MSC2765

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -84,7 +84,9 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
             <BaseTool onBack={onBack}>
                 {Object.entries(Tools).map(([category, tools]) => (
                     <div key={category}>
-                        <h3>{_t(categoryLabels[category as unknown as Category])}</h3>
+                        <h2 className="mx_DevTools_toolHeading">
+                            {_t(categoryLabels[category as unknown as Category])}
+                        </h2>
                         {tools.map(([label, tool]) => {
                             const onClick = (): void => {
                                 setTool([label, tool]);
@@ -98,7 +100,7 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
                     </div>
                 ))}
                 <div>
-                    <h3>{_t("common|options")}</h3>
+                    <h2 className="mx_DevTools_toolHeading">{_t("common|options")}</h2>
                     <SettingsFlag name="developerMode" level={SettingLevel.ACCOUNT} />
                     <SettingsFlag name="showHiddenEventsInTimeline" level={SettingLevel.DEVICE} />
                     <SettingsFlag name="enableWidgetScreenshots" level={SettingLevel.ACCOUNT} />

src/components/views/elements/AppTile.tsx

@@ -572,7 +572,7 @@ export default class AppTile extends React.Component<IProps, IState> {
         return (
             <span>
                 <WidgetAvatar app={this.props.app} size="20px" />
-                <h3>{name}</h3>
+                <h1>{name}</h1>
                 <span>
                     {title ? titleSpacer : ""}
                     {title}

src/components/views/right_panel/WidgetCard.tsx

@@ -64,7 +64,7 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
 
     const header = (
         <div className="mx_BaseCard_header_title">
-            <Heading size="4" className="mx_BaseCard_header_title_heading">
+            <Heading size="4" className="mx_BaseCard_header_title_heading" as="h1">
                 {WidgetUtils.getWidgetName(app)}
             </Heading>
             <ContextMenuButton

src/components/views/settings/Notifications.tsx

@@ -807,7 +807,7 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
         return (
             <div>
                 <div data-testid={`notif-section-${category}`} className="mx_UserNotifSettings_grid">
-                    <SettingsSubsectionHeading heading={sectionName} />
+                    <SettingsSubsectionHeading heading={sectionName} as="h2" />
                     <span className="mx_UserNotifSettings_gridColumnLabel">{VectorStateToLabel[VectorState.Off]}</span>
                     <span className="mx_UserNotifSettings_gridColumnLabel">{VectorStateToLabel[VectorState.On]}</span>
                     <span className="mx_UserNotifSettings_gridColumnLabel">{VectorStateToLabel[VectorState.Loud]}</span>

src/components/views/settings/notifications/NotificationSettings2.tsx

@@ -34,6 +34,7 @@ import { SettingsSection } from "../shared/SettingsSection";
 import { SettingsSubsection } from "../shared/SettingsSubsection";
 import { NotificationPusherSettings } from "./NotificationPusherSettings";
 import SettingsFlag from "../../elements/SettingsFlag";
+import { SettingsSubsectionHeading } from "../shared/SettingsSubsectionHeading";
 
 enum NotificationDefaultLevels {
     AllMessages = "all_messages",
@@ -151,7 +152,12 @@ export default function NotificationSettings2(): JSX.Element {
                     />
                 </div>
                 <SettingsSubsection
-                    heading={_t("settings|notifications|default_setting_section")}
+                    heading={
+                        <SettingsSubsectionHeading
+                            heading={_t("settings|notifications|default_setting_section")}
+                            as="h2"
+                        />
+                    }
                     description={_t("settings|notifications|default_setting_description")}
                 >
                     <StyledRadioGroup
@@ -178,7 +184,12 @@ export default function NotificationSettings2(): JSX.Element {
                     />
                 </SettingsSubsection>
                 <SettingsSubsection
-                    heading={_t("settings|notifications|play_sound_for_section")}
+                    heading={
+                        <SettingsSubsectionHeading
+                            heading={_t("settings|notifications|play_sound_for_section")}
+                            as="h2"
+                        />
+                    }
                     description={_t("settings|notifications|play_sound_for_description")}
                 >
                     <LabelledCheckbox
@@ -224,7 +235,9 @@ export default function NotificationSettings2(): JSX.Element {
                         }}
                     />
                 </SettingsSubsection>
-                <SettingsSubsection heading={_t("settings|notifications|other_section")}>
+                <SettingsSubsection
+                    heading={<SettingsSubsectionHeading heading={_t("settings|notifications|other_section")} as="h2" />}
+                >
                     <LabelledCheckbox
                         label={_t("settings|notifications|invites")}
                         value={settings.activity.invite}
@@ -269,7 +282,9 @@ export default function NotificationSettings2(): JSX.Element {
                     />
                 </SettingsSubsection>
                 <SettingsSubsection
-                    heading={_t("settings|notifications|mentions_keywords")}
+                    heading={
+                        <SettingsSubsectionHeading heading={_t("settings|notifications|mentions_keywords")} as="h2" />
+                    }
                     description={_t(
                         "settings|notifications|keywords",
                         {},

src/components/views/settings/shared/SettingsSubsectionHeading.tsx

@@ -12,13 +12,19 @@ import Heading from "../../typography/Heading";
 
 export interface SettingsSubsectionHeadingProps extends HTMLAttributes<HTMLDivElement> {
     heading: string;
+    as?: React.ComponentProps<typeof Heading>["as"];
     children?: React.ReactNode;
 }
 
-export const SettingsSubsectionHeading: React.FC<SettingsSubsectionHeadingProps> = ({ heading, children, ...rest }) => {
+export const SettingsSubsectionHeading: React.FC<SettingsSubsectionHeadingProps> = ({
+    heading,
+    as = "h3",
+    children,
+    ...rest
+}) => {
     return (
         <div {...rest} className="mx_SettingsSubsectionHeading">
-            <Heading className="mx_SettingsSubsectionHeading_heading" size="4" as="h3">
+            <Heading className="mx_SettingsSubsectionHeading_heading" size="4" as={as}>
                 {heading}
             </Heading>
             {children}