Accessibility Fixes for Indigo Theme/Plugin Based on Audit (#34)

zubairshakoorarbisoft · web-flow · commit 8897e573bbb8 · 2025-06-24T11:29:22.000+05:00
diff --git a/paragon/_account.scss b/paragon/_account.scss
@@ -209,6 +209,7 @@
                     right: 15px;
                     top: 15px;
                     background: $primary;
+                    outline-offset: 3px;
                     svg {
                         display: none;
                     }
diff --git a/paragon/_dates.scss b/paragon/_dates.scss
@@ -94,9 +94,6 @@ div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 {
                         &.bg-warning-300 {
                             border: 2px solid  $primary !important;
                             background: white !important;
-                            &:before {
-                                display: none !important;
-                            }
                         }
                     }
                 }
diff --git a/paragon/_discussion.scss b/paragon/_discussion.scss
@@ -238,4 +238,11 @@ html[data-mce-style]{
 .mce-content-body{
     color: inherit;
     background-color: transparent;
-}
+}
+
+[for='post-type-question'],
+[for='post-type-discussion'] {
+  .text-primary-300 {
+    color: #6B7A94 !important;
+  }
+}
diff --git a/paragon/_extras.scss b/paragon/_extras.scss
@@ -47,7 +47,7 @@
                 left: 0;
                 right: 0;
                 bottom: 0;
-                background-color: #AEC7F6;
+                background-color: $light-theme-switch-bg-color;
                 transition: .4s;
 
                 &::before{
@@ -71,3 +71,11 @@
         }
     }
 }
+
+// course title focus visibility styling
+.course-card {
+  .pgn__card-header,
+  .pgn__card-header-content {
+      overflow: visible !important;
+  }
+}
diff --git a/paragon/_footer.scss b/paragon/_footer.scss
@@ -252,9 +252,7 @@ footer.tutor-container {
                                 padding: 4px 18px;
                                 border-radius: 6px;
                                 margin: 0;
-                                &:before {
-                                    display: none;
-                                }
+
                                 &.btn-outline-primary {
                                     border: 1px solid #D1D5DB;
                                     color: #374151;
@@ -441,4 +439,4 @@ footer.tutor-container {
     .btn.btn-link {
         font-size: 14px;
     }
-}
+}
diff --git a/paragon/_header.scss b/paragon/_header.scss
@@ -39,7 +39,7 @@
                 border: none !important;
                 padding: 0 !important;
                 box-shadow: none !important;
-                outline: none !important;
+                outline-offset: 4px;
                 background: none !important;
                 position: absolute;
                 left: 15px;
@@ -178,9 +178,6 @@
                 font-size: 14px;
                 font-weight: 500;
                 line-height: 20px;
-                &:before {
-                    display: none !important;
-                }
                 &:after {
                     display: inline-block;
                     vertical-align: middle;
@@ -512,4 +509,8 @@
             color: #374151;
         }
     }
-}
+}
+// skip to main content styling fix overlap with menu icon
+.indigo-header-version .sr-only-focusable + .container-xl {
+    position: relative;
+}
diff --git a/paragon/_learning.scss b/paragon/_learning.scss
@@ -207,7 +207,7 @@ div[data-learner-type=b2c_learner] {
                         text-decoration: none;
                     }
                     svg {
-                        color: #9CA3AF;
+                        color: #717D8A;
                     }
                 }
             }
diff --git a/paragon/_login.scss b/paragon/_login.scss
@@ -113,9 +113,7 @@
                     margin: 0 32px -1px 0;
                     color: $text-color-primary;
                     background: none !important;
-                    &:before {
-                        display: none;
-                    }
+
                     &.active, &:hover {
                         color: $primary;
                         border-bottom: 2px solid $primary;
diff --git a/paragon/_profile.scss b/paragon/_profile.scss
@@ -245,6 +245,7 @@
                         right: 15px;
                         top: 15px;
                         background: $primary;
+                        outline-offset: 3px;
                         svg {
                             display: none;
                         }
diff --git a/paragon/_variables.scss b/paragon/_variables.scss
@@ -6,6 +6,7 @@ $text-color: #111827;
 $text-color-primary: #515661;
 $gray-700: #4b5563;
 $text-color-light: #515661;
+$light-theme-switch-bg-color: #1D386A;
 
 // for toggle theme button
 $page-color-transition: transparent .2s ease, color .2s ease;
diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss
@@ -1480,7 +1480,7 @@ section[data-testid=sidebar-NOTIFICATIONS], section[data-testid=sidebar-DISCUSSI
               }
             /* The slider */
             .slider {
-                background-color: #ccc;
+                background-color: $dark-theme-switch-bg-color;
                 box-shadow: 0 0 1px #ccc;
                 &::before{
                     transform: translateX(19px);
diff --git a/themes/dark/_variables.scss b/themes/dark/_variables.scss
@@ -14,6 +14,7 @@ $border-color: #777792;
 $light-overlay: #36383B;
 $btn-color: #112F6B;
 $hover-color: #383938;
+$dark-theme-switch-bg-color: #717D8A;
 
 $theme-colors-dark: () !default;
 $theme-colors-dark: map-merge(

Original file line number	Diff line number	Diff line change
`@@ -209,6 +209,7 @@`
`209`	`209`	`right: 15px;`
`210`	`210`	`top: 15px;`
`211`	`211`	`background: $primary;`
	`212`	`+ outline-offset: 3px;`
`212`	`213`	`svg {`
`213`	`214`	`display: none;`
`214`	`215`	`}`
Original file line number	Diff line number	Diff line change
`@@ -94,9 +94,6 @@ div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 {`
`94`	`94`	`&.bg-warning-300 {`
`95`	`95`	`border: 2px solid $primary !important;`
`96`	`96`	`background: white !important;`
`97`		`- &:before {`
`98`		`- display: none !important;`
`99`		`- }`
`100`	`97`	`}`
`101`	`98`	`}`
`102`	`99`	`}`
Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@`
`47`	`47`	`left: 0;`
`48`	`48`	`right: 0;`
`49`	`49`	`bottom: 0;`
`50`		`- background-color: #AEC7F6;`
	`50`	`+ background-color: $light-theme-switch-bg-color;`
`51`	`51`	`transition: .4s;`
`52`	`52`
`53`	`53`	`&::before{`
`@@ -71,3 +71,11 @@`
`71`	`71`	`}`
`72`	`72`	`}`
`73`	`73`	`}`
	`74`	`+`
	`75`	`+// course title focus visibility styling`
	`76`	`+.course-card {`
	`77`	`+ .pgn__card-header,`
	`78`	`+ .pgn__card-header-content {`
	`79`	`+ overflow: visible !important;`
	`80`	`+ }`
	`81`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -207,7 +207,7 @@ div[data-learner-type=b2c_learner] {`
`207`	`207`	`text-decoration: none;`
`208`	`208`	`}`
`209`	`209`	`svg {`
`210`		`- color: #9CA3AF;`
	`210`	`+ color: #717D8A;`
`211`	`211`	`}`
`212`	`212`	`}`
`213`	`213`	`}`
Original file line number	Diff line number	Diff line change
`@@ -245,6 +245,7 @@`
`245`	`245`	`right: 15px;`
`246`	`246`	`top: 15px;`
`247`	`247`	`background: $primary;`
	`248`	`+ outline-offset: 3px;`
`248`	`249`	`svg {`
`249`	`250`	`display: none;`
`250`	`251`	`}`