Skip to content

Commit

Permalink
Add span text with special class for several icon buttons and links; …
Browse files Browse the repository at this point in the history 
…fix focus styles issue for seach bar; no focus style fix required for language select element
  • Loading branch information
@anthkris
anthkris committed Feb 23, 2017
1 parent bfc0c27 commit ff1cff2
Show file tree
Hide file tree
Showing 12 changed files with 44 additions and 5 deletions.
4 changes: 3 additions & 1 deletion core/templates/dev/head/components/rating_display.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<script type="text/ng-template" id="components/ratingSummary">
<span style="<[getCursorStyle()]>" ng-mouseleave="leaveArea()">
<span ng-if="ratingValue || isEditable" ng-repeat="star in stars" class="fa <[star.cssClass]> oppia-rating-star protractor-test-rating-star" ng-click="clickStar(star.value)" ng-mouseenter="enterStar(star.value)"></span>
<span ng-if="ratingValue || isEditable" ng-repeat="star in stars" class="fa <[star.cssClass]> oppia-rating-star protractor-test-rating-star" ng-click="clickStar(star.value)" ng-mouseenter="enterStar(star.value)">
<span class="oppia-icon-btn-label">Rate this <[$index + 1]> stars</span>
</span>
</span>
</script>
1 change: 1 addition & 0 deletions core/templates/dev/head/components/share/sharing_links_directive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<li>
<a ng-click="showEmbedExplorationModal(explorationId)" tooltip="Embed" tooltip-placement="top" tabindex="0">
<i class="material-icons md-48 embed-link">&#xE86F;</i>
<span class="oppia-icon-btn-label">Embed this Exploration</span>
</a>
</li>
</ul>
Expand Down
1 change: 1 addition & 0 deletions core/templates/dev/head/components/summary_tile/collection_summary_tile_directive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ <h3 class="activity-title"><[getCollectionTitle() || DEFAULT_EMPTY_TITLE]></h3>

<li>
<span>
<span class="oppia-icon-btn-label">Last Updated</span>
<[getLastUpdatedDatetime()]>
</span>
</li>
Expand Down
3 changes: 3 additions & 0 deletions core/templates/dev/head/components/summary_tile/exploration_summary_tile_directive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ <h3 class="activity-title protractor-test-exp-summary-tile-title">
<li>
<span class="protractor-test-exp-summary-tile-rating" ng-class="{'rating-disabled': !getAverageRating()}">
<span class="fa fa-star fa-lg" tooltip="<['I18N_LIBRARY_RATINGS_TOOLTIP' | translate]>" tooltip-placement="top">
<span class="oppia-icon-btn-label"><['I18N_LIBRARY_RATINGS_TOOLTIP' | translate]></span>
</span>
<span ng-if="getAverageRating()">
<[getAverageRating() | number:1]>
Expand All @@ -47,12 +48,14 @@ <h3 class="activity-title protractor-test-exp-summary-tile-title">

<li>
<span class="fa fa-eye fa-lg" tooltip="<['I18N_LIBRARY_VIEWS_TOOLTIP' | translate]>" tooltip-placement="top">
<span class="oppia-icon-btn-label"><['I18N_LIBRARY_VIEWS_TOOLTIP' | translate]></span>
</span>
<[getNumViews() | summarizeNonnegativeNumber]>
</li>

<li>
<span>
<span class="oppia-icon-btn-label">Last Updated</span>
<[getLastUpdatedDatetime()]>
</span>
</li>
Expand Down
9 changes: 9 additions & 0 deletions core/templates/dev/head/css/oppia.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3989,6 +3989,15 @@ md-card.preview-conversation-skin-supplemental-card {
margin-right: 2px;
vertical-align: initial;
}
/* Accessibility workaround for icon buttons and links
Taken from:
https://www.nczonline.net/blog/2013/04/01/making-accessible-icon-buttons/ */
.oppia-icon-btn-label {
display: block;
font-size: 0;
height: 1px;
overflow: hidden;
}

