New Website: Add Aria Labels and Better Alt Text #754
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -35,6 +35,7 @@ export default function DDProjects({ title, description, imageSrc }: DDProjectsP | |
| isOpen ? 'bg-red-500' : 'bg-white' | ||
| } w-full max-w-8xl rounded-xl drop-shadow-sm px-10 py-8 border-1 border-[#E4E4E4]`} | ||
| onClick={toggleCard} | ||
| aria-label={`${isOpen ? 'Minimize' : 'Expand'} ${title} student project`} | ||
|
|
||
| > | ||
| <div className="flex justify-between items-center"> | ||
| <h3 className={`md:text-3xl text-xl font-bold ${isOpen ? 'text-white' : 'text-black'}`}> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,7 +10,7 @@ | |
| }, | ||
| "image": { | ||
| "src": "/images/tcpl.jpg", | ||
| "alt": "a DTI member teaching members of the Ithaca community about technology at the Tompkins County Public Library", | ||
| "width": 563, | ||
|
Comment on lines
+13
to
14
|
||
| "height": 328 | ||
| }, | ||
|
|
@@ -30,7 +30,7 @@ | |
| }, | ||
| "image": { | ||
| "src": "/images/half-baked.jpg", | ||
| "alt": "a DTI member presenting a series of graphs at the Half-Baked event", | ||
| "width": 373, | ||
| "height": 263 | ||
| }, | ||
|
|
@@ -49,7 +49,7 @@ | |
| }, | ||
| "image": { | ||
| "src": "/images/bigredhacks.jpg", | ||
| "alt": "a DTI member presenting code at the Big Red Hacks hackathon event", | ||
| "width": 344, | ||
| "height": 263 | ||
| }, | ||
|
|
@@ -68,7 +68,7 @@ | |
| }, | ||
| "image": { | ||
| "src": "/images/millennium.jpg", | ||
| "alt": "DTI members posing in front of the Millennium logo", | ||
| "width": 345, | ||
| "height": 260 | ||
| }, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -128,29 +128,29 @@ | |
| ], | ||
| "images": [ | ||
| { | ||
| "src": "/images/products/dac/dac1.png", | ||
| "alt": "DAC Image 1" | ||
| }, | ||
| { | ||
| "src": "/images/products/dac/dac2.png", | ||
| "alt": "DAC Image 2", | ||
| "top": "50%", | ||
| "left": "-7%", | ||
| "width": "47%", | ||
| "direction": "down" | ||
| }, | ||
| { | ||
| "src": "/images/products/dac/dac3.png", | ||
| "alt": "DAC Image 3", | ||
| "bottom": "11%", | ||
| "right": "-10%", | ||
| "width": "62%", | ||
| "direction": "down", | ||
| "delay": true | ||
| }, | ||
| { | ||
| "src": "/images/products/dac/dac4.png", | ||
| "alt": "DAC Image 4", | ||
| "top": "9%", | ||
| "right": "-18%", | ||
| "width": "45%", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -96,7 +96,7 @@ const SponsorshipTableLaptop = () => ( | |
| key={`${benefit.key}-${tier}`} | ||
| > | ||
| {tiers.indexOf(tier) >= tiers.indexOf(benefit.lowestTier) && ( | ||
| <Image src="/icons/check.svg" alt="checkmark" width={30} height={60} /> | ||
| )} | ||
| </div> | ||
| ))} | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -75,6 +75,7 @@ const MemberDisplay: React.FC = () => { | |
| setSelectedRole(role.altText); | ||
| setSelectedMember(undefined); | ||
| }} | ||
| aria-label={`select ${role.altText} role`} | ||
| > | ||
| <Icon | ||
| icon={`${role.src}_base.svg`} | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -189,6 +189,7 @@ export const MemberDetails: React.FC<MemberDetailsProps> = (props: MemberDetails | |
| onMouseLeave={mouseHandler} | ||
| className="flex items-center justify-center gap-3 py-3 px-5 bg-white rounded-xl text-[#A52424] border-[3px] border-[#A52424] | ||
| hover:bg-[#A52424] hover:text-white stroke-white w-max" | ||
| aria-label={`schedule coffee chat with ${props.firstName} ${props.lastName}`} | ||
| > | ||
| <Image | ||
| src="/icons/red_calendar.svg" | ||
|
|
@@ -211,11 +212,13 @@ export const MemberDetails: React.FC<MemberDetailsProps> = (props: MemberDetails | |
| </button> | ||
| </div> | ||
| <div className="md:hidden xs:block"> | ||
| <Link | ||
| href={props.coffeeChatLink ?? `mailto:${props.email}`} | ||
| onMouseEnter={mouseHandler} | ||
| onMouseLeave={mouseHandler} | ||
| className="py-3 px-5 bg-white rounded-xl text-[#A52424] border-[3px] border-[#A52424] | ||
| hover:bg-[#A52424] hover:text-white stroke-white w-full flex justify-center" | ||
| aria-label={`schedule coffee chat with ${props.firstName} ${props.lastName}`} | ||
| > | ||
| <div className="flex gap-3 w-max"> | ||
| <Image | ||
|
|
@@ -227,7 +230,7 @@ export const MemberDetails: React.FC<MemberDetailsProps> = (props: MemberDetails | |
| /> | ||
| <p className="font-bold text-base text-inherit whitespace-nowrap">Chat with me</p> | ||
| </div> | ||
| </Link> | ||
| </div> | ||
| </Card> | ||
| ); | ||
|
|
@@ -310,7 +313,11 @@ const MemberGroup: React.FC<MemberGroupProps> = ({ | |
| <div className="flex flex-row justify-center flex-wrap gap-x-14 gap-y-10"> | ||
| {members.map((member, index) => ( | ||
| <> | ||
| <button | ||
| onClick={() => onMemberCardClick(member)} | ||
| className="memberCard" | ||
| aria-label={`open ${member.firstName} ${member.lastName}'s details`} | ||
| > | ||
| <MemberCard | ||
| {...member} | ||
| key={member.netid} | ||
|
|
@@ -343,7 +350,11 @@ const MemberGroup: React.FC<MemberGroupProps> = ({ | |
| > | ||
| {members.map((member, index) => ( | ||
| <> | ||
| <button | ||
| onClick={() => onMemberCardClick(member)} | ||
| className="memberCard" | ||
| aria-label={`open ${member.firstName} ${member.lastName}'s details`} | ||
| > | ||
|
Comment on lines
+355
to
+357
|
||
| <MemberCard | ||
| {...member} | ||
| key={member.netid} | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -47,8 +47,8 @@ const ImageModal: React.FC<ImageModalProps> = ({ | |
| className="flex justify-center items-center h-full gap-[70px] md:scale-75 lg:scale-100" | ||
| onKeyDown={handleKeyDown} | ||
| > | ||
| <button onClick={handlePrev} ref={modalRef} aria-label="navigate to previous photo"> | ||
| <img src="/icons/arrow.svg" alt="" width={20} className="cursor-pointer" /> | ||
| </button> | ||
| <Carousel | ||
| opts={{ | ||
|
|
@@ -172,7 +172,7 @@ const TeamHero = () => { | |
| className="flex justify-center relative bottom-2 cursor-pointer" | ||
| style={{ pointerEvents: 'none' }} | ||
| > | ||
| <img src="/images/carousel-frame.png" alt="" className="absolute z-10" /> | ||
| <div className="absolute z-10 w-[243px] h-[270px]"> | ||
| <p className={`absolute bottom-0 py-3 px-2 text-[#877B7B] ${ibm_plex_mono.className}`}> | ||
| {`${carouselImages.images[carouselIndex % carouselLength].alt}.jpg`} | ||
|
|
@@ -204,13 +204,14 @@ const TeamHero = () => { | |
| onClick={() => | ||
| setModalShown(index === carouselIndex && width >= TABLET_BREAKPOINT) | ||
| } | ||
| aria-label="open modal" | ||
| > | ||
| <div className="flex justify-center overflow-hidden w-[227px] rounded-md"> | ||
| <img src={image.src} alt={image.alt} className="h-[220px] max-w-none" /> | ||
| </div> | ||
| <img | ||
| src={image.icon} | ||
| alt="" | ||
| width={50} | ||
| height={50} | ||
| className="relative bottom-[62px] left-2" | ||
|
|
||
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -108,7 +108,7 @@ export default function Courses() { | |
| src={'/icons/courses/trends_logo.png'} | ||
| width={450} | ||
| height={450} | ||
| alt="Trends Logo composed of the firebase, react, typescript, nodejs, vscode, and DTI logos." | ||
| unoptimized | ||
| className="w-72 md:w-96 lg:w-[450px]" | ||
| /> | ||
|
|
@@ -142,6 +142,7 @@ export default function Courses() { | |
| key="Trends Website" | ||
| href={config.trendsWebsiteLink} | ||
| className="primary-button" | ||
| aria-label="Trends Website" | ||
| > | ||
| Learn More | ||
| </Link> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -137,9 +137,10 @@ const Home: React.FC = () => { | |
| onClick={scrollToContent} | ||
| className={`text-white md:text-lg xs:text-[16px] font-semibold cursor-pointer flex flex-col items-center z-10 ${ibm_plex_mono.className}`} | ||
| style={{ transition: 'all 0.3s ease' }} | ||
| aria-label="scroll down" | ||
| > | ||
| LEARN MORE | ||
| <img src="/images/arrow.png" alt="" className="mt-3 w-auto h-6" /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -89,7 +89,7 @@ const SponsorPage = () => { | |
| <div className="max-w-5xl flex justify-center p-5 py-24 lg:gap-20 md:gap-10 xs:gap-5 md:flex-row xs:flex-col"> | ||
| <Image | ||
| src="/images/dti_2024.png" | ||
| alt="2024 DTI Team" | ||
| width={width >= LAPTOP_BREAKPOINT ? 475 : 350} | ||
| height={width >= LAPTOP_BREAKPOINT ? 320 : 236} | ||
| className="rounded-3xl object-cover md:w-5/12" | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yay for aria labels!
Just a small nit i found when testing – do you think we could make the
<button>wrap the label as well ("Design", "Business", etc.)? That way you can click on the entire container (label + icon).It's just a smol polish thing that could increase the tap target and make it easier to select the tabs