Skip to content

Instantly share code, notes, and snippets.

@comp615
Created September 21, 2018 00:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save comp615/64df1b199fc6746d55ccbfe5c1b01820 to your computer and use it in GitHub Desktop.
Save comp615/64df1b199fc6746d55ccbfe5c1b01820 to your computer and use it in GitHub Desktop.
A basic use case example for when referencing domIds in a label might provide advantages over recreating a string
class Tweet {
render() {
// Visually the order here might make sense because of the squiggles and dots connecting it all
// but to screenreader users, we want to present the information in more of an RSS form that
// makes sense when read aloud. This includes reordering content and skipping reading some action buttons or labels
// unless they drill in or tab through the clickable items. This way they can more quickly consume the feed content.
//
// Note: because each item has lots of specialized formatting content, it would be hard/duplicative
// to exactly recreate the perfect string here outside of those sub-components
return (<View accessible aria-labelledby='userDomId timeDomId quotedDomId textFormatterDomId visuallyHiddenActivitySummaryDomId'>
<User />
<MoreOptionsMenuButton />
<TextFormatter />
<Actions />
<VisuallyHiddenActivitySummary />
<QuotedTweet>
<Time />
</View>);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment