Add aria-hidden to decorative stars

[sofiakanopi]

The star decorative elements were being read by screen readers. I applied the missing aria-hidden="true" attribute.

[richtabor]

Unfortunately modifying the <p> breaks it from having editable attributes. Editing it like so in the editor results in unexpected content as well.

CleanShot.2023-08-28.at.10.16.30.mp4

[richtabor]

@MaggieCabrera Maybe there's a way in core to allow aria-hidden in the paragraph, without all the disruption? We likely don't need a UI for it, but would be nice to apply it manually and the other attributes still function.

[sofiakanopi]

@richtabor in this case, would it be better to have an image for this item as proposed by @jessynd in the issue ticket?

[richtabor]

@richtabor in this case, would it be better to have an image for this item as proposed by @jessynd in the issue ticket?

What if we used the site logo + site title blocks?

[MaggieCabrera]

I like the idea of having the glyph though, and I think it's legitimate to have the ability to do so. I wonder if something like this should live under the advanced tab in the editor like we have the option to change the html tag from div to something else. In any case, I'm going to investigate if there are GB issues open for this, and worse case scenario we go with the image idea as a plan B if there are no ways in core to have the glyph be accessibly hidden

[carolinan]

What about using the HTML block?

[richtabor]

It probably should be the site logo + title. I don't imagine folks would want a random glyph in their footer, but would want their logo. It's almost a placeholder for logo at the moment anyhow.

[carolinan]

I agree that it makes sense for the site header and site footer parts.
But the glyphs are in other places, too.

[richtabor]

Yea, header and footers for sure.

The HTML block isn't great for this though. The preview will show the HTML editor and the page will look broken.

[carolinan]

Well, there is "Allow setting default (to) preview for HTML blocks" WordPress/gutenberg#40913

[MaggieCabrera]

@beafialho I would love your opinion on this. @scruffian yours too for a technical perspective

[afercia]

The only reliable way to solve this issue is to not use unicode characters for icons to start with.

Uniocode characters are text. Text is read out by screen readers, typically by announcing the character name based on the Unicode characters table.

Also, unicode characters are rendered slighly different depending on the operating system and the browser in use. Overal, I'd think using unicode characters is less than ideal also visually.

There is a reason why in the Editor and in other themes we're using SVG icons instead. I'd recommend to consider how to switch to SVGs.

[carolinan]

If we want to use svg's, but also can't use the HTML block, the only way to do that is to add them with CSS only, and the styles with the stars could be custom block styles (aka block style variations).

• An image block with an empty alt can be used to add the stars but does not work with svg's.

[afercia]

Worth also pointing out that this applies to all unicode characters including for example the em dash used in the post meta. That's actually read out as em dash:

Although it isn't visible (at least for me, not sure it's intentional), it does get read out. One coudl argue that since its purpose is to actually separate the meta, then it may be OK that it gets read out. However, the em dash has a specific purpose in classic typography and I'd think this is not the case for the post meta, where it is used more as a visual separator. As such, it's more decorative rather than semantic and it should be hidden from assistive technology.

[beafialho]

@beafialho I would love your opinion on this

I'm afraid I can't provide a technical perspective. If it's needed, the icons can be SVG. I thought that wasn't possible in the editor though.

[scruffian]

One option could be to use a SVG, which would work if we merge this old PR: WordPress/gutenberg#40496

[luminuu]

+1 for SVGs. What can we do to push this forward in the Gutenberg repo @scruffian?

[scruffian]

We'd need to keep looking into the icon block work: WordPress/gutenberg#16484

[richtabor]

We'd need to keep looking into the icon block work: WordPress/gutenberg#16484

@scruffian That seems unlikely to land in 6.4. Do you think we could get aria-hidden as a valid HTML property on the RichText content instead? That potentially feels small enough to make it in time.

[luminuu]

@scruffian Pinging you again for some feedback on @richtabor's last question, regarding the RichText content. Is this something we could push forward to be implemented in 6.4?

[carolinan]

I experimented a bit with adding an SVG to the separator block with CSS but the coloring does not work: We need it in different colors for the style variations.

[MaggieCabrera]

I experimented a bit with adding an SVG to the separator block with CSS but the coloring does not work: We need it in different colors for the style variations.

I just did the same here and it worked for me with some CSS magic. Please have a look and let me know what you think