Skip to content

Commit 08b8063

Browse files
joedolsonjoedolson
committed
Switch controls back but button elements
Fixes #672
1 parent a32992d commit 08b8063

4 files changed

Lines changed: 21 additions & 28 deletions

File tree

‎scripts/buildplayer.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1045,19 +1045,14 @@ function addBuildplayerFunctions(AblePlayer) {
10451045
// this control is a button
10461046
buttonTitle = this.getButtonTitle(control);
10471047

1048-
// Buttons consist of a <div role="button"> with an <svg> inside.
1048+
// Buttons consist of a <button> with an <svg> inside.
10491049
// We add aria-label to the button (but not title)
10501050
// This has been thoroughly tested and works well in all screen reader/browser combinations
10511051
// See https://github.com/ableplayer/ableplayer/issues/81
10521052

1053-
// NOTE: Changed from <button> to <div role="button" as of 4.2.18
1054-
// because <button> elements are rendered poorly in high contrast mode
1055-
// in some OS/browser/plugin combinations
1056-
10571053
// In 5.0.0, icons are always SVG, so the font & image icon edge cases are removed.
1058-
$newButton = $('<div>',{
1059-
'role': 'button',
1060-
'tabindex': '0',
1054+
$newButton = $('<button>',{
1055+
'type': 'button',
10611056
'class': 'able-button-handler-' + control
10621057
});
10631058

‎scripts/control.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -518,7 +518,7 @@ function addControlFunctions(AblePlayer) {
518518
rightControls = leftControls.next('div.able-right-controls');
519519
widthUsed = leftControls.outerWidth(true);
520520
rightControls.children().each(function () {
521-
if ($(this).attr('role')=='button') {
521+
if ( $(this).is('button') ) {
522522
widthUsed += $(this).outerWidth(true) + 5;
523523
}
524524
});

‎scripts/event.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ function addEventFunctions(AblePlayer) {
228228

229229
if ( this.$focusedElement && null !== this.activeMedia ) {
230230
$mediaParent = $( '#' + this.activeMedia ).closest( '.able' );
231-
if ( (this.$focusedElement).attr('role') === 'button' ) {
231+
if ( ( this.$focusedElement).is('button') ) {
232232
classList = this.$focusedElement.attr("class").split(/\s+/);
233233
$.each(classList, function(index, item) {
234234
if (item.substring(0,20) === 'able-button-handler-') {
@@ -437,9 +437,8 @@ function addEventFunctions(AblePlayer) {
437437
// disable spacebar support for play/pause toggle as of 4.2.10
438438
// spacebar should not be handled everywhere on the page, since users use that to scroll the page
439439
// when the player has focus, most controls are buttons so spacebar should be used to trigger the buttons
440-
if ($thisElement.attr('role') === 'button') {
440+
if ($thisElement.is('button')) {
441441
// register a click on this element
442-
e.preventDefault();
443442
$thisElement.trigger( 'click' );
444443
}
445444
} else if ( key === 'p' ) {
@@ -503,11 +502,11 @@ function addEventFunctions(AblePlayer) {
503502
this.handlePrefsClick();
504503
}
505504
} else if (key === 'Enter') {
506-
if ($thisElement.attr('role') === 'button' || $thisElement.prop('tagName') === 'SPAN') {
505+
if ( $thisElement.is('button') || $thisElement.is('span') ) {
507506
// register a click on this element
508507
// if it's a transcript span the transcript span click handler will take over
509508
$thisElement.trigger( 'click' );
510-
} else if ($thisElement.prop('tagName') === 'LI') {
509+
} else if ($thisElement.is('li')) {
511510
$thisElement.trigger( 'click' );
512511
}
513512
}
@@ -760,7 +759,7 @@ function addEventFunctions(AblePlayer) {
760759
}
761760

762761
// handle clicks on player buttons
763-
this.$controllerDiv.find('div[role="button"]').on('click',function(e){
762+
this.$controllerDiv.find('button').on('click',function(e){
764763
e.stopPropagation();
765764
thisObj.onClickPlayerButton(this);
766765
});

‎styles/ableplayer.css‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
* .able-transcript-area = 7000
2222
*
2323
* Player controls: (5000 - 6000)
24-
* .able-controller div[role="button"] = 6600
24+
* .able-controller button = 6600
2525
* .able-big-play-button = 6500
2626
* .able-seekbar = 6500
2727
* div.able-captions-wrapper = 6000
@@ -336,8 +336,7 @@ video[data-able-player],
336336
}
337337

338338
.able-controller,
339-
.able-controller button,
340-
.able-controller div[role="button"]{
339+
.able-controller button {
341340
color: var(--able-control-color);
342341
}
343342

@@ -358,7 +357,8 @@ video[data-able-player],
358357
outline-offset: 2px;
359358
}
360359

361-
.able-controller div[role="button"] {
360+
.able-controller button {
361+
all: unset;
362362
background: none;
363363
position: relative;
364364
padding: 2px;
@@ -373,9 +373,10 @@ video[data-able-player],
373373
align-items: center;
374374
z-index: 6600;
375375
border-radius: 3px;
376+
box-sizing: border-box;
376377
}
377378

378-
.able-controller div.able-button-handler-play[role="button"] {
379+
.able-controller div.able-button-handler-play button {
379380
/* The icon appears too large if this button doesn't have padding. */
380381
padding: 4px;
381382
}
@@ -1187,7 +1188,7 @@ div.able-modal-dialog button,
11871188
.able-window-toolbar input,
11881189
.able-window-toolbar select,
11891190
.able-controller input,
1190-
.able-controller div[role="button"],
1191+
.able-controller button,
11911192
.able-seekbar-head {
11921193
outline-style: solid;
11931194
outline-width: 3px;
@@ -1200,14 +1201,13 @@ div.able-modal-dialog button,
12001201
.able-modal-dialog button:focus,
12011202
.able-wrapper .able button.able-big-play-button:focus .icon-play,
12021203
.able-wrapper .able button.able-big-play-button:focus svg,
1203-
.able-controller div[role="button"]:focus,
1204+
.able-controller button:focus,
12041205
div.able-modal-dialog input:focus,
12051206
div.able-modal-dialog button:focus,
12061207
.able-window-toolbar .able-button-handler-preferences:focus,
12071208
.able-window-toolbar input:focus,
12081209
.able-window-toolbar select:focus,
12091210
.able-controller input:focus,
1210-
.able-controller div[role="button"]:focus,
12111211
.able-seekbar-head:focus {
12121212
outline-color: var(--able-focus-outline);
12131213
}
@@ -1220,14 +1220,13 @@ div.able-modal-dialog button:focus,
12201220
.able-wrapper .able button.able-big-play-button:hover .icon-play,
12211221
.able-wrapper .able button.able-big-play-button:hover svg,
12221222
.able-popup li:hover,
1223-
.able-controller div[role="button"]:hover,
1223+
.able-controller button:hover,
12241224
div.able-modal-dialog input:hover,
12251225
div.able-modal-dialog button:hover,
12261226
.able-window-toolbar .able-button-handler-preferences:hover,
12271227
.able-window-toolbar input:hover,
12281228
.able-window-toolbar select:hover,
12291229
.able-controller input:hover,
1230-
.able-controller div[role="button"]:hover,
12311230
.able-seekbar-head:hover {
12321231
outline-color: var(--able-hover-outline);
12331232
}
@@ -1339,8 +1338,8 @@ button.able-search-results-time {
13391338
}
13401339

13411340
/* SVG Icons */
1342-
.able-wrapper div[role="button"] svg,
1343-
.able-modal-dialog div[role="button"] svg,
1341+
.able-wrapper button svg,
1342+
.able-modal-dialog button svg,
13441343
.able-wrapper button svg,
13451344
.able-modal-dialog button svg {
13461345
display: block;
@@ -1486,7 +1485,7 @@ button#able-vts-save:focus {
14861485
.able-control-row {
14871486
gap: 8px;
14881487
}
1489-
.able-control-row div[role="button"] {
1488+
.able-control-row button {
14901489
min-width: 32px;
14911490
height: 32px;
14921491
}

0 commit comments

Comments
 (0)