A11y: Fix remaining focus issues with Switch (#48376)

* refactor: replace uses of checked prop for <Switch> with value prop

* fix: remove spaces from ids

The ID format is stated as follows([source][1]):

> ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]),
hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Since `QueryHeaderSwitch` is used in two places I created a new variable that replaces spaces with a dash in the label.

[1]: https://www.w3.org/TR/html401/types.html#type-name

* fix: allow Switch in AlertingSettings to be focused by keyboard

* fix: allow Switch in PromSettings to be focused by keyboard

Fixes #46472

Co-authored-by: Elfo404 <me@giordanoricci.com>

public/app/features/datasources/settings/BasicSettings.tsx

@@ -1,9 +1,7 @@
 import React, { FC } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
-import { InlineFormLabel, LegacyForms } from '@grafana/ui';
-
-const { Input, Switch } = LegacyForms;
+import { InlineField, InlineSwitch, Input } from '@grafana/ui';
 
 export interface Props {
   dataSourceName: string;
@@ -16,33 +14,34 @@ const BasicSettings: FC<Props> = ({ dataSourceName, isDefault, onDefaultChange,
   return (
     <div className="gf-form-group" aria-label="Datasource settings page basic settings">
       <div className="gf-form-inline">
-        <div className="gf-form max-width-30" style={{ marginRight: '3px' }}>
-          <InlineFormLabel
-            tooltip={
-              'The name is used when you select the data source in panels. The default data source is ' +
-              'preselected in new panels.'
-            }
+        <div className="gf-form max-width-30">
+          <InlineField
+            label="Name"
+            tooltip="The name is used when you select the data source in panels. The default data source is
+              'preselected in new panels."
+            grow
           >
-            Name
-          </InlineFormLabel>
-          <Input
-            className="gf-form-input max-width-23"
-            type="text"
-            value={dataSourceName}
-            placeholder="Name"
-            onChange={(event) => onNameChange(event.target.value)}
-            required
-            aria-label={selectors.pages.DataSource.name}
-          />
+            <Input
+              id="basic-settings-name"
+              type="text"
+              value={dataSourceName}
+              placeholder="Name"
+              onChange={(event) => onNameChange(event.currentTarget.value)}
+              required
+              aria-label={selectors.pages.DataSource.name}
+            />
+          </InlineField>
         </div>
-        <Switch
-          label="Default"
-          checked={isDefault}
-          onChange={(event) => {
-            // @ts-ignore
-            onDefaultChange(event.target.checked);
-          }}
-        />
+
+        <InlineField label="Default" labelWidth={8}>
+          <InlineSwitch
+            id="basic-settings-default"
+            value={isDefault}
+            onChange={(event: React.FormEvent<HTMLInputElement>) => {
+              onDefaultChange(event.currentTarget.checked);
+            }}
+          />
+        </InlineField>
       </div>
     </div>
   );

public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap

@@ -10,32 +10,34 @@ exports[`Render should render component 1`] = `
   >
     <div
       className="gf-form max-width-30"
-      style={
-        Object {
-          "marginRight": "3px",
-        }
-      }
     >
-      <FormLabel
-        tooltip="The name is used when you select the data source in panels. The default data source is preselected in new panels."
+      <InlineField
+        grow={true}
+        label="Name"
+        tooltip="The name is used when you select the data source in panels. The default data source is
+              'preselected in new panels."
       >
-        Name
-      </FormLabel>
-      <Input
-        aria-label="Data source settings page name input field"
-        className="gf-form-input max-width-23"
-        onChange={[Function]}
-        placeholder="Name"
-        required={true}
-        type="text"
-        value="Graphite"
-      />
+        <Input
+          aria-label="Data source settings page name input field"
+          id="basic-settings-name"
+          onChange={[Function]}
+          placeholder="Name"
+          required={true}
+          type="text"
+          value="Graphite"
+        />
+      </InlineField>
     </div>
-    <Switch
-      checked={false}
+    <InlineField
       label="Default"
-      onChange={[Function]}
-    />
+      labelWidth={8}
+    >
+      <Switch
+        id="basic-settings-default"
+        onChange={[Function]}
+        value={false}
+      />
+    </InlineField>
   </div>
 </div>
 `;