[@storybook/addon-info] 'Story Source' text violates a11y color contrast ratio

[GabiOC]

Bug or support request summary

Text in the 'Story Source' field in the Info Add-on has a color contrast ratio of 4.29, which fails the 4.5:1 minimum ratio for AA level accessibility compliance.

Aside from this impacting partially sighted users, this also causes a violation to be raised in the a11y add-on.

Changing the font color to black or a darker gray would fix this. https://hexnaw.com is a good resource for checking accessible color combinations.

Steps to reproduce

I tried to trace down where the font color is being added (it's being added inline) but couldn't find where. It looks like we could configure it in the base styles for the Pre component that's rendering the text but again, I don't know where the font color is coming from so these styles might get overridden.

Example with inaccessible text in 'Story Source' field: https://rcdexta.me/react-event-timeline/?selectedKind=Timeline&selectedStory=Default%20View&full=0&down=0&left=1&panelRight=0

Where the inaccessible text is being rendered: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L262-L295

What the inaccessible text looks like:

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react: 3.4.11
• @storybook/addon-info: 3.4.11
• @storybook/addon-a11y: 3.4.11

Affected platforms

• Chrome, Version 69.0.3497.100

[nicholaai]

So, I'm also having this issue. I figured out, the code we're looking for is actually in the Node component.

As you can see here, Node is being rendered within the <Pre> component. Node itself, is what renders our story source. By referencing the node code you can see the following css config

const stylesheet = {
  containerStyle: {},
  tagStyle: {
    color: '#777',
  },
};

That tagStyle gets used as the style prop for the <span>'s that render our source code.

 return (
    <div>
      <div style={containerStyleCopy}>
        <span style={tagStyle}>
          &lt;
          {name}
        </span>

If you convert the hex code #777 to rgba, you get rgb(119, 119, 119).

So, the fix for this would be to allow the styles configuration to take a value that would get passed to the component here

return (
      <div>
        <h1 style={stylesheet.source.h1}>Story Source</h1>
        <Pre>
          {React.Children.map(children, (root, idx) => (
            <Node
              key={idx}
              node={root}
              depth={0}
              maxPropsIntoLine={maxPropsIntoLine}
              maxPropObjectKeys={maxPropObjectKeys}
              maxPropArrayLength={maxPropArrayLength}
              maxPropStringLength={maxPropStringLength}
            />
          ))}
        </Pre>
      </div>
    );
  }

[GabiOC]

@nicholaai Is there any reason the tagStyle font color shouldn't be changed to a darker gray or black by default? rgb(119, 119, 119) against a white background still doesn't meet the minimum contrast ratio for smaller text. Changing it to rgb(68, 68, 68) for example would ensure that the contrast was sufficient against white or the lighter gray background.

[nicholaai]

@GabiOC, not that i know of. i'll issue a PR with an update soon and we'll see what happens