Storybook: Exclude "Show info" button from a11y report

[dangreen]

Is your feature request related to a problem? Please describe.
Will be nice, if "Show info" button (@storybook/addon-info) will not have effect to a11y report (@storybook/addon-a11y). Currently it always spawn this violation:

.info__show-button
Element has insufficient color contrast of 3.84 (foreground color: #ffffff, background color: #2288cc, font size: 9.0pt, font weight: normal). Expected contrast ratio of 4.5:1

Describe the solution you'd like
May be aria-hidden to "Show info" button.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Are you able to assist bring the feature to reality?
yes, maybe

[CodeByAlex]

I think the best solution here would be to fix the accessibility issue. Aria-hidden would only hide the element from screen readers. Adding that attribute wouldn’t hide it from the contrast check because the check for contrast is related to a different aspect of accessibility. @domyen do you think we could come up with a color that has better contrast for “show info” in the info addon? @shilman, This should also be considered for the 5.1 info addon design if the elements are still located in the iframe

[shilman]

If there's a quick fix please feel free to submit a PR and I'd be happy to merge it. However we're moving the info addon out of the component preview in the very near future, so you might want to just wait for that.

[avrilpearl]

@dangreen --> you could temporarily fix this for your storybook instance by configuring the add-info addon to have a different button color that meets a11y contrast guidelines.

e.g.:

addDecorator(
    withInfo({
      styles: {
        button: {
          base: {
            fontFamily: 'sans-serif',
            fontSize: '12px',
            display: 'block',
            position: 'fixed',
            border: 'none',
            background: '#14558f',
            color: '#fff',
            padding: '5px 15px',
            cursor: 'pointer',
          },
          topRight: {
            top: 0,
            right: 0,
            borderRadius: '0 0 0 5px',
          }
        }
      }
    })
  );

where - background is the a11y compliant color you would want to change to.

[shilman]

Zoinks!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.20 containing PR #6301 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[jsomsanith-tlnd]

Is it a reason tis issue is reopened ?
The fix is great, fixing the contrast on the button.

[shilman]

ZOMG!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.6 containing PR #6301 that references this issue. Upgrade today to try it out!