Skip to content

[FIX] Remove title attribute from sidebar items#11298

Merged
ggazzo merged 6 commits intodevelopfrom
fix.room-list-items-title
Jul 17, 2018
Merged

[FIX] Remove title attribute from sidebar items#11298
ggazzo merged 6 commits intodevelopfrom
fix.room-list-items-title

Conversation

@tassoevan
Copy link
Copy Markdown
Member

Closes #4440

@graywolf336 suggested to keep the attribute but replace its value with room topic or description; however, the sidebar renders items from subscriptions collection, not rooms, therefore there is no easy way to implement it without break things server-side.

@tassoevan tassoevan added type: bug area: ui/ux Related to UI/UX, frontend code, accessibility, and user interaction labels Jun 29, 2018
@tassoevan tassoevan added this to the 0.67.0 milestone Jun 29, 2018
@tassoevan tassoevan requested review from ggazzo and sampaiodiego June 29, 2018 22:20
@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-11298 June 29, 2018 22:20 Inactive
@tassoevan tassoevan force-pushed the fix.room-list-items-title branch from 8777e56 to 691a447 Compare June 29, 2018 22:21
@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-11298 June 29, 2018 22:21 Inactive
Copy link
Copy Markdown
Contributor

@vynmera vynmera left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tests need to be updated, they expect an element with the title attribute. Perhaps we can use a data attribute (data-name or w/e) instead, if the tests have to be done on an attribute.

@sampaiodiego
Copy link
Copy Markdown
Member

IMHO we should keep the title with the channel name because this is the only way to read long channel names without entering them.

I'll reply to the issue as well.

@tassoevan
Copy link
Copy Markdown
Member Author

@sampaiodiego While I agree with that usage of the title attribute, using the default system tooltip for that is pointless without a mouse: keyboard and touch interactions don't benefit that much from it. Maybe expand the element on hover/long press touch to not add a text ellipsis works better.
@ggazzo and @vynmera: what are your thoughts on this?

@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-11298 July 2, 2018 13:56 Inactive
@tassoevan
Copy link
Copy Markdown
Member Author

Maybe add title attribute over demand?
peek 2018-07-02 14-06

@karlprieb
Copy link
Copy Markdown
Contributor

@tassoevan I really liked your implementation.
You said earlier about users using touch screen... when the user do a long press the title does come up?

@tassoevan
Copy link
Copy Markdown
Member Author

@karlprieb No tooltips in mobile browsers at all.

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).
https://www.w3.org/TR/html5/dom.html#the-title-attribute

I tried to implement the same custom tooltips used in the sidebar header buttons, but they doesn't work in mobile too. I also tried to expand the sidebar item as PoC, but the required effort was bigger than I expected due to overflow: hidden and fixed heights set in many elements.

I noticed that many texts are ellipsed in mobile and you need a lot of taps to see their content. Specifically talking about channel names, even in a room you don't have a option to completely see its name without opening "Room Info".

My fix just contemplates desktop users for now and I think we need to understand what would be better from the users.

@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-11298 July 3, 2018 14:59 Inactive
vynmera
vynmera previously approved these changes Jul 3, 2018
Copy link
Copy Markdown
Contributor

@vynmera vynmera left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your fixes :)

karlprieb
karlprieb previously approved these changes Jul 3, 2018
'click [data-id], click .sidebar-item__link'() {
return menu.close();
},
'mouseover .sidebar-item__link'(e) {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should the mouseenter event be used? since it needs to be checked only once

@ggazzo ggazzo merged commit 174690d into develop Jul 17, 2018
@ggazzo ggazzo deleted the fix.room-list-items-title branch July 17, 2018 23:24
@theorenck theorenck modified the milestones: 0.67.0, 0.68.0 Jul 19, 2018
@sampaiodiego sampaiodiego mentioned this pull request Jul 28, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: ui/ux Related to UI/UX, frontend code, accessibility, and user interaction type: bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants