fix: make "we are more than... green squares" slogan accessible

[CBID2]

Description

This PR adds <span> elements to the "We Are More Then Green Squares" image, making it easier for screen reader users to navigate the website.

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• 🧑‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert

Related Tickets & Documents

Fixes #88

Mobile & Desktop Screenshots/Recordings

Note: The audio does not play due to technical difficulties

green.square.accessibility.test.mov

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed
• 🙋 no, because I need help

Added to documentation?

• 📜 README.md
• 📓 docs.opensauced.pizza
• 🍕 dev.to/opensauced
• 📕 storybook
• 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

Note to Reviewers

I used this tool to get the CSS.

[netlify]

✅ Deploy Preview for opensauced-landing ready!

Name	Link
🔨 Latest commit	c77a016
🔍 Latest deploy log	https://app.netlify.com/sites/opensauced-landing/deploys/65af12a08c7ce30008cdf128
😎 Deploy Preview	https://deploy-preview-164--opensauced-landing.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: Accessibility: Best Practices: SEO: PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nickytonline]

@CBID2, here's my suggestion. TLDR, add one paragraph element around the current paragraphs. Change the current paragraphs to spans, and at the end add a span with the text green squares with the sr-only class to make it only visible to screen readers. For the image, make the alt text empty (don't remove it).

That should make this more accessible.

<span className="sr-only">green squares</span>

-      <div className="flex pb-16 px-10 tablet:px-0 items-center justify-center largeTablet:pb-14">
-        <div>
-          <p className="text-textPrimary font-inter font-bold text-[2.375rem] leading-[3.625rem] largeTablet:text-5xl largeTablet:leading-[4.5rem]">
-            We are
-          </p>
-          <p className="font-inter font-bold pl-16 tablet:pl-20 text-[3.25rem] leading-none largeTablet:text-8xl">
-            <DecoratedText content="$orange-to-yellowmore" />
-          </p>
-          <p className="font-inter font-bold pl-32 tablet:pl-40 tracking-[-0.03em] text-[4.25rem] leading-none largeTablet:text-9xl">
-            <DecoratedText content="$orange-to-yellowthan..." />
-          </p>
-        </div>
-      </div>
-      <div className="pb-16 largeTablet:pb-52">
-        {isLargeTablet ? (
-          <Image alt="Green Squares text" src={GreenSquares} />
-        ) : (
-          <Image alt="Green Squares text" src={GreenSquaresSmall} />
-        )}
-      </div>
+       <div className="flex pb-16 px-10 tablet:px-0 items-center justify-center largeTablet:pb-14">
+         <p>
+           <span className="block text-textPrimary font-inter font-bold text-[2.375rem] leading-[3.+ 625rem] largeTablet:text-5xl largeTablet:leading-[4.5rem]">
+             We are
+           </span>
+           <span className="block font-inter font-bold pl-16 tablet:pl-20 text-[3.25rem] leading-none + largeTablet:text-8xl">
+             <DecoratedText content="$orange-to-yellowmore" />
+           </span>
+           <span className="block font-inter font-bold pl-32 tablet:pl-40 tracking-[-0.03em] text-[4.+ 25rem] leading-none largeTablet:text-9xl">
+             <DecoratedText content="$orange-to-yellowthan..." />
+           </span>
+           <span className="sr-only">green squares</span>
+         </p>
+       </div>
+       <div className="pb-16 largeTablet:pb-52">
+         {isLargeTablet ? (
+           <Image alt="" src={GreenSquares} />
+         ) : (
+           <Image alt="" src={GreenSquaresSmall} />
+         )}
+       </div>

[CBID2]

@nickytonline and @bdougie, I made the necessary changes but for some reason I keep getting errors. So far, I tried adding a variable called largeTabletImage but it did not work. Any other tip?

[BekahHW]

@CBID2 can you share the error message?

[CBID2]

@CBID2 can you share the error message?

Here you go @BekahHW: https://app.netlify.com/sites/opensauced-landing/deploys/65594d6ee30cfc000802378c

[nickytonline]

I'm going to go ahead and close this as it's been open since September 2023. Feel free to reopen if you plan to continue working on this.

[BekahHW]

Hey @CBID2 if the build is failing, it's not ready for review. Please go the through the process of checking the build before requesting a review.

[CBID2]

Hey @CBID2 if the build is failing, it's not ready for review. Please go the through the process of checking the build before requesting a review.

Oh sorry @BekahHW.

[adiati98]

Hey @CBID2,

As @BekahHW suggested here, you want to go through the details and check why the Netlify is failing.
Giving the link to the whole summary as you mentioned in your previous comment is not quite helpful.

Whenever you get Netlify build failed, you want to:

1. Check what the error is by clicking the details link on the first failure.
2. Click the log where the failure happens.
3. Scroll down and find what is the error message.
4. Google to find out if there's any same problem occured and how did others resolve it. Try those solutions.
5. If you don't find any answers or get stuck after you try to resolve it, only by then, copy the exact error message or make a screenshot of the exact error (not the whole summary page) and write a comment. In the comment, explain:
   • what've you tried to resolve the problem and why you used those approaches,
   • what were the results,
   • ask what step should you do to resolve it.

That way, either maintainers or any other contributors can help you out if you get stuck. And by giving the information of the exact error, it will help everyone to help you faster. Hope this helps :)

[bdougie]

Though this page this exist, it has been moved. Closing this for now, since it has way to catch up.

[CBID2]

Though this page this exist, it has been moved. Closing this for now, since it has way to catch up.

Can I cherry pick the commits in a new PR for it @bdougie?

[bdougie]

That's fine

[CBID2]

That's fine

Hey @bdougie. I made the new PR here: #249