Skip to content

Fix Accessibility Issues Reported During Accessibility Review #147

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jun 2, 2025
Merged

Fix Accessibility Issues Reported During Accessibility Review #147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a1c9bd7
TIA-111 Search bar focus correct order
arbirali Apr 25, 2025
8b29544
Header navbar button make accessible through tab key
arbirali Apr 29, 2025
c669e05
TIA-98 Instructor Dashboard - Makes focus visible and outlined on nav…
arbirali Apr 29, 2025
25cb114
Remove focus from Already Enrolled Button
arbirali Apr 30, 2025
5ae5b1d
Appears the focus on the theme toggle button
arbirali Apr 30, 2025
4e1ea9a
feat: toggle the theme on press the enter key
arbirali May 6, 2025
b59c5f7
fix: remove focus from Already Enrolled button
arbirali May 6, 2025
bbe19db
fix: focus outline layout for firefox
arbirali May 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions tutorindigo/templates/indigo/lms/static/js/dark-theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,9 @@ $(document).ready(function() {
setThemeToggleBtnState(); // check/uncheck toggle btn based on theme

$('#toggle-switch').on('change', toggleTheme);
$('#toggle-switch-input').on('keydown', function (event) {
if (event.key === "Enter") {
toggleTheme();
}
});
});
44 changes: 27 additions & 17 deletions tutorindigo/templates/indigo/lms/static/sass/courseware/_about.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,25 +94,35 @@
@include media-breakpoint-up(md) {
margin: -50px 0 0;
}
span {
&.register {
&.disabled {
display: inline-block;
vertical-align: top;
padding: 7px 14px;
color: #374151;
border-radius: 6px;
background: #fff;
font-size: 16px;
line-height: 24px;
font-weight: 500;
text-decoration: none !important;
border: 1px solid #D1D5DB;
margin-right: 20px;
@include media-breakpoint-up(md) {
padding: 12px 24px;
}

&:hover {
opacity: 1;
}
}
}
}