.oppia-activity-summary-tile .recently-updated {
color: rgb(19,105,193);
Expand Down
1 change: 1 addition & 0 deletions core/templates/dev/head/pages/collection_player/collection_player.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,7 @@
<li>
<a ng-href="/collection_editor/create/{{collection_id}}" tooltip="Edit" tooltip-placement="bottom" target="_blank">
<i class="material-icons">&#xE254;</i>
<span class="oppia-icon-btn-label">Edit</span>
</a>
</li>
{% endif %}
Expand Down
1 change: 1 addition & 0 deletions core/templates/dev/head/pages/exploration_player/exploration_player.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ <h1 class="oppia-exploration-h1"><span class="protractor-test-exploration-header
</li>
<li ng-click="showInformationCard()" tooltip="<['I18N_PLAYER_INFO_TOOLTIP' | translate]>" tooltip-placement="bottom" style="cursor: pointer;" class="oppia-exploration-info-icon protractor-test-exploration-info-icon" tabindex="0">
<i class="material-icons oppia-navbar-breadcrumb-icon" style="font-size: 20px;">&#xE88E;</i>
<span class="oppia-icon-btn-label"><['I18N_PLAYER_INFO_TOOLTIP' | translate]></span>
</li>
</ul>
{% endblock navbar_breadcrumb %}
Expand Down
15 changes: 12 additions & 3 deletions core/templates/dev/head/pages/exploration_player/information_card_modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,30 @@ <h2 class="oppia-info-card-title"><[explorationTitle]></h2>

<ul layout="row" class="card-metrics" layout-align="space-between center">
<li class="protractor-test-info-card-rating">
<span class="fa fa-star fa-lg" tooltip="<['I18N_PLAYER_RATINGS_TOOLTIP' | translate]>" tooltip-placement="top"></span>
<span class="fa fa-star fa-lg" tooltip="<['I18N_PLAYER_RATINGS_TOOLTIP' | translate]>" tooltip-placement="top">
<span class="oppia-icon-btn-label"><['I18N_PLAYER_RATINGS_TOOLTIP' | translate]></span>
</span>
<span ng-if="!averageRating" translate="I18N_PLAYER_UNRATED">Unrated</span>
<span ng-if="averageRating"><[averageRating | number:1]></span>
</li>

<li>
<span class="fa fa-eye fa-lg" tooltip="<['I18N_PLAYER_VIEWS_TOOLTIP' | translate]>" tooltip-placement="top"></span>
<span class="fa fa-eye fa-lg" tooltip="<['I18N_PLAYER_VIEWS_TOOLTIP' | translate]>" tooltip-placement="top">
<span class="oppia-icon-btn-label"><['I18N_PLAYER_VIEWS_TOOLTIP' | translate]></span>
</span>
<[numViews | summarizeNonnegativeNumber]>
</li>

<li>
<span class="fa fa-clock-o fa-lg" tooltip="<['I18N_PLAYER_LAST_UPDATED_TOOLTIP' | translate]>" tooltip-placement="top"></span>
<span class="fa fa-clock-o fa-lg" tooltip="<['I18N_PLAYER_LAST_UPDATED_TOOLTIP' | translate]>" tooltip-placement="top">
<span class="oppia-icon-btn-label"><['I18N_PLAYER_LAST_UPDATED_TOOLTIP' | translate]></span>
</span>
<[lastUpdatedString]>
</li>

<ul layout="row" layout-align="space-between center" class="oppia-info-card-exploration-contributors-profile">
<i class="material-icons" tooltip="<['I18N_PLAYER_CONTRIBUTORS_TOOLTIP' | translate]>" tooltip-placement="top" style="cursor: default; margin-right: 5px;">&#xE7EF;</i>
<span class="oppia-icon-btn-label"><['I18N_PLAYER_CONTRIBUTORS_TOOLTIP' | translate]></span>
<li ng-repeat="name in contributorNames| limitTo: 2"
tooltip="<[name]>" tooltip-placement="top">
<profile-link-image username="name">
Expand All @@ -55,6 +62,7 @@ <h2 class="oppia-info-card-title"><[explorationTitle]></h2>
<span class="fa fa-tags fa-lg" tooltip-append-to-body="true"
tooltip="<['I18N_PLAYER_TAGS_TOOLTIP' | translate]>"
tooltip-placement="top">
<span class="oppia-icon-btn-label"><['I18N_PLAYER_TAGS_TOOLTIP' | translate]></span>
</span>
</div>
<md-chips layout-align="center center">
Expand Down Expand Up @@ -84,6 +92,7 @@ <h2 class="oppia-info-card-title"><[explorationTitle]></h2>
</div>
<button type="button" class="oppia-close-popover-button" ng-click="cancel()">
<i class="material-icons md-18" style="color: white;">&#xE5CD;</i>
<span class="oppia-icon-btn-label">Close</span>
</button>
</md-card>
</script>
4 changes: 4 additions & 0 deletions core/templates/dev/head/pages/exploration_player/learner_local_nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,27 @@
<li popover-placement="bottom" popover-template="'popover/feedback'" popover-trigger="click">
<a href="" class="protractor-test-exploration-feedback-popup-link" tooltip="<['I18N_PLAYER_FEEDBACK_TOOLTIP' | translate]>" tooltip-placement="bottom">
<i class="material-icons">&#xE87F;</i>
<span class="oppia-icon-btn-label"><['I18N_PLAYER_FEEDBACK_TOOLTIP' | translate]></span>
</a>
</li>
<li>
{% if can_edit %}
<a ng-href="/create/<[explorationId]>" tooltip="<['I18N_PLAYER_EDIT_TOOLTIP' | translate]>" tooltip-placement="bottom" target="_blank">
<i class="material-icons">&#xE254;</i>
<span class="oppia-icon-btn-label"><['I18N_PLAYER_EDIT_TOOLTIP' | translate]></span>
</a>
{% elif username %}
<a ng-click="showLearnerSuggestionModal()" tooltip="Suggest Changes" tooltip-placement="bottom" target="_blank">
<i class="material-icons">&#xE254;</i>
<span class="oppia-icon-btn-label">Suggest Changes</span>
</a>
{% endif %}
</li>
<li>
{% if username %}
<a ng-click="showFlagExplorationModal()" tooltip="<['I18N_PLAYER_REPORT_TOOLTIP' | translate]>" tooltip-placement="bottom" tabindex="0">
<i class="material-icons">&#xE153;</i>
<span class="oppia-icon-btn-label"><['I18N_PLAYER_REPORT_TOOLTIP' | translate]></span>
</a>
{% endif %}
</li>
Expand Down
2 changes: 2 additions & 0 deletions core/templates/dev/head/pages/exploration_player/progress_dots_directive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@
ng-if="$index === currentDotIndex" ng-show="dots.length > 1"
tooltip="<['I18N_PLAYER_CARD_NUMBER_TOOLTIP' | translate]><[$index +1]>" tooltip-placement="left"
tooltip-trigger="none" tooltip-is-open="opened" mobile-friendly-tooltip tabindex="0">
<span class="oppia-icon-btn-label"><['I18N_PLAYER_CARD_NUMBER_TOOLTIP' | translate]><[$index +1]></span>
</span>
<span class="oppia-progress-dot oppia-progress-dot-inactive"
ng-class="$index === leftmostVisibleDotIndex && $index !== 0 ? 'oppia-progress-dot-gradient-left':
Expand All @@ -114,6 +115,7 @@
ng-click="changeActiveDot($index)"
tooltip="<['I18N_PLAYER_CARD_NUMBER_TOOLTIP' | translate]><[$index +1]>" tooltip-placement="left"
tooltip-trigger="none" tooltip-is-open="opened" mobile-friendly-tooltip tabindex="0">
<span class="oppia-icon-btn-label"><['I18N_PLAYER_CARD_NUMBER_TOOLTIP' | translate]><[$index +1]></span>
</span>
</li>
<li class="oppia-progress-arrow" ng-show="dots.length > 1"
Expand Down
5 changes: 4 additions & 1 deletion core/templates/dev/head/pages/library/library.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,9 @@ <h2 ng-class="{'active': activeGroupIndex === $index}" class="oppia-library-grou
ng-hide="leftmostCardIndices[$index] == 0">
<i class="material-icons">&#xE314;</i>
</md-button>
<div class="oppia-library-carousel-scroller" ng-if="leftmostCardIndices[$index] == 0"></div>
<div class="oppia-library-carousel-scroller" ng-if="leftmostCardIndices[$index] == 0">
<span class="oppia-icon-btn-label">Scroll left</span>
</div>

<div class="oppia-library-carousel"
ng-swipe-right="scroll($index, true)"
Expand Down Expand Up @@ -146,6 +148,7 @@ <h2 ng-class="{'active': activeGroupIndex === $index}" class="oppia-library-grou
ng-click="scroll($index, false)"
ng-hide="(group.activity_summary_dicts.length - tileDisplayCount) <= leftmostCardIndices[$index]">
<i class="material-icons">&#xE315;</i>
<span class="oppia-icon-btn-label">Scroll right</span>
</md-button>
<div class="oppia-library-carousel-scroller"
ng-if="(group.activity_summary_dicts.length - tileDisplayCount) <= leftmostCardIndices[$index]"></div>
Expand Down
3 changes: 3 additions & 0 deletions core/templates/dev/head/pages/library/search_bar_directive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,9 @@
.oppia-search-bar-input.btn:hover,
.oppia-search-bar-input.btn:focus {
color: #fff;
}

.oppia-search-bar-input.btn:focus {
outline: 1px dotted #fff;
outline: auto 5px -webkit-focus-ring-color;
}
Expand Down

0 comments on commit ff1cff2

Please sign in to comment.