Feature: Green squares is not accesible

[bdougie]

Type of feature

🍕 Feature

Current behavior

reported here.

The “We are more than green squares” graphic is visually cool, but is marked up by 4 distinct block elements. A screen reader would likely read that as 4 paragraphs. The graphic could be marked up by a single

containing spans to chop it up visually via CSS.

Suggested solution

This image should convert to a custom CSS.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[SimranjitKaurMaan]

.take

[SimranjitKaurMaan]

can we modify the svg image to fit our purpose instead of custom css?

[0-vortex]

can we modify the svg image to fit our purpose instead of custom css?

No, the scope of the issue is to replace it with css as described in the suggested solution:

If you don't know where to start with that, we can help if you ask questions!

[a0m0rajab]

Should this be closed as not planned due to having a different design right now?

[bdougie]

Still exist here https://opensauced.pizza/teams

[dev-phantom]

can we modify the svg image to fit our purpose instead of custom css?

No, the scope of the issue is to replace it with css as described in the suggested solution:

If you don't know where to start with that, we can help if you ask questions!

where do i start with this?

[a0m0rajab]

I did not have a look at the code, but based on the suggested solution, you might start by googling SVG to CSS and see how things go for you.

[CBID2]

.take

[github-actions]

Thanks for taking this on! If you have not already, join the conversation in our Discord

[dev-phantom]

.take

Sorry to ask
Don't mean to sound rude

Please how do you intend to fix this?

[github-actions]

Thanks for being interested in this issue. It looks like this ticket is already assigned to a contributor. Please communicate with the assigned contributor to confirm the status of the issue.

[CBID2]

.take

Sorry to ask

Don't mean to sound rude

Please how do you intend to fix this?

Hi @dev-phantom! :) I'm going to convert the svg into CSS with a converter. Then, I'll lookup the colors' accessibie counterparts.

[github-actions]

Thanks for being interested in this issue. It looks like this ticket is already assigned to a contributor. Please communicate with the assigned contributor to confirm the status of the issue.

[CBID2]

.take

Sorry to ask
Don't mean to sound rude
Please how do you intend to fix this?

Hi @dev-phantom! :) I'm going to convert the svg into CSS with a converter. Then, I'll lookup the colors' accessibie counterparts.

Hey @dev-phantom. I created the PR for this issue. I'd love to have your feedback on it. It's #164

[github-actions]

Thanks for being interested in this issue. It looks like this ticket is already assigned to a contributor. Please communicate with the assigned contributor to confirm the status of the issue.

[shamimbinnur]

Hey @CBID2, any updates on this issue?
I'm unsure why we're converting this image into CSS if screen readers can't interpret CSS elements. My suggestion is to leave the 'Green Square' as it is and simply add the alt text 'Green Square' for accessibility.

CC @bdougie

[CBID2]

Hey @CBID2, any updates on this issue?

I'm unsure why we're converting this image into CSS if screen readers can't interpret CSS elements. My suggestion is to leave the 'Green Square' as it is and simply add the alt text 'Green Square' for accessibility.

CC @bdougie

Still working on it @shamimbinnur.

[nickytonline]

Unassigning you for the moment @CBID2 as the PR has been open since September 2023. If you decide to pick this up again, feel free to assign yourself.

[Arol15]

Still exist here https://opensauced.pizza/teams

@bdougie @a0m0rajab can you confirm that this change is only expected for the teams page and not home page?
GitHubMock.tsx is not being used for the home page and making changes to it, for some reason, makes the build fail, as I think useMediaQuery returns null and causing type error. Or changes need to be done to useMediaQuery as well.

[bdougie]

Correr. That asset got moved to /teams but still exists live on the page.