aws/awsui-documentation

Add `title` prop to `Link` component

Closed this issue · 1 comments

I have a link: <Link className="xyz" href="/path/to/webpage">Really long webpage title</Link>
My link uses the following CSS properties to truncate:

.xyz {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

As a result, in order to fit in its container, my link appears as Really long web..., cutting off the rest of the link (as expected).

My problem now is that it's impossible for users to know what the full title is. I want to support the standard <a> attribute title:

<Link className="xyz" href="/path/to/webpage" title="Really long webpage title">Really long webpage title</Link>

Please add this accessibility attribute.

Hi, the title attribute unfortunately has some usability concerns that make it very difficult or impossible for non-mouse users to access it. The MDN docs and the HTML spec thus recommend not to use it.

Instead, we would recommend you to show the full text of the link (e.g. by letting it wrap) instead of using text-overflow: ellipsis.