Leahnaya/pokemon-showdown-client
1
0
Fork 0
mirror of https://github.com/smogon/pokemon-showdown-client.git synced 2026-03-21 17:50:29 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility improvements to the battle UI (#956)

Browse Source 
* Enable screen readers to automatically read incoming battle log text

* Mark sections of the battle UI with landmarks for quicker navigation with screen readers

* Allow tooltips on elements that participate in sequential keyboard navigation to have their tooltips automatically read out by screen readers when they gain focus
This commit is contained in:
Dickson Tan 2017-06-26 15:21:58 +08:00 committed by Guangcong Luo
parent 7b3eb4f654
commit 2afcc32807
4 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
js/battle.js
View File

@ -2479,7 +2479,7 @@ var Battle = (function () {
} else {
this.logFrameElem.html('<div class="battle-options"></div>');
this.optionsElem = this.logFrameElem.children().last();
this.logFrameElem.append('<div class="inner"></div>');
this.logFrameElem.append('<div class="inner" role="log"></div>');
this.logElem = this.logFrameElem.children().last();
this.logFrameElem.append('<div class="inner-preempt"></div>');
this.logPreemptElem = this.logFrameElem.children().last();
@ -2511,16 +2511,16 @@ var Battle = (function () {
this.spriteElem.append('<div></div>');
this.spriteElems[0] = this.spriteElem.children().last();
this.elem.append('<div></div>');
this.elem.append('<div role="complementary" aria-label="Active Pokemon"></div>');
this.statElem = this.elem.children().last();
this.elem.append('<div></div>');
this.fxElem = this.elem.children().last();
this.elem.append('<div class="leftbar"></div>');
this.elem.append('<div class="leftbar" role="complementary" aria-label="Your Team"></div>');
this.leftbarElem = this.elem.children().last();
this.elem.append('<div class="rightbar"></div>');
this.elem.append('<div class="rightbar" role="complementary" aria-label="Opponent\'s Team"></div>');
this.rightbarElem = this.elem.children().last();
this.elem.append('<div></div>');

7
js/client-battle-tooltips.js
View File

@ -104,8 +104,11 @@ var BattleTooltips = (function () {
' ontouchleave="BattleTooltips._handleTouchLeaveFor(event)"' +
' ontouchcancel="BattleTooltips._handleTouchLeaveFor(event)"' +
' onmouseover="BattleTooltips.showTooltipFor(\'' + roomid + '\', \'' + Tools.escapeHTML('' + thing, true) + '\',\'' + type + '\', this, ' + (ownHeight ? 'true' : 'false') + ')"' +
' onfocus="BattleTooltips.showTooltipFor(\'' + roomid + '\', \'' + Tools.escapeHTML('' + thing, true) + '\',\'' + type + '\', this, ' + (ownHeight ? 'true' : 'false') + ')"' +
' onmouseout="BattleTooltips.hideTooltip()"' +
' onmouseup="BattleTooltips._handleMouseUpFor()"';
' onblur="BattleTooltips.hideTooltip()"' +
' onmouseup="BattleTooltips._handleMouseUpFor()"' +
' aria-describedby="tooltipwrapper"';
};
BattleTooltips.prototype.showTooltip = function (thing, type, elem, ownHeight) {
var room = this.room;
@ -156,7 +159,7 @@ var BattleTooltips = (function () {
if (y < 140) y = 140;
if (x > $(window).width() - 303) x = Math.max($(window).width() - 303, 0);
if (!$('#tooltipwrapper').length) $(document.body).append('<div id="tooltipwrapper" onclick="$(\'#tooltipwrapper\').html(\'\');"></div>');
if (!$('#tooltipwrapper').length) $(document.body).append('<div id="tooltipwrapper" onclick="$(\'#tooltipwrapper\').html(\'\');" role="tooltip"></div>');
$('#tooltipwrapper').css({
left: x,
top: y

2
js/client-battle.js
View File

@ -11,7 +11,7 @@
this.isSideRoom = Tools.prefs('rightpanelbattles');
this.$el.addClass('ps-room-opaque').html('<div class="battle">Battle is here</div><div class="foehint"></div><div class="battle-log"></div><div class="battle-log-add">Connecting...</div><div class="battle-controls"></div><button class="battle-chat-toggle button" name="showChat"><i class="fa fa-caret-left"></i> Chat</button>');
this.$el.addClass('ps-room-opaque').html('<div class="battle">Battle is here</div><div class="foehint"></div><div class="battle-log" aria-label="Battle Log" role="complementary"></div><div class="battle-log-add">Connecting...</div><div class="battle-controls" role="complementary" aria-label="Battle Controls"></div><button class="battle-chat-toggle button" name="showChat"><i class="fa fa-caret-left"></i> Chat</button>');
this.$battle = this.$el.find('.battle');
this.$controls = this.$el.find('.battle-controls');

2
testclient.html
View File

@ -48,7 +48,7 @@
<div class="activitymenu">
<div class="pmbox">
<div class="pm-window news-embed">
<h3><button class="closebutton" tabindex="-1"><i class="fa fa-times-circle"></i></button><button class="minimizebutton" tabindex="-1"><i class="fa fa-minus-circle"></i></button>Latest News</h3>
<h3><button class="closebutton" tabindex="-1" aria-label="Close"><i class="fa fa-times-circle"></i></button><button class="minimizebutton" tabindex="-1" aria-label="Minimize"><i class="fa fa-minus-circle"></i></button>Latest News</h3>
<div class="pm-log" style="max-height:none">
<div class="newsentry"><h4>Test client</h4><p>Welcome to the test client! You can test client changes here!</p><p>&mdash;<strong>Zarel</strong> <small class="date">on Sep 25, 2015</small></p></div>
</div>