open-sauced
Feature: Green squares is not accesible
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
- [X] I agree to follow this project's Code of Conduct
Contributing Docs
- [X] I agree to follow this project's Contribution Docs
can we modify the svg image to fit our purpose instead of custom css?
can we modify the
svgimage to fit our purpose instead of custom CSS?
@SimranjitKaurMaan Why do you think it's necessary to modify the green-square SVG?
can we modify the
svgimage 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!
Should this be closed as not planned due to having a different design right now?
can we modify the
svgimage 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?
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.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
.take
Sorry to ask Don't mean to sound rude
Please how do you intend to fix this?
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.
.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.
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.
.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
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.
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
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.
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.
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.
