[GH-24981] Fix: Manually selecting EST timezones is confused with daylight savings (#29290)

* Give product branding button role

The product branding only handled click events to open the switcher menu.These changes make it possible to click on the product branding using SPACE and ENTER to open/close the switcher menu.

* Use dynamic index to select timezone utc

Some timezones have similar arrays, so hard-coding the first item lead to duplicate items being selected.

* Remove 'handleManualTimezone' method

This is method is declared but not used anywhere in the code base.

* Fix lint errors

* Add 'key' prop to input array items

Missing 'key' props led to a console error when you click the timezone option to change timezones. This change fixes it.

* Revert "Give product branding button role"

This reverts commit e781d708dbedaf8af8ba3790edd8c28d8605d6b9.

* Add comment providing more context to changes

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

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

@@ -156,25 +156,46 @@ export default class ManageTimezones extends React.PureComponent<Props, State> {
         });
     };
 
-    handleManualTimezone = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        this.setState({manualTimezone: e.target.value});
-    };
     render() {
         const {timezones} = this.props;
         const {useAutomaticTimezone} = this.state;
 
+        let index = 0;
+        let previousTimezone: Timezone;
+
         const timeOptions = this.props.timezones.map((timeObject) => {
+            if (timeObject.utc[index] === previousTimezone?.utc[index]) {
+                index++;
+            } else {
+                // It's safe to use the first item since consecutive timezones
+                // don't have the same 'utc' array.
+                index = index === 0 ? index : 0;
+            }
+
+            previousTimezone = timeObject;
+
+            // Some more context on why different 'utc' items are used can be found here.
+            // https://github.com/mattermost/mattermost/pull/29290#issuecomment-2478492626
             return {
-                value: timeObject.utc[0],
+                value: timeObject.utc[index],
                 label: timeObject.text,
             };
         });
+
         let serverError;
         if (this.state.serverError) {
             serverError = <label className='has-error'>{this.state.serverError}</label>;
         }
 
         const inputs = [];
+
+        // These are passed to the 'key' prop and should all be unique.
+        const inputId = {
+            automaticTimezoneInput: 1,
+            manualTimezoneInput: 2,
+            message: 3,
+        };
+
         const reactStyles = {
 
             menuPortal: (provided: React.CSSProperties) => ({
@@ -186,7 +207,10 @@ export default class ManageTimezones extends React.PureComponent<Props, State> {
 
         const noTimezonesFromServer = timezones.length === 0;
         const automaticTimezoneInput = (
-            <div className='checkbox'>
+            <div
+                className='checkbox'
+                key={inputId.automaticTimezoneInput}
+            >
                 <label>
                     <input
                         id='automaticTimezoneInput'
@@ -207,6 +231,7 @@ export default class ManageTimezones extends React.PureComponent<Props, State> {
         const manualTimezoneInput = (
             <div
                 className='pt-2'
+                key={inputId.manualTimezoneInput}
             >
                 <ReactSelect
                     className='react-select react-select-top'
@@ -230,7 +255,7 @@ export default class ManageTimezones extends React.PureComponent<Props, State> {
         inputs.push(manualTimezoneInput);
 
         inputs.push(
-            <div>
+            <div key={inputId.message}>
                 <br/>
                 <FormattedMessage
                     id='user.settings.timezones.promote'