fix: Add the non-truncated text in the title attribute (#1598)

The `.card-title` element carries `text-overflow: ellipsis`, (and
`white-space: nowrap`), resulting in the last part of long article
titles not being visible. By adding it to the `title` attribute,
one can see the full title on hovering without having to visit the
article first.

The main concern I had was that the text is now technically
duplicated in the source code, and for short titles, also in the
UI. The primary concern there, however, was screen reader users
getting duplicate announcements. However, I believe the title
attribute is not announced by screen readers, which this (old)
article seems to confirm:
https://developer.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/

That leaves the following two disadvantages:
- This doesn't solve anything for mobile users, who will still
  have to follow the link to see the full title.
- Desktop users can however a (non-truncated) title to see the same
  title again.
This commit is contained in:
Vincent 2019-10-24 06:54:57 +02:00 committed by Nolan Lawson
parent 2b63afd4bb
commit 852a8582fb

View file

@ -1,5 +1,5 @@
<a ref:cardlink href={url} class="status-card" target="_blank" rel="noopener noreferrer">
<strong class="card-title">
<strong class="card-title" title={unescapedTitle}>
{unescapedTitle}
</strong>
{#if description}