Fix style and accessibility issues

Author: ihalaij1

assets/css/main.css

@@ -7,7 +7,7 @@ $aplus-success: #00803c; // There should be a contrast ratio above 4.5 between t
 $aplus-info: #1d7792; // This is a darkened version of the bootstrap 3 default. Contrast must be >=4.5 with white.
 $aplus-warning: #a6670e; // This is a darkened version of the bootstrap 3 default. Contrast must be >=4.5 with white.
 $aplus-danger: #a50000; // There should be a contrast ratio above 7 between this and white.
-$aplus-focus: #ffdd00; // This should be clearly different fron those defned above and the brand colours.
+$aplus-focus: #ffdd00; // This should be clearly different from those defined above and the brand colours.
 
 // These colours may be used to represent the status of the grading.
 $aplus-primary-status-bg: #42a5f5;

assets/css/main.css.map

@@ -123,3 +123,7 @@ $large-height: 24px;
 		}
 	}
 }
+
+.aplus-submit {
+	@include button-basics;
+}

assets/sass/colors/_functional.scss

@@ -1,16 +1,16 @@
 @import '../mixins/focus';
 
 // These styles apply consistent focus states to elements which
-// don't have a focus state defined elswhere, including inside the
+// don't have a focus state defined elsewhere, including inside the
 // course content.
 
 // It's preferable to use component-specific focus styles where
 // possible, and they should be mixed into all new components.
 
-a:focus-visible,
-input:focus-visible,
-textarea:focus-visible,
-select:focus-visible,
+a:focus-visible:not(.dropdown-item),
+input:focus-visible:not(.form-control, .aplus-submit, [class^="aplus-button"]),
+textarea:focus-visible:not(.form-control),
+select:focus-visible:not(.form-select),
 div:focus-visible {
 	@include focus-with-outline-only;
 }

assets/sass/components/_button.scss

@@ -1,15 +1,18 @@
 nav.row.siblings {
 	flex-direction: row;
 	justify-content: space-between;
-	margin: 0 5px;
 
-	a.nav-flex-left, a.nav-flex-right  {
-		white-space: nowrap;
-		max-width: 45%;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		width: auto;
-	}
+	a.d-inline-flex {
+        max-width: 100%; // Constrain the link to not overflow its container
+
+        > span.nav-flex-left,
+        > span.nav-flex-middle,
+        > span.nav-flex-right {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
 
 	&::before,
 	&::after {

assets/sass/components/_focus.scss

@@ -37,12 +37,18 @@ article {
 	.navbar-nav > li > a,
 	.navbar-nav > .active > a,
 	.navbar-nav > .active > a:hover {
-		@include focus-with-background-and-color;
+		@include focus-with-outline-only;
 		text-decoration: none;
 		color: #ffffff;
 		background: transparent;
 	}
 
+	.navbar-toggler {
+		&:focus {
+			box-shadow: 0 0 0 0.25rem $aplus-focus;
+		}
+	}
+
 	.navbar-brand, .navbar-dropdown > li.dropdown > a.dropdown-toggle {
 		padding-top: $navbar-padding-vertical;
 		padding-bottom: $navbar-padding-vertical;
@@ -62,15 +68,15 @@ article {
 	.navbar-nav > .open > a,
 	.navbar-nav > .open > a:focus,
 	.navbar-nav > .open > a:hover {
-		@include focus-with-background-and-color;
+		@include focus-with-outline-only;
 		background-color: #236aa7;
 		background-color: rgba(0, 0, 0, 0.1);
 	}
 	.navbar-nav > li.active > a:focus,
 	.navbar-nav > li.open > a:focus {
 		&:focus,
 		&:hover {
-			@include focus-with-background-and-color;
+			@include focus-with-outline-only;
 			background-color: rgba(0,0,0,0.1);
 		}
 	}
@@ -94,7 +100,6 @@ article {
     min-width: 0;
 
     .navbar-dropdown {
-        flex: 1 1 start;
         min-width: 0;
 
         li.dropdown {

assets/sass/components/_pagination.scss

@@ -132,6 +132,24 @@ iframe {
     --bs-btn-active-border-color: transparent;
 }
 
+.dropdown-item {
+    @include focus-with-background-and-color;
+}
+
+#courseDropdownMenu {
+    overflow: hidden;
+    overflow-y: auto;
+    max-height: calc(100vh - 150px);
+
+    @media (max-width: 575.98px) {
+        width: 75vw;
+
+        .dropdown-item {
+            white-space: normal;
+        }
+    }
+}
+
 /* Skip links */
 
 .skip-link { /* This one is equally applicable to all skip links */
@@ -149,18 +167,18 @@ iframe {
     position: absolute;
     z-index: 2000;
     width: auto;
-    min-height: 50px;
-    height: auto;
+    height: 46px;
     overflow: visible;
     clip: auto;
-    padding: 15px;
+    padding: 12px;
     display: flex;
     justify-content: left;
 }
 
 .page-skip-link:focus {
 	@include focus-with-background-and-color;
-    min-height: 24px;
+    min-height: 28px;
+    height: auto;
 }
 
 /* menus */
@@ -239,9 +257,12 @@ iframe {
 .toc li {
     list-style: none;
 }
-#course-content a{
+#course-content a:not(.dropdown-toggle) {
 	@include focus-with-background-and-color;
 }
+#course-content a:has(.dropdown-toggle) {
+    @include focus-with-outline-only;
+}
 @media (min-width: 768px) {
 	#course-content {
         padding-left: 16vw;
@@ -255,8 +276,9 @@ iframe {
 }
 
 /* panels */
-.module-panel {
-    overflow: hidden;
+.table-responsive:has(.results-table) {
+    border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
+    border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
 }
 .module-panel .panel-heading {
     display: block;
@@ -289,6 +311,7 @@ iframe {
 #modulesAccordion .accordion-button {
     @include focus-with-background-and-color;
     background-color: var(--bs-primary);
+    --bs-accordion-btn-focus-box-shadow: none;
 }
 #modulesAccordion .accordion-button::after {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

assets/sass/layout/_header.scss

@@ -62,6 +62,10 @@ $card-title-spacer-y: 0px;
 // Legacy panel look for BS5 cards
 //$card-bg: #f5f5f5;
 
+$primary-border-subtle: $aplus-focus;
+$focus-ring-color: $aplus-focus;
+$input-focus-border-color: $aplus-focus;
+
 @import 'vendor/bootstrap5';
 
 // Import Bootstrap Icons (change font file directory from default)

assets/sass/legacy/_main.scss

@@ -9,7 +9,8 @@
 
 @mixin focus-with-outline-only {
 	&:focus-visible {
-		outline: 3px solid $aplus-focus !important;
+		box-shadow: 0 0 0 0.25rem $aplus-focus !important;
+		outline: none !important;
 	}
 }
 
@@ -18,6 +19,7 @@
 		background-color: $aplus-focus !important;
 		color: $aplus-foreground !important;
 		outline: 3px solid rgba(0, 0, 0, 0) !important;
+		box-shadow: none !important;
 		text-decoration: underline;
 	}
 }