Adding label-has-associated-control to jsx-a11y lint rules and associated UI fixes (#27039)

.eslintrc.js

@@ -339,6 +339,7 @@ module.exports = {
         'jsx-a11y/click-events-have-key-events': 'off',
         'jsx-a11y/anchor-has-content': 'off',
         'jsx-a11y/tabindex-no-positive': 'off',
+        'jsx-a11y/label-has-associated-control': 'off',
         'jsx-a11y/aria-role': 'off',
       },
     },

packages/eslint-config-kibana/.eslintrc.js

@@ -149,6 +149,7 @@ module.exports = {
     'jsx-a11y/role-supports-aria-props': 'error',
     'jsx-a11y/scope': 'error',
     'jsx-a11y/tabindex-no-positive': 'error',
+    'jsx-a11y/label-has-associated-control': 'error',  
     'react/jsx-equals-spacing': ['error', 'never'],
     'react/jsx-indent': ['error', 2],
     'react/no-will-update-set-state': 'error',

src/legacy/core_plugins/kibana/public/home/components/tutorial/number_parameter.js

@@ -29,6 +29,7 @@ export function NumberParameter({ id, label, value, setParameter }) {
     <div className="kuiSideBarFormRow">
       <label
         className="kuiSideBarFormRow__label"
+        htmlFor={id}
       >
         {label}
       </label>
@@ -38,6 +39,7 @@ export function NumberParameter({ id, label, value, setParameter }) {
           type="number"
           value={value}
           onChange={handleChange}
+          id={id}
         />
       </div>
     </div>

x-pack/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.js

@@ -33,7 +33,7 @@ export const SimpleTemplate = props => {
       {!color || color.length === 0 ? (
         <Fragment>
           <EuiFlexItem grow={false}>
-            <label>Color&nbsp;</label>
+            <span>Color&nbsp;</span>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiLink onClick={() => handlePlain('color', '#000000')}>
@@ -44,11 +44,11 @@ export const SimpleTemplate = props => {
       ) : (
         <Fragment>
           <EuiFlexItem grow={false}>
-            <label>Color&nbsp;</label>
+            <label htmlFor="series-style">Color&nbsp;</label>
           </EuiFlexItem>
           <EuiFlexItem style={{ fontSize: 0 }}>
             <ColorPickerMini
-              id={'series-style'}
+              id="series-style"
               value={color}
               onChange={val => handlePlain('color', val)}
               colors={workpad.colors}