Add a title attribute to sidebar links

[yasoob]

Hi! I apologize in advance if this is not the best place to create this issue. I had a feature request for the online hexdocs viewer.

Currently when a sidebar link is too long, it is very hard to see what the actual link is. This issue is prevalent in Ash docs:

As you can see, it is very hard to tell what comes after "TokenResource" in all of the sidebar entries.

Is it possible to maybe add a handle to expand the sidebar width and store the width value in localStorage? This would let the user expand it as much as they want and have the current width as a sane default.

One other easier option for now is to add a "title" attribute to the sidebar links. This at least would let the user hover over the sidebar link to see what the full link is. For example:

This should be fairly trivial to implement. We can simply use the "href" value and set it as the title attribute as well (which is what I did in the example above).

[josevalim]

@yasoob a pull request would be welcome.

@zachdaniel there is a feature in ExDoc that allows you to collapse namespaces for cases like yours. :)

[josevalim]

@yasoob actually, there is an issue in doing that. Screen readers will read both title and content, reading the same content twice. So we probably need a solution that does not rely on title=....

[yasoob]

I am researching if there is a way to use title and make screen readers discard its value. Just thinking out loud here as I am not an accessibility expert. How about setting the aria-label to an empty string and then setting title to the link name? aria-label takes precedence over title according to my research and this way we can get around the issue you mentioned.

[josevalim]

Good call. I did some tests though and always having the title makes it a bit uncomfortable to navigate. Maybe we can add the title only if after a certain number of characters? Or we figure out a way to remove the elipses on mouse-over.

[yasoob]

Regarding removing the elipses on mouse-over, are you envisioning an expanding sidebar when the elipses are removed? I am not sure how I feel about the layout shift that this would cause. Or if you are thinking about the sidebar being scrollable horizontally once the elipses are removed, that would not work because I don't know how the user can scroll horizontally while hovering over the link.

I am personally in favor of the first suggestion you put forward a.k.a putting the title only after certain number of characters. That seems like a decent trade-off. However, I am not sure how big of a fan you are of the inconsistency this could potentially cause (some links having title attribute and some not). I am in favor of this solution but it is your call now 😄

[josevalim]

I guess making the sidebar width configurable is probably the best option here. As it generally solves the problem.

[yasoob]

That is also a good option. We already have the settings modal. Maybe add this option there? However, the discoverability of that feature would be a bit questionable for those who are not aware of the settings modal.

[zachdaniel]

I will make an issue to collapse module names in our hex packages, but it does seem like some kind of "universal" solution would be a good idea. Like being able to click and drag the sidebar to make more room if you're browsing the list, or something along those lines. Thanks for the heads up :)

[frankdugan3]

Or adding a responsive breakpoint so that sidebar gets wider on larger screens. Even on 1080p, the body max size leaves substantial unused space while truncating the menu.

[josevalim]

@frankdugan3 I am pushing an option to resize the sidebar but a PR that adds another breakpoint for larger screens is definitely welcome.

[zachdaniel]

I'll still use the namespacing feature, but I appreciate this change, there are plenty of places including outside of Ash where I've encountered this, and have definitely had room to make the sidebar bigger.

[josevalim]

Actually, the breakpoint won't play well with the resizing. 🤔

Perhaps the best option is to store the sidebar width. I will explore this.

[josevalim]

Now it has storage! Please give it a try!