Only show mouseover-title on text in navigationItem #1098
Conversation
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
|
The idea for the title on the navigation item is that it shows the entire title if it’s ellipsized – which I would also keep (of course in the example it doesn’t really get across as it’s a very short name). The point in the issue was about the same title being shown on the actions, which seems like duplication. There my question for @skjnldsv if this was because of some accessibility guidelines. :) |
This comment has been minimized.
This comment has been minimized.
jotoeri
changed the title
jotoeri
force-pushed
the
fix/navigation_mouseover_title
branch
from
f6fcb25
to
e5766a3
Compare
|
Rebased & Squashed. |
Yup! I would even say that only showing it on the title is fine. :) |
Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
jotoeri
force-pushed
the
fix/navigation_mouseover_title
branch
from
e5766a3
to
1597302
Compare
jotoeri
changed the title
|
:D ok. So now it's only on title.^^ |
| @@ -130,7 +129,9 @@ Just set the `pinned` prop. | |||
| class="app-navigation-entry-icon"> | |||
| <slot v-if="!loading" v-show="isIconShown" name="icon" /> | |||
| </div> | |||
| <span class="app-navigation-entry__title">{{ title }}</span> | |||
| <span class="app-navigation-entry__title" :title="title"> | |||
There was a problem hiding this comment.
We don't need a title here as there is some actual visible text content with the exact same information.
https://a11yproject.com/posts/title-attributes/
Short answer: Don’t use them, except in special circumstances.
There was a problem hiding this comment.
From side of accessibility, yes, you're right.
Jan's argument to not fully remove it, was for long titles, that get cut and only show the three dots. So they are not visible anymore, and then to be able to see the full text?
Here on forms:
There was a problem hiding this comment.
Good point @juliushaertl, but as @jotoeri said the initial reason why we added the title is to offer a way for mouse-users to see the whole title when it’s longer than the width of the navigation.
So to just fix the issue at hand with it appearing too often but not to cut off the entire functionality, I’d say we should merge this. :) We could then separately look into if we can e.g. only show the tooltip if the text overflows in the first place, if possible?
On forms, @jancborchardt recognized, that the actions-menu of navigationItems shows the form-title on mouseover.
This PR now shifts the title-attribute, into the Title-span, so it is only visible there. Actions-Menu as well as counter do not show the title anymore.
Before (imagine a cursor above the small label):
After:
