Tutorial: style attribute name should be changed in example code

[duswnwn]

Description

The Angular Intro to Storybook action Visual testing part (https://storybook.js.org/tutorials/intro-to-storybook/react/en/test/) is using wrong attribute name:

<label htmlFor="title" aria-label={title} className="title">
        <input
          type="text"
          value={title}
          readOnly={true}
          name="title"
          placeholder="Input title"
+         style={{ background: 'red' }}
        />
      </label>

Solution

Change attribute name 'background' to 'backgroundColor'.

<label htmlFor="title" aria-label={title} className="title">
        <input
          type="text"
          value={title}
          readOnly={true}
          name="title"
          placeholder="Input title"
+         style={{ backgroundColor: 'red' }}
        />
      </label>

Contribution

I'm willing to create a PR to address this topic if accepted.

[jonniebigodes]

@duswnwn, thanks for reaching out to us with your issue and pointing out that limitation. We appreciate it 🙏 ! So that you're aware, technically, it's not wrong. You can use the shorthand and apply the style, but it may cause issues with a11y or something of that nature. Nevertheless, I've just pushed a pull request to address this to align with the element in question that is being changed.

Hope you have a great week.

Stay safe