PLANET-5256 "Post type + Hashtag" component Accessibility

[planet-4]

We have this tiny widget in some places, that looks like this:

People · #Consumption #Oceans

This is in some page headers, and search/article teasers. The mid dot is read aloud, make sure the mid dot char is hidden to Screen Readers using aria-hidden and check the Hashtag Accessibility ticket to deal with some potential issues with Hashtags. The dot is currently a :before CSS pseudo-element, so this probably needs to be refactored.

Notes: For the pseudo element we might be able to solve this with media queries so we don't have to change the markup.

Screenshots

Reporter: pcuadrad
Sections: 

Potentially affected repositories: planet4-plugin-gutenberg-blocks, planet4-master-theme

Testing

• You can test the Articles block by adding it to a page and testing it with a screen reader (it should also be present on your local homepage). You can check the docs for more details on how the block works.
• For the page headers, you can check some posts on your local (for example this one)

[akankshakmr174]

I can work on this! :)

[aliya-rahmani]

@akankshakmr174 go ahead and raise a PR for this issue.

[akankshakmr174]

@aliya-rahmani This issue seems to be resolved. Checked with voiceover and NVDA on Chrome.