Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

accessibility: Replace close modal button <div> by <a> link (LMS-582)

Browse Source 
The close button for the modal dialog was marked up as a paragraph,
containing a graphical text character, inside two div elements, with an
associated click event. This made the button unusable for keyboard
users.

Replaced <divs> with a link element (<a role="button"), adapted the CSS
accordingly, and updated the existing <a> modal close buttons.
This commit is contained in:
Xavier Antoviaque
2013-09-09 16:43:44 -03:00
parent 4629ce73f6
commit 23eab5c5bd
6 changed files with 20 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
lms/static/sass/shared/_modal.scss
View File

@@ -282,21 +282,15 @@
right: 2px;
top: 0px;
z-index: 3;
.inner {
p {
color: $lighter-base-font-color;
font: normal 1.2rem/1.2rem $sans-serif;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.8);
@include transition(all 0.15s ease-out 0s);
}
}
color: $lighter-base-font-color;
font: normal 1.2rem/1.2rem $sans-serif;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.8);
@include transition(all 0.15s ease-out 0s);
&:hover {
p {
color: $base-font-color;
}
color: $base-font-color;
text-decoration: none;
}
}
}

32
lms/templates/dashboard.html
View File

@@ -359,12 +359,8 @@
<input type="submit" id="submit" value="Save Settings" />
</div>
</form>
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
</div>
</section>
@@ -385,11 +381,7 @@
</div>
</form>
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
</div>
</section>
@@ -406,11 +398,7 @@
</section>
</form>
</div>
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
</div>
</section>
@@ -439,11 +427,7 @@
</fieldset>
</form>
</div>
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
</div>
</section>
@@ -471,10 +455,6 @@
</fieldset>
</form>
</div>
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
</div>
</section>

2
lms/templates/forgot_password_modal.html
View File

@@ -31,7 +31,7 @@
</form>
</div>
<a href="#" class="close-modal" title="Close Modal">
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">
<div class="inner">
<p>&#10005;</p>
</div>

20
lms/templates/help_modal.html
View File

@@ -49,11 +49,7 @@ discussion_link = get_discussion_link(course) if course else None
</div>
## TODO: find a way to refactor this
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
</div>
<div class="inner-wrapper" id="feedback_form_wrapper">
@@ -80,12 +76,8 @@ discussion_link = get_discussion_link(course) if course else None
<input name="submit" type="submit" value="Submit">
</div>
</form>
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
</div>
<div class="inner-wrapper" id="feedback_success_wrapper" tabindex="-1">
@@ -117,11 +109,7 @@ discussion_link = get_discussion_link(course) if course else None
)}
</p>
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
</div>
</section>

2
lms/templates/login_modal.html
View File

@@ -39,7 +39,7 @@
% endif
</section>
<a href="#" class="close-modal" title="Close Modal">
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">
<div class="inner">
<p>&#10005;</p>
</div>

2
lms/templates/signup_modal.html
View File

@@ -131,7 +131,7 @@
</div>
<a href="#" class="close-modal" title="${_('Close Modal')}">
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">
<div class="inner">
<p>&#10005;</p>
</div>