Cscott has uploaded a new change for review.
https://gerrit.wikimedia.org/r/190365
Change subject: Allow tabIndex to be null
......................................................................
Allow tabIndex to be null
Reduce code duplication in the JS implementation of TabIndexedElement and
fix a bug which would not allow you to initialize tabIndex to null.
Update the PHP implementation of TabIndexedElement to match the JS
implementation.
Change-Id: I31dd9b013463cc7810d9f981b0a47ad72519c63c
---
M php/elements/TabIndexedElement.php
M src/elements/TabIndexedElement.js
2 files changed, 66 insertions(+), 46 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/65/190365/1
diff --git a/php/elements/TabIndexedElement.php
b/php/elements/TabIndexedElement.php
index 16df4d3..9a75bae 100644
--- a/php/elements/TabIndexedElement.php
+++ b/php/elements/TabIndexedElement.php
@@ -11,7 +11,7 @@
/**
* Tab index value.
*
- * @var number
+ * @var number|null
*/
protected $tabIndex = null;
@@ -20,8 +20,8 @@
/**
* @param Element $element Element being mixed into
* @param array $config Configuration options
- * @param number $config['tabIndex'] Tab index value. Use 0 to use
default ordering, use -1 to
- * prevent tab focusing. (default: 0)
+ * @param number|null $config['tabIndex'] Tab index value. Use 0 to use
default ordering, use -1 to
+ * prevent tab focusing, use null for no tabIndex attribute.
(default: 0)
*/
public function __construct( Element $element, array $config = array()
) {
// Parent constructor
@@ -42,21 +42,38 @@
$tabIndex = is_numeric( $tabIndex ) ? $tabIndex : null;
if ( $this->tabIndex !== $tabIndex ) {
- if ( $tabIndex !== null ) {
- $this->target->setAttributes( array( 'tabindex'
=> $tabIndex ) );
- } else {
- $this->target->removeAttributes( array(
'tabindex' ) );
- }
$this->tabIndex = $tabIndex;
+ $this->updateTabIndex();
}
return $this;
}
/**
+ * Update the tabIndex attribute, in case of changes to tabIndex or
disabled
+ * state.
+ *
+ * @chainable
+ */
+ public function updateTabIndex() {
+ $disabled = $this->element->isDisabled();
+ if ( $this->tabIndex !== null ) {
+ $this->target->setAttributes( array(
+ // 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 ? 'true' :
'false' )
+ ) );
+ } else {
+ $this->target->removeAttributes( array( 'tabindex',
'aria-disabled' ) );
+ }
+ return $this;
+ }
+
+ /**
* Get tab index value.
*
- * @return number Tab index value
+ * @return number|null Tab index value
*/
public function getTabIndex() {
return $this->tabIndex;
diff --git a/src/elements/TabIndexedElement.js
b/src/elements/TabIndexedElement.js
index 866d185..b519d2d 100644
--- a/src/elements/TabIndexedElement.js
+++ b/src/elements/TabIndexedElement.js
@@ -7,8 +7,8 @@
* @constructor
* @param {Object} [config] Configuration options
* @cfg {jQuery} [$tabIndexed] tabIndexed node, assigned to #$tabIndexed, omit
to use #$element
- * @cfg {number|Function} [tabIndex=0] Tab index value. Use 0 to use default
ordering, use -1 to
- * prevent tab focusing. (default: 0)
+ * @cfg {number|null} [tabIndex=0] Tab index value. Use 0 to use default
ordering, use -1 to
+ * prevent tab focusing, use null to suppress the `tabIndex` attribute.
(default: 0)
*/
OO.ui.TabIndexedElement = function OoUiTabIndexedElement( config ) {
// Configuration initialization
@@ -22,7 +22,11 @@
this.connect( this, { disable: 'onDisable' } );
// Initialization
- this.setTabIndex( config.tabIndex || 0 );
+ if ( config.tabIndex === null ) {
+ this.setTabIndex( null );
+ } else {
+ this.setTabIndex( config.tabIndex || 0 );
+ }
this.setTabIndexedElement( config.$tabIndexed || this.$element );
};
@@ -38,21 +42,16 @@
* If an element is already set, it will be cleaned up before setting up the
new element.
*
* @param {jQuery} $tabIndexed Element to set tab index on
+ * @chainable
*/
OO.ui.TabIndexedElement.prototype.setTabIndexedElement = function (
$tabIndexed ) {
- if ( this.$tabIndexed ) {
- this.$tabIndexed.removeAttr( 'tabindex aria-disabled' );
- }
-
+ var tabIndex = this.tabIndex;
+ // remove attributes from old $tabIndexed
+ this.setTabIndex( null );
+ // force update of new $tabIndexed
this.$tabIndexed = $tabIndexed;
- if ( this.tabIndex !== null ) {
- 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()
- } );
- }
+ this.tabIndex = tabIndex;
+ return this.updateTabIndex();
};
/**
@@ -65,21 +64,32 @@
tabIndex = typeof tabIndex === 'number' ? tabIndex : null;
if ( this.tabIndex !== tabIndex ) {
- if ( this.$tabIndexed ) {
- if ( tabIndex !== null ) {
- 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
aria-disabled' );
- }
- }
this.tabIndex = tabIndex;
+ this.updateTabIndex();
}
+ return this;
+};
+
+/**
+ * Update the tabIndex attribute, in case of changes to tabIndex or disabled
+ * state.
+ *
+ * @chainable
+ */
+OO.ui.TabIndexedElement.prototype.updateTabIndex = function () {
+ if ( this.$tabIndexed ) {
+ if ( this.tabIndex !== null ) {
+ // Do not index over disabled elements
+ this.$tabIndexed.attr( {
+ tabindex: this.isDisabled() ? -1 :
this.tabIndex,
+ // ChromeVox and NVDA do not seem to inherit
this from parent elements
+ 'aria-disabled': this.isDisabled().toString()
+ } );
+ } else {
+ this.$tabIndexed.removeAttr( 'tabindex aria-disabled' );
+ }
+ }
return this;
};
@@ -88,21 +98,14 @@
*
* @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()
- } );
- }
+OO.ui.TabIndexedElement.prototype.onDisable = function () {
+ this.updateTabIndex();
};
/**
* Get tab index value.
*
- * @return {number} Tab index value
+ * @return {number|null} Tab index value
*/
OO.ui.TabIndexedElement.prototype.getTabIndex = function () {
return this.tabIndex;
--
To view, visit https://gerrit.wikimedia.org/r/190365
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I31dd9b013463cc7810d9f981b0a47ad72519c63c
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Cscott <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
