Consider adding aria-labelledby to .timePosted for accessibility

[adamjohnson]

Steps to reproduce the issue

1. Use Twitter Post Fetcher and output tweets with .timePosted visible.
2. Make sure multiple tweets from the same day are visible (like in the image above).

Results

Twitter Post Fetcher will output links like "Posted on March 1, 2018" for each tweet posted on March 1st.

Request

WCAG 2.0 suggests links with the same link text to use either aria-labelledby or aria-label. Would you consider adding aria-labelledby to .timePosted? The aria-labelledby can point to .tweet.

Here's the spec. The Siteimprove Chrome Extension is a great tool to help test accessibility issues like this. MDN Docs for aria-labelledby.

[jasonmayes]

This is simply taking whatever Twitter passes back to us int he JSON object and outputs that. If you want to re-format you would need to write a custom function to call upon all date fields returned.

[jasonmayes]

Oh wait you are saying to add that class to our output? Eg https://github.com/jasonmayes/Twitter-Post-Fetcher/blob/master/js/twitterFetcher.js#L361 and the lines below that also inject that classname

[adamjohnson]

This is what we implemented:

https://www.diffchecker.com/c6wmeUaz

The tweet receives an id, then the aria-labelledby is added to the anchor tag for the time posted.

Here's an HTML example:

<ul>
  <li>
    <p class="tweet" id="tweet--1">Hey, this is my first tweet!</p>
    <p class="timePosted">
      <a href="#" aria-labelledby="tweet--1">Posted on Mar 8, 2018</a>
    </p>
  </li>

  <li>
    <p class="tweet" id="tweet--2">This is my second tweet.</p>
    <p class="timePosted">
      <a href="#" aria-labelledby="tweet--2">Posted on Mar 8, 2018</a>
    </p>
  </li>
</ul>

[jasonmayes]

Closing as this can be achieved using advanced example and constructing own html if needed.