a {
display: inline-block;
text-decoration: none !important;
span {
display: inline-block;
vertical-align: top;
padding: 7px 14px;
color: #374151;
border-radius: 6px;
background: #fff;
font-size: 16px;
line-height: 24px;
font-weight: 500;
text-decoration: none !important;
border: 1px solid #D1D5DB;
margin-right: 20px;
@include media-breakpoint-up(md) {
padding: 12px 24px;
}
}
}
a.register, a strong, >span.register, a.add-to-cart {
display: inline-block;
Expand Down
17 changes: 10 additions & 7 deletions tutorindigo/templates/indigo/lms/static/sass/courseware/_discover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@
}
.saerch-bar-discover {
margin: 0 0 25px;
display: flex;
@include media-breakpoint-up(md) {
margin: 0 0 30px;
}
Expand Down Expand Up @@ -196,12 +197,11 @@
}
}
.discover-search {
overflow: hidden;
width: 100%;
.wrapper-search-context {
overflow: hidden;
.wrapper-search-input {
float: none;
display: block;
display: flex;
margin: 0;
width: auto;
&:after {
Expand Down Expand Up @@ -237,7 +237,7 @@
}
}
.input-holder {
overflow: hidden;
flex-grow: 1;
border-radius: 6px;
background: $primary-light;
padding: 0 0 0 33px;
Expand Down Expand Up @@ -275,9 +275,12 @@
}
}
.filter-block {
float: left;
flex: 0 0 80px;
position: relative;
z-index: 9;
@include media-breakpoint-up(sm) {
flex: 0 0 130px;
}
&.show {
.dropdown-menu {
display: block;
Expand Down Expand Up @@ -430,7 +433,7 @@ body.indigo-dark-theme {
svg {
path {
color: $text-color-d;
}
}
}
input {
color: $text-color-d;
Expand All @@ -443,7 +446,7 @@ body.indigo-dark-theme {
}
}
.filter-block {

>a {
background-color: $primary-light-d;
color: $text-color-d;
Expand Down
21 changes: 20 additions & 1 deletion tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,10 +119,15 @@ header.global-header {
}
}
.hamburger-menu {
height: 12px;
height: 17px;
width: 20px;
left: 15px;
top: 18px;
background: none;
border: 0;
padding: 0;
box-shadow: none;

.line {
height: 2px;
&:nth-child(2), &:nth-child(3) {
Expand Down Expand Up @@ -210,6 +215,13 @@ header.global-header {
opacity: 0;
width: 0;
height: 0;

&:focus {
~ .slider {
outline: 2px solid $primary;
outline-offset: 1px;
}
}
}

/* The slider */
Expand Down Expand Up @@ -326,6 +338,13 @@ body.indigo-dark-theme {
}
#toggle-switch {
.switch {
input {
&:focus {
~ .slider {
outline-color: $primary-d;
}
}
}
/* The slider */
.slider {
background-color: #ccc;
Expand Down
6 changes: 6 additions & 0 deletions tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,6 +448,9 @@ body.view-instructordash {
&:hover {
color: $dark;
}
&:focus {
box-shadow: inset 0 0 0 2px $primary !important;
}
}
}
}
Expand Down Expand Up @@ -893,6 +896,9 @@ body.indigo-dark-theme {
&:hover {
color: $text-color-d;
}
&:focus {
box-shadow: inset 0 0 0 2px #E5E7EB !important;
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ $light-overlay-d: #36383B;
$danger-d: #FFA07A;
$success-d: #54CF5E;
$btn-color-d: #112F6B;
$body-bg-d:#0D0D0E;
$body-bg-d: #0D0D0E;

$warning-400: #ffe340;
$page-color-transition: transparent .2s ease, color .2s ease;
4 changes: 1 addition & 3 deletions tutorindigo/templates/indigo/lms/templates/courseware/course_about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,12 +85,10 @@ <h1>
</div>
<div class="main-cta">
%if user.is_authenticated and registered:
<span class="register disabled">${_("Already Enrolled")}</span>
%if show_courseware_link:
<a href="${course_target}">
%endif

<span class="register disabled">${_("Already Enrolled")}</span>

%if show_courseware_link:
<strong>${_("View Course")}</strong>
</a>
Expand Down
10 changes: 5 additions & 5 deletions tutorindigo/templates/indigo/lms/templates/courseware/courses.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,17 +67,17 @@ <h2 class="header-search-facets">${_('Refine Your Search')}</h2>
<div id="discovery-form" role="search" aria-label="course" class="wrapper-search-context">
<form class="wrapper-search-input">
<label for="discovery-input" class="sr">${_('Search for a course')}</label>
<div class="button-holder">
<button type="submit" class="button postfix discovery-submit" title="${_('Search')}">
Search
</button>
</div>
<div class="input-holder">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4ZM2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8C14 9.29583 13.5892 10.4957 12.8907 11.4765L17.7071 16.2929C18.0976 16.6834 18.0976 17.3166 17.7071 17.7071C17.3166 18.0976 16.6834 18.0976 16.2929 17.7071L11.4765 12.8907C10.4957 13.5892 9.29583 14 8 14C4.68629 14 2 11.3137 2 8Z" fill="#9CA3AF"/>
</svg>
<input id="discovery-input" class="discovery-input" placeholder="${_('Explore course')}" type="text"/>
</div>
<div class="button-holder">
<button type="submit" class="button postfix discovery-submit" title="${_('Search')}">
Search
</button>
</div>
</form>
<div id="discovery-message" class="search-status-label"></div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions tutorindigo/templates/indigo/lms/templates/header/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,13 @@
)}
% endif
<div class="main-header">
<%include file="navbar-logo-header.html" args="online_help_token=online_help_token"/>
<div class="hamburger-menu" role="button" aria-label=${_("Options Menu")} aria-expanded="false" aria-controls="mobile-menu" tabindex="0">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
<button class="hamburger-menu" role="button" aria-label=${_("Options Menu")} aria-expanded="false" aria-controls="mobile-menu" tabindex="0">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</button>
<%include file="navbar-logo-header.html" args="online_help_token=online_help_token"/>
% if user.is_authenticated:
<%include file="navbar-authenticated.html" args="online_help_token=online_help_token"/>
% else:
Expand Down