Open afercia opened 6 months ago
I think that in addition to the sticky information, the anchor text also needs to be conveyed to the screen reader. I'm at a loss as to what is the appropriate way to convey this when these things are combined...
Thanks @t-hamano. Yes I wanted to investigate other potential icon / things that may be rendered within the list view items. The anchor
is a good one. I also want to investigate the image previews.
Any more potential things that may be shown there you can think of?
Looking at the List View implementation, there are four pieces of information that may be displayed in addition to the block name:
Currently, only theGroup block supports sticky position, but image thumbnails will not be displayed in this block. However, assuming that image thumbnails are also supported in the future, it is possible that all four pieces of information will be displayed.
In that case, will it be a long label like Group (Locked, sticked, anchor text: test, has 4 images)
?
Regarding the 'anchor' information, I wonder how displaying truncated text that doesn't actually help understand what the anchor is, is any useful for users. Also, there's potentially really too much stuff and info provided within the list view items.
Overall, I think hiding or truncating text 'just to make it fit into the design` is less than ideal. Content should never be hidden. The interface should be designed around the content and not vice-versa.
Each list view item can get to a state where the UI is really not useful. Example screenshot:
I agree that depending on the block settings, the current list view displays too much information. We may need to reconsider the information that should be displayed in the list view and its ideal state.
cc @gutenbergplugin
With the new Bindings API, there's now a new information provided by only icon: Bound blocks will display this purple icon:
There is no textual information in this case as well.
From a techinical perspective, the current code implementation appears to be less than ideal:
Tooltip
component is used only for this icon.Tooltips don't work with icons anyways,
Turns out the tooltip on the 'sticky position' icon stopped working after https://github.com/WordPress/gutenberg/pull/57202 so this is a regression from WordPress 6.4 where this tooltip does work. Cc @ciampo not sure this is the intended behavior of the check for nested tooltips.
Screenshot:
We should remove the tooltip anyways because:
tabindex="0"
to the SVG icon.tabindex="0"
to any element where a Tooltip is set to is far from ideal because it will make unsemantic elements with tooltips focusable e.g. focusable div
elements and such.Sorry for the delay, still catching up after having been AFK for a while.
@afercia as you point out, Tooltip
should not be rendered inside an interactive element (an anchor tag). This is an incorrect use of the component, which leads to inconsistent and unexpected results. I've opened #63850 to remove it.
Are there any other issues that need to be addressed regarding this issue?
@afercia may be AFK right now, but looking through his feedback, I think that a good solution could be to make sure:
position
icon in https://github.com/WordPress/gutenberg/pull/63850)Do we already have descriptions for all possible icons that can be displayed in the list view?
Thanks for the reply.
I re-read this issue and it seems that the information other than the block name displayed in the list item, and whether it is read out properly, is as follows:
So it might be best to leave this issue open for now.
Description
In the List view, some icons may be shown to provide information about some block properties, for example:
Screenshot:
While for the 'locked' state a text
(locked)
is appended to the block item aria-label, there's no textual information for the 'sticky' case.As such, there's no parity between the visual information provided to sighted users and the textual information provided to users with no vision or low vision or users who don't recognize icons meaning.
Ideally, this kind of important information should be provided by the means of visible text.
At the very least, the 'sticky' state should be communicated by the means of some visually hidden text or description
Step-by-step reproduction instructions
Group (locked)
.Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes