search

brendanmorrell / eslint-plugin-styled-components-a11y

145 stars 21 forks source link

html-has-lang and iframe-has-title false warnings #54

Closed EvgenyOrekhov closed 1 year ago

EvgenyOrekhov commented 1 year ago

When I have a styled component that wraps another styled component from a different file, I get these warnings:

<html> elements must have the lang prop. eslint(styled-components-a11y/html-has-lang)
<iframe> elements must have a unique title property. eslint(styled-components-a11y/iframe-has-title)

Example code:

index.tsx

import React from 'react';
import { Link } from 'components/Link';
import { styled } from '@mui/material/styles';

export const Example = () => {
  // The following line gives warnings for StyledLink:
  return <StyledLink href='https://example.com'>foo</StyledLink>;
};

const StyledLink = styled(Link)`
  padding: 0;
`;

components/Link.tsx

import React from 'react';
import { styled } from '@mui/material/styles';

export const Link = styled('a')`
  font-size: 13px;
`;

This started happening with 2.1.0, worked fine with 2.0.0.

brendanmorrell commented 1 year ago

I believe i saw this recently as well. I can try and take a look soon. Thanks.

On Mon, Jun 26, 2023 at 8:05 AM Evgeny Orekhov @.***> wrote:

When I have a styled component that wraps another styled component from a different file, I get these warnings:

elements must have the lang prop. eslint(styled-components-a11y/html-has-lang)