added custom focus states (#784)

fixes
[this](https://www.notion.so/Idol-Lead-Sync-781de97ad403492b94b420349f829ea5?pvs=4#1550ad723ce1807381f7e8df95c3d7ed)


|X|Before|After|
|-|-|-|
|Profile card|<img width="954" alt="Screenshot 2024-12-07 at 5 05 37 PM"
src="https://github.com/user-attachments/assets/a51ed831-0b66-4382-8ed2-6fd3f9331387">|<img
width="954" alt="Screenshot 2024-12-07 at 5 05 27 PM"
src="https://github.com/user-attachments/assets/40a589a4-5e83-4a15-8c8e-bf27b38f678e">|
|Project accordion|<img width="1304" alt="Screenshot 2024-12-07 at 5 05
08 PM"
src="https://github.com/user-attachments/assets/016260fb-04e9-417c-beef-bbe98ccd1f5d">|<img
width="1304" alt="Screenshot 2024-12-07 at 5 04 59 PM"
src="https://github.com/user-attachments/assets/d7501c76-5331-4763-a222-c04e30c460e7">|
|Link|<img width="630" alt="Screenshot 2024-12-07 at 5 04 31 PM"
src="https://github.com/user-attachments/assets/df94005c-7936-4d5b-afb4-873ffb393207">|<img
width="630" alt="Screenshot 2024-12-07 at 5 04 21 PM"
src="https://github.com/user-attachments/assets/044808ca-29b6-4f6f-8677-fcfb3ed8d3c2">|
|Navbar|<img width="599" alt="Screenshot 2024-12-07 at 5 03 17 PM"
src="https://github.com/user-attachments/assets/7a1656bd-4078-42c3-8160-63188784c6bc">|<img
width="599" alt="Screenshot 2024-12-07 at 5 03 27 PM"
src="https://github.com/user-attachments/assets/997d09fb-8667-45c4-bfca-bcbe949167f1">|
|Button|<img width="593" alt="Screenshot 2024-12-07 at 5 03 01 PM"
src="https://github.com/user-attachments/assets/d3cd511b-383f-4471-b126-a458e9af828e">|<img
width="593" alt="Screenshot 2024-12-07 at 5 02 49 PM"
src="https://github.com/user-attachments/assets/791986cf-d23f-4e48-9674-a2905fcd130a">|

Author: Bookie0

new-dti-website/components/apply/RoleDescription.tsx

@@ -34,7 +34,7 @@ const RoleDescriptions = () => {
                 <button
                   onClick={() => setRole(application)}
                   aria-label={`Show ${application} questions`}
-                  className="flex flex-col items-center gap-7"
+                  className="application-role-tab flex flex-col items-center gap-7"
                   key={application}
                 >
                   <h3

new-dti-website/components/navbar.tsx

@@ -59,7 +59,7 @@ const Navbar: React.FC = () => {
           <div className="hidden !justify-self-end w-fit lg:inline-flex flex-row">
             {navbarItems.map((item) => (
               <a
-                className={`hover:underline cursor-pointer text-white p-4 underline-offset-8 decoration-2 decoration-white ${
+                className={`hover:underline cursor-pointer text-white p-4 underline-offset-8 decoration-2 decoration-white h-[48px] flex items-center ${
                   pathname === item.url ? 'underline' : ''
                 }`}
                 href={item.url}

new-dti-website/components/team/MemberDisplay.tsx

@@ -76,6 +76,7 @@ const MemberDisplay: React.FC = () => {
                     setSelectedMember(undefined);
                   }}
                   aria-label={`select ${role.altText} role`}
+                  className="custom-focus-state"
                 >
                   <Icon
                     icon={`${role.src}_base.svg`}

new-dti-website/components/team/MemberGroup.tsx

@@ -207,7 +207,7 @@ export const MemberDetails: React.FC<MemberDetailsProps> = (props: MemberDetails
         </div>
         <button
           onClick={props.onClose}
-          className="cursor-pointer h-min"
+          className="cursor-pointer h-min rounded-md"
           aria-label="Close member details"
         >
           <Image src="/icons/close.svg" width={23} height={23} alt="" className="m-2 xs:w-4" />
@@ -317,7 +317,7 @@ const MemberGroup: React.FC<MemberGroupProps> = ({
         <>
           <button
             onClick={() => onMemberCardClick(member)}
-            className="memberCard"
+            className="memberCard custom-focus-state"
             aria-label={`open ${member.firstName} ${member.lastName}'s details`}
           >
             <MemberCard
@@ -354,7 +354,7 @@ const MemberGroup: React.FC<MemberGroupProps> = ({
             <>
               <button
                 onClick={() => onMemberCardClick(member)}
-                className="memberCard"
+                className="memberCard custom-focus-state"
                 aria-label={`open ${member.firstName} ${member.lastName}'s details`}
               >
                 <MemberCard

new-dti-website/components/team/TeamHero.tsx

@@ -199,7 +199,7 @@ const TeamHero = () => {
                   }`}
                 >
                   <button
-                    className="relative z-10"
+                    className="relative z-10 custom-focus-state team-carousel-button"
                     onClick={() =>
                       setModalShown(index === carouselIndex && width >= TABLET_BREAKPOINT)
                     }

new-dti-website/components/ui/button.tsx

@@ -6,7 +6,7 @@ import { cva } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {

new-dti-website/src/app/globals.css

@@ -186,6 +186,13 @@
   background-color: #d63d3d;
 }
 
+.primary-button:focus-visible,
+.secondary-button--red:focus-visible {
+  outline: 3px solid #d63d3d !important;
+  outline-offset: 3px;
+  border-radius: 12px;
+}
+
 .secondary-button {
   color: #fefefe;
   background-color: black;
@@ -218,7 +225,27 @@
   background-color: #d63d3d;
 }
 
+.secondary-button:focus-visible {
+  outline: 3px solid #fefefe;
+  outline-offset: 3px;
+  border-radius: 12px;
+}
+
+a:focus-visible {
+  outline: 3px solid #d63d3d;
+  outline-offset: 3px;
+  border-radius: 4px;
+}
+
+button:focus-visible,
+summary:focus-visible {
+  outline: 3px solid #d63d3d;
+  outline-offset: 3px;
+  transition: outline 0s;
+}
+
 summary {
+  border-radius: 8px;
   padding-top: 1rem;
   padding-bottom: 1rem;
   list-style: none;
@@ -240,3 +267,42 @@ summary::after {
 details[open] > summary::after {
   rotate: 180deg;
 }
+
+.custom-focus-state:focus-visible {
+  outline: none;
+  position: relative;
+}
+
+.custom-focus-state:focus-visible::after {
+  content: '';
+  width: calc(100% + 75px);
+  height: 123px;
+  top: -50px;
+  left: -37px;
+  border-radius: 8px;
+  position: absolute;
+  outline: 3px solid #d63d3d;
+}
+
+.memberCard:focus-visible::after {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: 8px;
+}
+
+.application-role-tab {
+  border-radius: 8px;
+}
+
+.team-carousel-button {
+  position: static;
+}
+
+.team-carousel-button:focus-visible::after {
+  height: 317px;
+  width: calc(100% + 26px);
+  left: -13px;
+  border-radius: 16px;
+}

new-dti-website/src/app/page.tsx

@@ -100,6 +100,7 @@ const Home: React.FC = () => {
             <div className="flex xs:justify-center lg:justify-normal items-center gap-2 z-10 lg:min-h-[100px] xs:min-h-[45px] scale-75 lg:scale-100">
               {icons.map((icon, index) => (
                 <button
+                  className="rounded-md"
                   onClick={() => {
                     setSelectedIcon(index);
                     if (timer) clearTimeout(timer);