[Framework/Accessibility] Add kuiScreenReaderOnly class

[tsullivan]

The .kuiScreenReaderOnly class makes an element visible to screen readers but not to sighted users. It's important to read the Guide Text provided and the link to the WebAIM site to understand why this class should be used with care.

I tested on a Mac by having the built-in screen reader read the example text:

[cjcenizal]

🎈 Woohoo! This is awesome, @tsullivan. I tested this with VoiceOver and can verify that it's screen-reader-accessible. I just had a few comments/suggestions.

[cjcenizal]

Typo: "accessibility".

[cjcenizal]

You can import the GuideLink component on line 8 and use it here, to get the UI Framework documentation styling:

<GuideLink href="http://webaim.org/techniques/css/invisiblecontent/">
  http://webaim.org/techniques/css/invisiblecontent/
</GuideLink>

[cjcenizal]

Want to make a KuiScreenReaderOnly React component for this as well?

[tsullivan]

I could, but would that be very useful? As a CSS class, it can be applied on any kind of DOM element, but as a React element, it would provide an unnecessary wrapper node. Maybe there is a trick that I don't know though :)

[cjcenizal]

There is a cool trick where we can make a component that clones whatever is passed into it and tweaks it slightly. In this case we just want to add a class to that child:

import React, {
  cloneElement,
  PropTypes,
} from 'react';
import classNames from 'classnames';

export const KuiScreenReaderOnly = ({ children }) => {
  const classes = classNames('kuiScreenReaderOnly', children.props.className);

  const props = Object.assign({}, children.props, {
    className: classes,
  };

  return cloneElement(children, props);
};

KuiScreenReaderOnly.propTypes = {
  children: PropTypes.node,
};

We'd use the component like this:

<KuiScreenReaderOnly>
  <p>This is the second paragraph. It is hidden for sighted users but visible to screen readers.</p>
</KuiScreenReaderOnly>

We're doing something similar with our typography components for K7. Do you want to give this a shot in this branch? Or if you prefer we can merge it as-is and make this change separately.

[tsullivan]

Thanks for the tip! That doesn't look too hard at all. It's nice that it can still be a functional component.

I don't mind adding this change to this PR.

[cjcenizal]

Sweet! Would you also add a test for it please?

[tsullivan]

@cjcenizal I've added the component and the test. This is ready for re-review

[cjcenizal]

LGTM! @timroes Could you take a look too?

[pickypg]

LGTM!

I wonder if, as a future effort, if we can embed logic inside of the KuiScreenReaderOnly to fail hard if it detects that it is contained as part of other pieces of the UI Framework (implying that it should not be used). Possibly as a conditional thing so that we can avoid leaving hidden text on pages that don't need it after they are redesigned.

[tsullivan]

I wonder if, as a future effort, if we can embed logic inside of the KuiScreenReaderOnly to fail hard if it detects that it is contained as part of other pieces of the UI Framework (implying that it should not be used). Possibly as a conditional thing so that we can avoid leaving hidden text on pages that don't need it after they are redesigned.

We chatted about this a little, and I think the important thing to think about is when we see usage of this CSS class, we should treat it the same way we treat a TODO in our code. It will be the mark of a design backlog item. It shouldn't be used a ton, because the design of the page should be navigable and have a visual hierarchy in a way that screen readers can leverage. But until we can start working on those redesigns, this works as a stop-gap.

But even the WebAIM page admits there are rare times when programmers just need to provide an extra hook for accessibility in a way that wouldn't work well for sighted users.

[tsullivan]

6.x/6.1.0: 508d6cb