InfluxDB: InfluxQL query editor: generate better HTML (#34467) (#34516)

(cherry picked from commit d95cc4a08f)

Co-authored-by: Gábor Farkas <gabor.farkas@gmail.com>

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx

@@ -176,11 +176,9 @@ export const Seg = ({
   const [isOpen, setOpen] = useState(false);
   if (!isOpen) {
     const className = cx(defaultButtonClass, buttonClassName);
-    // this should not be a label, this should be a button,
-    // but this is what is used inside a Segment, and i just
-    // want the same look
     return (
       <InlineLabel
+        as="button"
         className={className}
         onClick={() => {
           setOpen(true);

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/TagsSection.test.tsx

@@ -31,7 +31,7 @@ async function assertSegmentSelect(
   callbackValue: unknown
 ) {
   // we find the segment
-  const segs = screen.getAllByText(segmentText, { selector: 'label' });
+  const segs = screen.getAllByRole('button', { name: segmentText });
   expect(segs.length).toBe(1);
   const seg = segs[0];
   expect(seg).toBeInTheDocument();