Improve (accessibility title) and move action-buttons on left in tables

[kimsible]

• Add ability to hide label on my-edit-button, my-delete-button, my-button
• Replace native title of my-edit-button, my-delete-button, my-button by ngbTooltip
• Move actions tables on the left but for group actions (users view ...)

[kimsible]

@rigelk NgbTooltip is as accessible as title attribute ?

I'm not sure, maybe we should keep native title...

EDIT: Found that Bootstrap handle accessibility (especially for blind peoples) with a focusable css attribute aria-describedby, and in the admin tables we defined these actions displayed only on :hover event :/, I suggest to always display (99a347c)

[kimsible]

Someone knows why Angular adds a one more tabindex=0 on the component my-edit-button ? so the edit button is focusable 2 times. @Chocobozzz ?

[Chocobozzz]

Move actions tables on the left but for group actions (users view ...)

I'm not sure to understand what is the purpose of such thing? In PeerTube most action buttons are on the right (upload, submit buttons in form, dropdown buttons etc)

Someone knows why Angular adds a one more tabindex=0 on the component my-edit-button ? so the edit button is focusable 2 times

It's a bug on our side. We should not use routerLink as Input property because it creates an angular link directive (that seems to adds a tabindex attribute on itself)

Please rebase (you have conflicts)

[kimsible]

It's a bug on our side. We should not use routerLink as Input property because it creates an angular link directive (that seems to adds a tabindex attribute on itself)

thanks, maybe it should be fix in another PR.

Move actions tables on the left but for group actions (users view ...)

I'm not sure to understand what is the purpose of such thing? In PeerTube most action buttons are on the right (upload, submit buttons in form, dropdown buttons etc)

On small screens or with the left menu, sometimes, since we make the table horizontally scroll, the actions are not visible (especially on tablets and small laptops), so I don't know if it's the right thing to do but the intention was there, helping the user to know that some actions are possible (if that user is not a modo / admin for example).

I will rebase, and maybe we need to discuss more about it with the recents propositions of @rigelk #2991, Rigelk, what do you think ?

[rigelk]

Move actions tables on the left but for group actions (users view ...)

I'm not sure to understand what is the purpose of such thing? In PeerTube most action buttons are on the right (upload, submit buttons in form, dropdown buttons etc)

On small screens or with the left menu, sometimes, since we make the table horizontally scroll, the actions are not visible (especially on tablets and small laptops), so I don't know if it's the right thing to do but the intention was there, helping the user to know that some actions are possible (if that user is not a modo / admin for example).

I will rebase, and maybe we need to discuss more about it with the recents propositions of @rigelk #2991, Rigelk, what do you think ?

I think we need a different solution for mobile - one that relies more on row selection/touch than column ordering. But arguably in the meantime, it might be easier to just reorder columns.

[kimsible]

I think we need a different solution for mobile

You think for touch devices a different view than desktop ? In my mind we still have to try to be mobile-first as much as possible, put actions on the left are intended to care about user experience on touch devices and small screens.

Yes as Chocobozzz said, valid / send buttons are on the right outside of tables, but I don't really see another solution according to the existent horizontal scrolling for the moment. And really I wouldn't be shocked to see actions on the left.

One that relies more on row selection/touch than column ordering. But arguably in the meantime, it might be easier to just reorder columns.

You mean actions on the left ?

[kimsible]

@Chocobozzz maybe we should wait to merge this PR #2991 before and move actions dropdown on the left here?

[Chocobozzz]

maybe we should wait to merge this PR #2991 before and move actions dropdown on the left here?

Yes, but I'm still convinced that moving actions on the left is not the appropriate way to solve the issue about the horizontal scroll. I'm not sure what the ideal solution is, though.

[kimsible]

maybe we should wait to merge this PR #2991 before and move actions dropdown on the left here?

Yes, but I'm still convinced that moving actions on the left is not the appropriate way to solve the issue about the horizontal scroll. I'm not sure what the ideal solution is, though.

It's not shocking to have actions on the left in a table, even if it's not the better way, make tables responsive is a hard task. I think the best way should be to create another view for mobile. And since it's not what we want, we have to find compromises to make these tables accessible for all screens (small and touch screen included).

Now, PeerTube is a « Desktop first » UI, since the beginning it wasn't the right way to think about the UI. Move actions on the left is the cleanest and most realistic way to fix the fact we loose users on small and touchscreens, and they are several, that's why we take time to improve responsive views since v2.2.

Do you have a better idea @Chocobozzz ?

[NathanPlus]

I understand that peertube was originally designed for desktop but today most of the watchers are on mobile / tablets. Fewer and fewer people have a PC or even a laptop with the correct screen size. I assume that redesigning everything to be responsive is difficult but as a graphic designer it seems important to me to make a minimum of modification, and the scroll is not really a good solution

[kimsible]

[Chocobozzz]

Not a big fan to put actions on the left, but let's try anyway since we don't have a better solution yet