TimeRangePicker: fix DOM nesting (#37550)

packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx

@@ -141,6 +141,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, disabled = false) => {
       inputStyles.suffix,
       css`
         position: relative;
+        top: -1px;
         margin-left: ${theme.v1.spacing.xs};
       `
     ),

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx

@@ -232,7 +232,7 @@ const NarrowScreenForm: React.FC<FormProps> = (props) => {
 
   return (
     <fieldset>
-      <h3 className={styles.header}>
+      <div className={styles.header}>
         <button
           className={styles.expandButton}
           onClick={() => {
@@ -247,7 +247,7 @@ const NarrowScreenForm: React.FC<FormProps> = (props) => {
           <TimePickerTitle>Absolute time range</TimePickerTitle>
           {!hideQuickRanges && <Icon name={!collapsed ? 'angle-up' : 'angle-down'} />}
         </button>
-      </h3>
+      </div>
       {!collapsed && (
         <div className={styles.body} id="expanded-timerange">
           <div className={styles.form}>
@@ -278,9 +278,9 @@ const FullScreenForm: React.FC<FormProps> = (props) => {
   return (
     <>
       <div className={styles.container}>
-        <h3 className={styles.title} data-testid={selectors.components.TimePicker.absoluteTimeRangeTitle}>
+        <div className={styles.title} data-testid={selectors.components.TimePicker.absoluteTimeRangeTitle}>
           <TimePickerTitle>Absolute time range</TimePickerTitle>
-        </h3>
+        </div>
         <TimeRangeForm
           value={props.value}
           timeZone={props.timeZone}

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx

@@ -96,7 +96,7 @@ export const TimeRangeForm: React.FC<Props> = (props) => {
   const icon = isFullscreen ? null : <Button icon="calendar-alt" variant="secondary" onClick={onOpen} />;
 
   return (
-    <form aria-label="Absolute time ranges">
+    <div aria-label="Absolute time ranges">
       <Field label="From" invalid={from.invalid} error={from.errorMessage}>
         <Input
           onClick={(event) => event.stopPropagation()}
@@ -132,7 +132,7 @@ export const TimeRangeForm: React.FC<Props> = (props) => {
         timeZone={timeZone}
         isReversed={isReversed}
       />
-    </form>
+    </div>
   );
 };
 

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx

@@ -47,14 +47,12 @@ export const TimeRangeList: React.FC<Props> = (props) => {
 
   return (
     <section aria-label={title}>
-      <form>
+      <fieldset>
-        <fieldset>
+        <div className={styles.title}>
-          <div className={styles.title}>
+          <TimePickerTitle>{title}</TimePickerTitle>
-            <TimePickerTitle>{title}</TimePickerTitle>
+        </div>
-          </div>
+        <Options {...props} />
-          <Options {...props} />
+      </fieldset>
-        </fieldset>
-      </form>
     </section>
   );
 };