Accessibility: enable rule jsx-a11y/label-has-associated-control (#57964)

* use labels correctly

* fix opentsdb labels

* fix unit tests

* use aria-label instead of data-testid

public/app/plugins/datasource/cloud-monitoring/components/AnnotationsHelp.tsx

@@ -19,7 +19,7 @@ export const AnnotationsHelp = () => {
         <p>
           Example Result: <code>monitoring.googleapis.com/uptime_check/http_status has this value: 502</code>
         </p>
-        <label>Patterns:</label>
+        <span>Patterns:</span>
         <p>
           <code>{`${'{{metric.value}}'}`}</code> = value of the metric/point
         </p>

public/app/plugins/datasource/cloud-monitoring/components/CloudMonitoringCheatSheet.tsx

@@ -24,7 +24,7 @@ export default class CloudMonitoringCheatSheet extends PureComponent<
           Result: &nbsp;&nbsp;<code>cpu/usage_time - server1-europe-west-1</code>
           <br />
           <br />
-          <label>Patterns</label>
+          <span>Patterns:</span>
           <br />
           <ul
             className={css`

public/app/plugins/datasource/opentsdb/components/FilterSection.test.tsx

@@ -53,7 +53,7 @@ describe('FilterSection', () => {
   describe('filter editor', () => {
     it('open the editor on clicking +', () => {
       setup();
-      fireEvent.click(screen.getByTestId(testIds.open));
+      fireEvent.click(screen.getByRole('button', { name: /Add filter/ }));
       expect(screen.getByText('Group by')).toBeInTheDocument();
     });
 
@@ -64,7 +64,7 @@ describe('FilterSection', () => {
 
     it('should call runQuery on adding a filter', () => {
       setup();
-      fireEvent.click(screen.getByTestId(testIds.open));
+      fireEvent.click(screen.getByRole('button', { name: /Add filter/ }));
       fireEvent.click(screen.getByText('add filter'));
       expect(onRunQuery).toHaveBeenCalled();
     });
@@ -78,7 +78,7 @@ describe('FilterSection', () => {
         tags: [{}],
       };
       setup({ query });
-      fireEvent.click(screen.getByTestId(testIds.open));
+      fireEvent.click(screen.getByRole('button', { name: /Add filter/ }));
       fireEvent.click(screen.getByText('add filter'));
       expect(screen.getByTestId(testIds.error)).toBeInTheDocument();
     });

public/app/plugins/datasource/opentsdb/components/FilterSection.tsx

@@ -138,11 +138,9 @@ export function FilterSection({
             );
           })}
         {!addFilterMode && (
-          <label className="gf-form-label query-keyword">
-            <button type="button" className={buttonStyles} onClick={changeAddFilterMode} data-testid={testIds.open}>
-              <Icon name={'plus'} />
-            </button>
-          </label>
+          <button className="gf-form-label" type="button" onClick={changeAddFilterMode} aria-label="Add filter">
+            <Icon name={'plus'} />
+          </button>
         )}
       </div>
       {addFilterMode && (
@@ -225,19 +223,18 @@ export function FilterSection({
           />
           <div className="gf-form">
             {errors && (
-              <label className="gf-form-label" title={errors} data-testid={testIds.error}>
+              <div className="gf-form-label" title={errors} data-testid={testIds.error}>
                 <Icon name={'exclamation-triangle'} color={'rgb(229, 189, 28)'} />
-              </label>
+              </div>
             )}
-
-            <label className="gf-form-label">
+            <div className="gf-form-label">
               <button type="button" className={buttonStyles} onClick={addFilter}>
                 add filter
               </button>
               <button type="button" className={buttonStyles} onClick={changeAddFilterMode}>
                 <Icon name={'times'} />
               </button>
-            </label>
+            </div>
           </div>
         </div>
       )}
@@ -250,7 +247,6 @@ export function FilterSection({
 
 export const testIds = {
   section: 'opentsdb-filter',
-  open: 'opentsdb-filter-editor',
   list: 'opentsdb-filter-list',
   error: 'opentsdb-filter-error',
   remove: 'opentsdb-filter-remove',

public/app/plugins/datasource/opentsdb/components/TagSection.test.tsx

@@ -48,7 +48,7 @@ describe('Tag Section', () => {
   describe('tag editor', () => {
     it('open the editor on clicking +', () => {
       setup();
-      fireEvent.click(screen.getByTestId(testIds.open));
+      fireEvent.click(screen.getByRole('button', { name: /Add tag/ }));
       expect(screen.getByText('add tag')).toBeInTheDocument();
     });
 
@@ -59,7 +59,7 @@ describe('Tag Section', () => {
 
     it('should call runQuery on adding a tag', () => {
       setup();
-      fireEvent.click(screen.getByTestId(testIds.open));
+      fireEvent.click(screen.getByRole('button', { name: /Add tag/ }));
       fireEvent.click(screen.getByText('add tag'));
       expect(onRunQuery).toHaveBeenCalled();
     });
@@ -80,7 +80,7 @@ describe('Tag Section', () => {
         ],
       };
       setup({ query });
-      fireEvent.click(screen.getByTestId(testIds.open));
+      fireEvent.click(screen.getByRole('button', { name: /Add tag/ }));
       fireEvent.click(screen.getByText('add tag'));
       expect(screen.getByTestId(testIds.error)).toBeInTheDocument();
     });

public/app/plugins/datasource/opentsdb/components/TagSection.tsx

@@ -136,11 +136,9 @@ export function TagSection({
             );
           })}
         {!addTagMode && (
-          <label className="gf-form-label query-keyword">
-            <button type="button" className={buttonStyles} onClick={changeAddTagMode} data-testid={testIds.open}>
-              <Icon name={'plus'} />
-            </button>
-          </label>
+          <button className="gf-form-label" type="button" onClick={changeAddTagMode} aria-label="Add tag">
+            <Icon name={'plus'} />
+          </button>
         )}
       </div>
       {addTagMode && (
@@ -196,19 +194,19 @@ export function TagSection({
 
           <div className="gf-form">
             {errors && (
-              <label className="gf-form-label" title={errors} data-testid={testIds.error}>
+              <div className="gf-form-label" title={errors} data-testid={testIds.error}>
                 <Icon name={'exclamation-triangle'} color={'rgb(229, 189, 28)'} />
-              </label>
+              </div>
             )}
 
-            <label className="gf-form-label">
+            <div className="gf-form-label">
               <button type="button" className={buttonStyles} onClick={addTag}>
                 add tag
               </button>
               <button type="button" className={buttonStyles} onClick={changeAddTagMode}>
                 <Icon name={'times'} />
               </button>
-            </label>
+            </div>
           </div>
         </div>
       )}
@@ -221,7 +219,6 @@ export function TagSection({
 
 export const testIds = {
   section: 'opentsdb-tag',
-  open: 'opentsdb-tag-editor',
   list: 'opentsdb-tag-list',
   error: 'opentsdb-tag-error',
   remove: 'opentsdb-tag-remove',