web-dev-qa-db-ja.com

htmlForがある場合、フォームラベルを返すjsx-a11yには、関連付けられたコントロールが必要です。

私はこのコンポーネントを持っています：

// @flow
import React, { Element } from 'react';
import styles from './Label.scss';
import cs from 'classnames';

export const Label = ({
  id,
  htmlFor,
  invalid,
  required,
  children
}: {
  id: string,
  htmlFor: string,
  invalid: boolean,
  required: boolean,
  children: Element<*>
}) =>
  <label
    htmlFor={htmlFor}
    id={id}
    required={required}
    className={cs(
      styles.label,
      required ? styles.required : '',
      invalid ? styles.invalid : ''
    )}
  >
    {children}
  </label>;

Label.displayName = 'Label';

Eslintを実行すると、htmlForがあるにもかかわらず、このエラーメッセージが表示されます。

エラー：フォームラベルには、packages/ds-component-library/src/components/atomics/Label/Label.js：19：3に関連付けられたコントロール（jsx-a11y/label-has-for）が必要です。

reactjsaccessibility
6
dagda1

.eslintrcで、次のことを試してください。

"rules": {
        "jsx-a11y/label-has-for": [ 2, {
            "components": [ "Label" ],
            "required": {
                "some": [ "nesting", "id" ]
            },
            "allowChildren": false,
        }]
    }

これは次の場所から来ています： https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md

幸運を！

13
Joe