joomla-cms
joomla-cms copied to clipboard
joomla
Media Actions - Better UX
The current media quick actions, while useful, are confusing as currently displayed:
Depending on the media item, the icons are hard to see, and it's not always clear what each icon means (especially with rename). Additionally, when the mouse leaves the relatively small focus area, the buttons disappear and you have to click into it again. This leads to frustration.
Summary of Changes
I have reworked the display of the actions to include text for sighted users and make it more clear what each icon does. Additionally, I changed the icon for "rename" to one that's more accurate (as the arrows before signified changing width or size).
They now display like so:
It's not a perfect solution - they still disappear when the mouse leaves the focus area - but it should be easier and clearer for people to understand the available functions.
Testing Instructions
As this PR changes build files for JS and CSS, you will have to download the build package from this PR. The patch in the patch tester will NOT work.
Navigate to the media manager. Click on the ellipses icon on an item.
Actual result BEFORE applying this Pull Request
Icon-only actions displayed.
Expected result AFTER applying this Pull Request
A more comprehensive menu displays.
Documentation Changes Required
None that I'm aware of.
Additional Notes
Open to a more elegant solution. Vue.js is not something I'm familiar with so it's possible there's a better way to do this. Regarding accessibility, it should function for keyboard/screenreader users exactly as before.
It’s very much redundant; that’s what the language strings were to begin with. Was considering removing it alsoOn Sep 15, 2022, at 4:35 PM, Brian Teeman @.***> wrote: Does it need the word "item"? Isnt that a redundant word.
—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>
Note to self - need to check what happens with super long language strings. I have a feeling it will break if the translation is too long so I need to anticipate that.
Removing redundant 'item' from media action language strings
@crystalenka remove also for frontend please.
Removing redundant 'item' from media action language strings
@crystalenka remove also for frontend please.
Done, thank you!
Converting to draft, as it's not even close to accessible for keyboard users.
This is ready for review and testing.
There are KNOWN ISSUES for accessibility in the media manager (keyboard access, focus styles, etc) however fixing those would require considerable changes to the markup of the media manager and are outside the scope of this PR. This PR does not introduce additional barriers to access and hopefully mitigates some prior a11y issues regarding understanding of the actions, etc.
@chmst can we discuss in JAT the best way to approach the accessibility here? I am sure it will require minor breaking changes given how everything is currently generated with vue.js
There is a z-index issue, sorry!
I fixed it in the last commit, caught it probably just after you downloaded the build!
I have tested this item :white_check_mark: successfully on befefcddd71db6909258ebfdb8620eeb66cf5d41
Thank you the new menu makes much more sense. Tested successfully.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38771.
I have tested this item :white_check_mark: successfully on befefcddd71db6909258ebfdb8620eeb66cf5d41
Nice improvements
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38771.
Converting this back to draft. Mobile is a mess. I'm frustrated. 😂 Will take another look at this another time. Others are welcome to give it a try also.
@chmst can we discuss in JAT the best way to approach the accessibility here? I am sure it will require minor breaking changes given how everything is currently generated with vue.js
Thanks so much, this is a nice improvement .JAT noted a11y issues since the very begining, some have been resolved, some still are open. Implementing is a challenge, as vue.js is requried, as you say.
It would be so great if the name of the item could be added to the task instead of "item" - but need help in vue.js. @angieradtke suggests "media item" instead of "item" which can be everything
Can you not just hide the item text on small screens and then have another look on mobile in a follow up pr?
It would be really helpful if JAT created issues for any accessibility issues so that developers are able to work on them. If they're not on github no one knows
It would be so great if the name of the item could be added to the task instead of "item" - but need help in vue.js. @angieradtke suggests "media item" instead of "item" which can be everything
in what whay does adding the word item or the words media item add to the meaning of this option?
Can you not just hide the item text on small screens and then have another look on mobile in a follow up pr?
The mobile functionality is unrelated to the language string discussion. It doesn't work.
Leave mobile to another pr
It's broken enough that I don't feel comfortable leaving it as-is.
I don't know HOW I managed it but I figured out the Vue enough to get the item name and put it in an sr-only span as a description of the button.
Hard to debug, so the rendered HTML for each button is:
<button type="button" class="action-rename" aria-describedby="rename-desc">
<span class="image-browser-action fa fa-i-cursor" aria-hidden="true"></span>
<span class="action-text">Rename</span>
<span class="sr-only" id="rename-desc">Rename item: joomla_black.png</span>
</button>
I imagine this will work better than generic 'rename item' etc. :)
Now to get it working better in mobile so I can open this again for testing...
Tested with Narrator
Rename item: joomla_black.png
Tested with NVDA
Rename item: joomla_black.png button Rename item: joomla_black.png
And that of course is not taking into account that there are six buttons which will all be announced with the potentially unpronouncable filename.
This is trying to fix a problem that does not exist - which I am sure @angieradtke will realise when she gets back from holiday and is in front of a computer
Tested with Narrator
Rename item: joomla_black.png
Tested with NVDA
Rename item: joomla_black.png button Rename item: joomla_black.png
And that of course is not taking into account that there are six buttons which will all be announced with the potentially unpronouncable filename.
This is trying to fix a problem that does not exist - which I am sure @angieradtke will realise when she gets back from holiday and is in front of a computer
I was hoping that by using aria-describedby it would be an optional readout instead of reading out everything. Looking into it...
Perhaps aria-details would be better? I don't believe that is read automatically.
Perhaps aria-details would be better? I don't believe that is read automatically.
even better than that it is rarely read at all as most screen readers do not support it