Skip to content
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

Jump to bottom

issue/53 - My Widgets page accessiblility #1233

Closed
wants to merge 7 commits into from
Closed

issue/53 - My Widgets page accessiblility #1233

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
630b59f
made most elements reachable by tabbing
weining-li Jul 5, 2019
fd7f7c4
accessibility of header and changed ng-keypress to ng-enter
weining-li Jul 22, 2019
852e04b
improved accessibility of modal and widget list
weining-li Jul 24, 2019
d003550
edit widget modal
weining-li Jul 24, 2019
dc0c4b8
return focus to correct element after closing modal
weining-li Jul 26, 2019
cc2c3a8
allow access settings to be selected with enter
weining-li Aug 2, 2019
a54e354
changed all remaining ngkeypress to ngenter
weining-li Aug 2, 2019
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
2 changes: 1 addition & 1 deletion fuel/app/themes/default/partials/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<li><a href="/help">Help</a></li>

<?php if ( !$me->is_guest() && \Materia\Perm_Manager::is_super_user()): ?>
<li class="nav_expandable">
<li tabindex="0" class="nav_expandable">
<span class='elevated'>Admin</span>
<ul>
<li>
Expand Down
24 changes: 12 additions & 12 deletions fuel/app/themes/default/partials/my_widgets.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,8 @@
</div>
</div>
<p class="disclaimer">Users with full access can edit or copy this widget and can add or remove people in this list.</p>
<a tabindex="0" class="cancel_button" ng-click="hideModal()">Cancel</a>
<a tabindex="0" class="action_button green save_button" ng-click="updatePermissions()">Save</a>
<a tabindex="0" class="cancel_button" ng-click="hideModal()" ng-keypress="hideModal()">Cancel</a>
<a tabindex="0" class="action_button green save_button" ng-click="updatePermissions()" ng-keypress="updatePermissions()">Save</a>
</div>
</div>
</modal-dialog>
Expand Down Expand Up @@ -255,16 +255,16 @@ class="action_button arrow_down_button">
</a>
</li>
<li>
<a id="edit_button" class="action_button aux_button" ng-class="{'disabled' : selected.editable==false}" ng-click="editWidget()">
<a id="edit_button" tabindex="0" class="action_button aux_button" ng-class="{'disabled' : selected.editable==false}" ng-click="editWidget()" ng-keypress="editWidget()">
<span class="pencil"></span>
Edit Widget
</a>
</li>
</ul>
<ul class="options">
<li class="share"><div class="link" ng-click="showCollaboration()" ng-class="{'disabled' : perms.stale}">Collaborate{{ collaborateCount }}</div></li>
<li class="copy" ng-class="{'disabled' : selected.accessLevel != 30}"><div class="link" id="copy_widget_link" ng-class="{'disabled' : selected.accessLevel != 30}" ng-click="showCopyDialog()">Make a Copy</div></li>
<li class="delete" ng-class="{'disabled' : selected.accessLevel != 30}"><div class="link" id="delete_widget_link" ng-class="{'disabled' : selected.accessLevel != 30}" ng-click="showDelete()">Delete</div></li>
<li class="share"><div class="link" tabindex="0" ng-click="showCollaboration()" ng-keypress="showCollaboration()" ng-class="{'disabled' : perms.stale}">Collaborate{{ collaborateCount }}</div></li>
<li class="copy" tabindex="0" ng-class="{'disabled' : selected.accessLevel != 30}"><div class="link" id="copy_widget_link" ng-class="{'disabled' : selected.accessLevel != 30}" ng-keypress="showCopyDialog()" ng-click="showCopyDialog()">Make a Copy</div></li>
<li class="delete" tabindex="0" ng-class="{'disabled' : selected.accessLevel != 30}"><div class="link" id="delete_widget_link" ng-class="{'disabled' : selected.accessLevel != 30}" ng-keypress="showDelete()" ng-click="showDelete()">Delete</div></li>
</ul>
<div class="delete_dialogue" ng-show="show.deleteDialog">
<span class="delete-warning">Are you sure you want to delete this widget?</span>
Expand All @@ -275,11 +275,11 @@ class="action_button arrow_down_button">
<h3>Settings:</h3>
<dl class="attempts_parent" ng-class="{'disabled': !selected.shareable || selected.widget.is_draft}">
<dt>Attempts:</dt>
<dd class="num-attempts" ng-class="{'disabled':!selected.editable || !selected.shareable || selected.widget.is_draft}" ng-click="popup()">
<dd class="num-attempts" ng-class="{'disabled':!selected.editable || !selected.shareable || selected.widget.is_draft}" tabindex="0" ng-click="popup()" ng-keypress="popup()">
{{ attemptText }}
</dd>
<dt>Available:</dt>
<dd class="availability-time" ng-class="{'disabled':!selected.shareable || selected.widget.is_draft}" ng-click="popup()" ng-switch="availabilityMode">
<dd class="availability-time" ng-class="{'disabled':!selected.shareable || selected.widget.is_draft}"tabindex="0" ng-click="popup()" ng-keypress="popup()" ng-switch="availabilityMode">
<span ng-switch-when="anytime">
Anytime
</span>
Expand All @@ -294,7 +294,7 @@ class="action_button arrow_down_button">
</span>
</dd>
<dt>Access:</dt>
<dd ng-class="{'disabled':!selected.shareable || selected.widget.is_draft}" ng-click="popup()" class="access-level">
<dd ng-class="{'disabled':!selected.shareable || selected.widget.is_draft}" tabindex="0" ng-click="popup()" ng-keypress="popup()" class="access-level">
<span ng-if="!selected.widget.guest_access">Staff and Students only</span>
<span ng-if="selected.widget.guest_access">Anonymous - No Login Required</span>
</dd>
Expand All @@ -305,7 +305,7 @@ class="action_button arrow_down_button">
<div class="share-widget-container closed" ng-class="{'draft' : selected.widget.is_draft}">
<h3>{{selected.widget.is_draft ? "Publish to share" : "Share"}} with your students <a href="https://ucfopen.github.io/Materia-Docs/create/assigning-widgets.html" target="_blank">View all sharing options.</a></h3>
<input id="play_link" type="text" ng-disabled="selected.widget.is_draft" value="{{baseUrl}}play/{{selected.widget.id}}/{{selected.widget.clean_name}}"/>
<p>Use this link to share with your students (or <span class="show-embed link" ng-click="show.embedToggle = !show.embedToggle">use the embed code</span>).</p>
<p>Use this link to share with your students (or <span class="show-embed link" tabindex="0" ng-click="show.embedToggle = !show.embedToggle" ng-keypress="show.embedToggle = !show.embedToggle">use the embed code</span>).</p>
<div class="embed-options" ng-show="show.embedToggle && !selected.is_draft">
<h3>Embed Code</h3>
<p>Paste this HTML into a course page to embed.</p>
Expand All @@ -319,7 +319,7 @@ class="action_button arrow_down_button">
</div>
<div class="scores">
<h2>Student Activity</h2>
<span id="export_scores_button" class="action_button aux_button" ng-click="exportPopup()">
<span id="export_scores_button" class="action_button aux_button" tabindex="0" ng-click="exportPopup()" ng-keypress="exportPopup()">
<span class="arrow_down"></span>
Export Options
</span>
Expand Down Expand Up @@ -424,7 +424,7 @@ class="display data"
</div>
<div class="courses">
<div class="widget_list" data-container="widget-list">
<div ng-repeat="widget in widgets.widgetList | multiword:query:'AND'" id="widget_{{widget.id}}" class="widget small_{{ widget.beard }}" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{is_draft: widget.is_draft, gameSelected: widget.id == selected.widget.id, bearded: widget.beard}" ng-click="setSelected(widget.id)">
<div tabindex="0" ng-repeat="widget in widgets.widgetList | multiword:query:'AND'" id="widget_{{widget.id}}" class="widget small_{{ widget.beard }}" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{is_draft: widget.is_draft, gameSelected: widget.id == selected.widget.id, bearded: widget.beard}" ng-click="setSelected(widget.id)" ng-keypress="setSelected(widget.id)">
<img class="icon" ng-src="{{widget.icon}}"/>
<ul>
<li class="title searchable" ng-bind-html="widget.name | highlight:query"></li>
Expand Down