jenkins-bot has submitted this change and it was merged.
Change subject: Remove disabled elements from keyboard navigation flow
......................................................................
Remove disabled elements from keyboard navigation flow
Disabled tabindexed elements will receive -1 as their tabindex. This
removes them from the keyboard navigation flow.
Additionally set aria-disabled on the tabindexed element, because
ChromeVox and NVDA do not seem to inherit it from their parent
elements.
Bug: T87690
Change-Id: I767d92a26515f403dc3c8b7843dce836ae751847
---
M src/elements/TabIndexedElement.js
M src/widgets/ButtonWidget.js
2 files changed, 43 insertions(+), 8 deletions(-)
Approvals:
Jforrester: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/elements/TabIndexedElement.js
b/src/elements/TabIndexedElement.js
index 580e4ee..2328162 100644
--- a/src/elements/TabIndexedElement.js
+++ b/src/elements/TabIndexedElement.js
@@ -18,6 +18,9 @@
this.$tabIndexed = null;
this.tabIndex = null;
+ // Events
+ this.connect( this, { disable: 'onDisable' } );
+
// Initialization
this.setTabIndex( config.tabIndex || 0 );
this.setTabIndexedElement( config.$tabIndexed || this.$element );
@@ -38,12 +41,17 @@
*/
OO.ui.TabIndexedElement.prototype.setTabIndexedElement = function (
$tabIndexed ) {
if ( this.$tabIndexed ) {
- this.$tabIndexed.removeAttr( 'tabindex' );
+ this.$tabIndexed.removeAttr( 'tabindex aria-disabled' );
}
this.$tabIndexed = $tabIndexed;
if ( this.tabIndex !== null ) {
- this.$tabIndexed.attr( 'tabindex', this.tabIndex );
+ this.$tabIndexed.attr( {
+ // Do not index over disabled elements
+ tabindex: this.isDisabled() ? -1 : this.tabIndex,
+ // ChromeVox and NVDA do not seem to inherit this from
parent elements
+ 'aria-disabled': this.isDisabled().toString()
+ } );
}
};
@@ -59,9 +67,14 @@
if ( this.tabIndex !== tabIndex ) {
if ( this.$tabIndexed ) {
if ( tabIndex !== null ) {
- this.$tabIndexed.attr( 'tabindex', tabIndex );
+ this.$tabIndexed.attr( {
+ // Do not index over disabled elements
+ tabindex: this.isDisabled() ? -1 :
tabIndex,
+ // ChromeVox and NVDA do not seem to
inherit this from parent elements
+ 'aria-disabled':
this.isDisabled().toString()
+ } );
} else {
- this.$tabIndexed.removeAttr( 'tabindex' );
+ this.$tabIndexed.removeAttr( 'tabindex
aria-disabled' );
}
}
this.tabIndex = tabIndex;
@@ -71,6 +84,22 @@
};
/**
+ * Handle disable events.
+ *
+ * @param {boolean} disabled Element is disabled
+ */
+OO.ui.TabIndexedElement.prototype.onDisable = function ( disabled ) {
+ if ( this.$tabIndexed && this.tabIndex !== null ) {
+ this.$tabIndexed.attr( {
+ // Do not index over disabled elements
+ tabindex: disabled ? -1 : this.tabIndex,
+ // ChromeVox and NVDA do not seem to inherit this from
parent elements
+ 'aria-disabled': disabled.toString()
+ } );
+ }
+};
+
+/**
* Get tab index value.
*
* @return {number} Tab index value
diff --git a/src/widgets/ButtonWidget.js b/src/widgets/ButtonWidget.js
index d6a061d..27a4083 100644
--- a/src/widgets/ButtonWidget.js
+++ b/src/widgets/ButtonWidget.js
@@ -91,8 +91,11 @@
* @inheritdoc
*/
OO.ui.ButtonWidget.prototype.onMouseDown = function ( e ) {
- // Remove the tab-index while the button is down to prevent the button
from stealing focus
- this.$button.removeAttr( 'tabindex' );
+ if ( !this.isDisabled() ) {
+ // Remove the tab-index while the button is down to prevent the
button from stealing focus
+ this.$button.removeAttr( 'tabindex' );
+ }
+
return OO.ui.ButtonElement.prototype.onMouseDown.call( this, e );
};
@@ -100,8 +103,11 @@
* @inheritdoc
*/
OO.ui.ButtonWidget.prototype.onMouseUp = function ( e ) {
- // Restore the tab-index after the button is up to restore the button's
accessibility
- this.$button.attr( 'tabindex', this.tabIndex );
+ if ( !this.isDisabled() ) {
+ // Restore the tab-index after the button is up to restore the
button's accessibility
+ this.$button.attr( 'tabindex', this.tabIndex );
+ }
+
return OO.ui.ButtonElement.prototype.onMouseUp.call( this, e );
};
--
To view, visit https://gerrit.wikimedia.org/r/187274
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I767d92a26515f403dc3c8b7843dce836ae751847
Gerrit-PatchSet: 5
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: TheDJ <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: TheDJ <[email protected]>
Gerrit-Reviewer: Trevor Parscal <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
