Skip to content

optimize keyboard focus management on dashboard's modals - #1401

Merged
adampalay merged 1 commit into
masterfrom
adam/a11y-modal-management
Oct 22, 2013
Merged

optimize keyboard focus management on dashboard's modals#1401
adampalay merged 1 commit into
masterfrom
adam/a11y-modal-management

Conversation

@adampalay

Copy link
Copy Markdown
Contributor

@dianakhuang
@talbs
@caesar2164

Optimizes keyboard management of the modals in the dashboard view.

addresses https://edx-wiki.atlassian.net/browse/LMS-1305

Comment thread lms/templates/dashboard.html Outdated

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we use leanModal around the site, we should probably move this into a more common place and update all the other places where we're using similar leanModals.

Also, I'd really like to see some Jasmine tests of this if at all possible.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I was thinking it would helpful to have like accessibility_tools.coffee somewhere

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally accessibility_tools.js, but yes, I agree.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why js and not coffee?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're trying to move off CoffeeScript to some degree, and all of your code is already written in Javascript already so it seems unnecessary to convert it.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

didn't realize that (that we're avoiding coffeescript)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 for moving the modal behavior/interaction stuff into a central place. When we clean up the HTML/Sass, we'll be doing the same - having one modal pattern to rule them all.

@talbs

talbs commented Oct 18, 2013

Copy link
Copy Markdown
Contributor

👍

Just tested the tabbing within the Dashboard modals locally - looks good. Nice work!

@adampalay

Copy link
Copy Markdown
Contributor Author

Thanks @talbs . BTW, I was looking through this article. It's really good stuff--I'm going to incorporate it into accessibility_tools.js

@talbs

talbs commented Oct 18, 2013

Copy link
Copy Markdown
Contributor

@adampalay cool - I've bookmarked that and will share with the Design Team as well. We're all for having a solid solution technically that we can use cross-apps and tailor UI tweaks in. Thx again!

@talbs

talbs commented Oct 18, 2013

Copy link
Copy Markdown
Contributor

@adampalay, one more thought - the verified certs reg flow borrowed from this Dashboard modal's pattern before your fix. Can you check on that and update any necessary bits as well?

@adampalay

Copy link
Copy Markdown
Contributor Author

@talbs , where does that live?

@adampalay

Copy link
Copy Markdown
Contributor Author

@talbs , in a separate PR i'll look at that

Comment thread lms/static/js/accessibility_tools.js Outdated

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why immediately focus people on the close button?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's generally good practice. Check out the link I posted in the discussion.

@caesar2164

Copy link
Copy Markdown
Contributor

I like it, but maybe add a <span class="sr">, modal open</span> to the modal H2s so screenreader users understand what's going on?

@caesar2164

Copy link
Copy Markdown
Contributor

cool, lgtm!

@adampalay

Copy link
Copy Markdown
Contributor Author

closing while I write tests

@adampalay adampalay closed this Oct 18, 2013
@adampalay adampalay reopened this Oct 21, 2013
@adampalay

Copy link
Copy Markdown
Contributor Author

okay, added some tests. @dianakhuang, good to go?

@dianakhuang

Copy link
Copy Markdown
Contributor

It looks like you might need to rebase your branch properly, but other than that, it's looking good. 👍

@adampalay

Copy link
Copy Markdown
Contributor Author

yeah, i don't know what's up with that. I'm also going to squash :)

add license to a11y_tools.js

add tests, some reorganization of js tests

skip "toBeFocused" tests for now
@adampalay

Copy link
Copy Markdown
Contributor Author

OK, tests should be passing now, phew. @dianakhuang , one more quick look?

@dianakhuang

Copy link
Copy Markdown
Contributor

@adampalay

Copy link
Copy Markdown
Contributor Author

what? I'm skipping those tests.... hmph, investigating

@dianakhuang

Copy link
Copy Markdown
Contributor

👍

adampalay added a commit that referenced this pull request Oct 22, 2013
optimize keyboard focus management on dashboard's modals
@adampalay
adampalay merged commit 1f7bb11 into master Oct 22, 2013
@adampalay
adampalay deleted the adam/a11y-modal-management branch October 22, 2013 18:17
jenkins-ks pushed a commit to nttks/edx-platform that referenced this pull request Dec 21, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants