Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Green squares is not accesible #88

Open
2 tasks done
bdougie opened this issue Dec 14, 2022 · 21 comments · May be fixed by #249
Open
2 tasks done

Feature: Green squares is not accesible #88

bdougie opened this issue Dec 14, 2022 · 21 comments · May be fixed by #249
Assignees
Labels
💡 feature help wanted Extra attention is needed

Comments

@bdougie
Copy link
Member

bdougie commented Dec 14, 2022

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.

Screen Shot 2022-12-14 at 9 35 50 AM

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
Copy link

.take

@SimranjitKaurMaan
Copy link

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

@shamimbinnur

This comment was marked as abuse.

@0-vortex
Copy link

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:
Screenshot 2023-01-14 at 18 00 24

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

@a0m0rajab
Copy link

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

@bdougie
Copy link
Member Author

bdougie commented Jul 26, 2023

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

Screen Shot 2023-07-26 at 6 59 48 AM

@dev-phantom
Copy link
Contributor

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: Screenshot 2023-01-14 at 18 00 24

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

where do i start with this?

@a0m0rajab
Copy link

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 CBID2 added help wanted Extra attention is needed and removed 👀 needs triage labels Sep 17, 2023
@CBID2
Copy link

CBID2 commented Sep 17, 2023

.take

@github-actions
Copy link

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

@dev-phantom
Copy link
Contributor

.take

Sorry to ask
Don't mean to sound rude

Please how do you intend to fix this?

@github-actions
Copy link

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
Copy link

CBID2 commented Sep 17, 2023

.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
Copy link

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
Copy link

CBID2 commented Sep 17, 2023

.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
Copy link

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
Copy link
Contributor

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
Copy link

CBID2 commented Nov 14, 2023

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
Copy link
Member

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.

@CBID2 CBID2 self-assigned this Jan 18, 2024
@Arol15
Copy link

Arol15 commented Jan 21, 2024

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

Screen Shot 2023-07-26 at 6 59 48 AM

@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
Copy link
Member Author

bdougie commented Jan 21, 2024

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

@CBID2 CBID2 linked a pull request Apr 17, 2024 that will close this issue
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💡 feature help wanted Extra attention is needed
Projects
None yet
9 participants