MM-63313 Make theme setting radio buttons horizontal and update text (#30584)

* MM-63313 Make theme setting radio buttons horizontal and update text

* MM-63313 Add Playwright test for a11y of theme settings

* Update snapshot

* Run prettier on E2E tests

* Address feedback

* Ensure new test reliably passes on Firefox

For whatever reason, Firefox lets you tab onto the Sidebar Styles panel
while it's expanding, possibly because it's a scrollable container with
overflowing content or because other browsers don't register the
children of that panel as visible while the panel is animating open.
Either way, we can look at the CSS on the panel to confirm when the
transition is done.

* Revert previous changes made to premade theme label alignment and size

In the last PR, these were changed from generic divs to buttons, and the
default browser style for buttons adds some extra padding and centres
the button text by default, so we have to override that.

* Adjust margins on inline radio group

* Fix playwright test code styling

* Fix bad import in E2E tests

webapp/channels/src/components/user_settings/display/user_settings_theme/color_chooser/__snapshots__/color_chooser.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`components/user_settings/display/ColorChooser should match, init 1`] =
 <Fragment>
   <label
     className="custom-label"
+    htmlFor="choose-color-inputColorValue"
   >
     Choose color
   </label>

webapp/channels/src/components/user_settings/display/user_settings_theme/color_chooser/color_chooser.tsx

@@ -19,7 +19,12 @@ export default function ColorChooser(props: Props) {
 
     return (
         <>
-            <label className='custom-label'>{props.label}</label>
+            <label
+                className='custom-label'
+                htmlFor={`${props.id}-inputColorValue`}
+            >
+                {props.label}
+            </label>
             <ColorInput
                 id={props.id}
                 value={props.value}

webapp/channels/src/components/user_settings/display/user_settings_theme/user_settings_theme.tsx

@@ -185,48 +185,39 @@ export default class ThemeSetting extends React.PureComponent<Props, State> {
             if (this.props.allowCustomThemes) {
                 inputs.push(
                     <div
-                        className='radio'
-                        key='premadeThemeColorLabel'
+                        key='premadeCustom'
+                        className='user-settings__radio-group-inline'
                     >
-                        <label>
-                            <input
-                                id='standardThemes'
-                                type='radio'
-                                name='theme'
-                                checked={!displayCustom}
-                                onChange={this.updateType.bind(this, 'premade')}
-                                aria-controls='premadeThemesSection'
-                            />
-                            <FormattedMessage
-                                id='user.settings.display.theme.themeColors'
-                                defaultMessage='Theme Colors'
-                            />
-                        </label>
-                        <br/>
-                    </div>,
-                );
-            }
-
-            if (this.props.allowCustomThemes) {
-                inputs.push(
-                    <div
-                        className='radio'
-                        key='customThemeColorLabel'
-                    >
-                        <label>
-                            <input
-                                id='customThemes'
-                                type='radio'
-                                name='theme'
-                                checked={displayCustom}
-                                onChange={this.updateType.bind(this, 'custom')}
-                                aria-controls='customThemesSection'
-                            />
-                            <FormattedMessage
-                                id='user.settings.display.theme.customTheme'
-                                defaultMessage='Custom Theme'
-                            />
-                        </label>
+                        <div className='radio radio-inline'>
+                            <label>
+                                <input
+                                    id='standardThemes'
+                                    type='radio'
+                                    name='theme'
+                                    checked={!displayCustom}
+                                    onChange={this.updateType.bind(this, 'premade')}
+                                />
+                                <FormattedMessage
+                                    id='user.settings.display.theme.premadeThemes'
+                                    defaultMessage='Premade Themes'
+                                />
+                            </label>
+                        </div>
+                        <div className='radio radio-inline'>
+                            <label>
+                                <input
+                                    id='customThemes'
+                                    type='radio'
+                                    name='theme'
+                                    checked={displayCustom}
+                                    onChange={this.updateType.bind(this, 'custom')}
+                                />
+                                <FormattedMessage
+                                    id='user.settings.display.theme.customTheme'
+                                    defaultMessage='Custom Theme'
+                                />
+                            </label>
+                        </div>
                     </div>,
                 );
 
@@ -271,6 +262,12 @@ export default class ThemeSetting extends React.PureComponent<Props, State> {
 
             themeUI = (
                 <SettingItemMax
+                    title={
+                        <FormattedMessage
+                            id='user.settings.display.theme.title'
+                            defaultMessage='Theme'
+                        />
+                    }
                     inputs={
                         <fieldset>
                             <legend className='hidden-label'>

webapp/channels/src/i18n/en.json

@@ -5698,7 +5698,7 @@
   "user.settings.display.theme.customTheme": "Custom Theme",
   "user.settings.display.theme.describe": "Open to manage your theme",
   "user.settings.display.theme.otherThemes": "See other themes",
-  "user.settings.display.theme.themeColors": "Theme Colors",
+  "user.settings.display.theme.premadeThemes": "Premade Themes",
   "user.settings.display.theme.title": "Theme",
   "user.settings.display.timezone": "Timezone",
   "user.settings.display.title": "Display Settings",

webapp/channels/src/sass/routes/_settings.scss

@@ -353,9 +353,11 @@
                             white-space: nowrap;
                         }
 
-                        .premadeThemeButton{
+                        .premadeThemeButton {
+                            padding: 0;
                             border: none;
                             background: none;
+                            text-align: start;
                         }
 
                         label {
@@ -704,6 +706,11 @@
     resize: none;
 }
 
+.user-settings__radio-group-inline {
+    // Counteract the margin-left added by Bootstrap's radio-inline class
+    margin-left: -20px;
+}
+
 .user-settings__submit-checkbox {
     padding-top: 0;
     padding-bottom: 20px;