Reader: Discover featured posts accessibility improvements #27089
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
bluefuton
added
[Status] In Progress
[Feature] Reader
bluefuton
force-pushed
the
fix/a11y/site-stream-featured
branch
from
a86bfae
to
a14ca2e
Compare
bluefuton
changed the title
bluefuton
added
[Status] Needs Review
bluefuton
commented
Sep 21, 2018
| class FeedFeatured extends React.PureComponent { | ||
| static displayName = 'FeedFeatured'; | ||
|
|
||
| componentDidMount() { | ||
| this.props.requestPage( { streamKey: this.props.streamKey } ); | ||
| if ( ! this.props.posts || this.props.posts.length < FEED_FEATURED_MAX_POST_COUNT ) { |
There was a problem hiding this comment.
Previously, it was possible for the same set of posts to appear twice if the component re-mounted.
|
Looks good in IE11:
|
jancavan
reviewed
Sep 21, 2018
client/reader/site-stream/style.scss
Outdated
| position: relative; | ||
| padding: 0 24px 0 24px; |
There was a problem hiding this comment.
Small nitpick: I would just do 0 24px here.
bluefuton
force-pushed
the
fix/a11y/site-stream-featured
branch
from
a14ca2e
to
5bfc556
Compare
|
I think this is good to go @bluefuton ? |
bluefuton
added
[Status] Ready to Merge
and removed
[Status] Needs Review
blowery
reviewed
Oct 9, 2018
| @@ -63,14 +68,14 @@ class FeedFeatured extends React.PureComponent { | |||
| }; | |||
|
|
|||
| return ( | |||
| <div | |||
| <button | |||
There was a problem hiding this comment.
maybe make this a big anchor instead of a button? It has a URL after all.
There was a problem hiding this comment.
That's actually a better idea than my button, but also scuppers all the styles, especially in the small viewport version 🤦♂️
I'll ship this for now and bear it in mind for future improvements 👍
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The featured posts block, as used in Discover, doesn't currently pass our a11y lint check.
This PR aims to fix that by using a
buttonelement and re-styling accordingly.To test
Visit http://calypso.localhost:3000/discover.
You can also run the linter and check that there are no a11y warnings:
npx eslint client/reader/site-stream/* --ext js,jsxEnsure that the appearance of the featured block is the same, both above and below 960px width:
http://calypso.localhost:3000/discover
vs
https://wpcalypso.wordpress.com/discover
Todo