TheDJ has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/187274

Change subject: Remove disabled buttons from keyboard navigation flow
......................................................................

Remove disabled buttons from keyboard navigation flow

Disabled buttons or elements pretending to be a button will receive -1
as their tabindex. This removes them from the keyboard navigation
flow.

Additionally we set aria-disabled, because chromevox and nvda do not
seem to inherit this from their parent elements.

Bug: T87690
Change-Id: I767d92a26515f403dc3c8b7843dce836ae751847
---
M src/elements/ButtonElement.js
1 file changed, 24 insertions(+), 1 deletion(-)


  git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/74/187274/1

diff --git a/src/elements/ButtonElement.js b/src/elements/ButtonElement.js
index 2d463dc..cfed75b 100644
--- a/src/elements/ButtonElement.js
+++ b/src/elements/ButtonElement.js
@@ -34,6 +34,8 @@
        this.setTabIndex( config.tabIndex || 0 );
        this.setAccessKey( config.accessKey );
        this.setButtonElement( config.$button || this.$( '<a>' ) );
+       this.on( 'disable', this.updateDisabled.bind( this ) );
+
 };
 
 /* Setup */
@@ -70,7 +72,12 @@
 
        this.$button = $button
                .addClass( 'oo-ui-buttonElement-button' )
-               .attr( { role: 'button', accesskey: this.accessKey, tabindex: 
this.tabIndex } )
+               .attr( {
+                       role: 'button',
+                       accesskey: this.accessKey,
+                       tabindex: this.isDisabled() ? -1 : this.tabIndex,
+                       'aria-disabled': this.isDisabled()
+               } )
                .on( 'mousedown', this.onMouseDownHandler );
 };
 
@@ -195,3 +202,19 @@
        this.$element.toggleClass( 'oo-ui-buttonElement-active', !!value );
        return this;
 };
+
+/**
+ * Consistently apply additional markup changes when changing disabled state
+ *
+ * @param {boolean} disabled or not
+ * @chainable
+ */
+OO.ui.ButtonElement.prototype.updateDisabled = function ( accessKey ) {
+       if ( this.$button ) {
+               this.$button.attr( {
+                       tabindex: this.isDisabled() ? -1 : this.tabIndex,
+                       'aria-disabled': this.isDisabled()
+               } );
+       }
+       return this;
+};

-- 
To view, visit https://gerrit.wikimedia.org/r/187274
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I767d92a26515f403dc3c8b7843dce836ae751847
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: TheDJ <hartman.w...@gmail.com>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to