jenkins-bot has submitted this change and it was merged. Change subject: FieldsetLayout: Make use of `<fieldset>` and `<legend>` tags ......................................................................
FieldsetLayout: Make use of `<fieldset>` and `<legend>` tags Providing `<fieldset>` and `<legend>` tags in FieldsetLayout to ensure best experience for users of assistive technology. Also moving `<legend>` to first child of `<fieldset>` element as defined in HTML5 spec and ensuring cross-browser consistent layout by following https://github.com/necolas/normalize.css and https://thatemil.com/blog/2015/01/03/reset-your-fieldset/ Bug: T131823 Change-Id: Ie4655eedf9548199a8e7bb87fbac9df770d5beac --- M php/layouts/FieldsetLayout.php M src/layouts/FieldsetLayout.js M src/styles/layouts/FieldsetLayout.less M src/themes/apex/layouts.less M src/themes/mediawiki/layouts.less 5 files changed, 28 insertions(+), 11 deletions(-) Approvals: Bartosz Dziewoński: Looks good to me, approved jenkins-bot: Verified diff --git a/php/layouts/FieldsetLayout.php b/php/layouts/FieldsetLayout.php index 43e7745..3b6495d 100644 --- a/php/layouts/FieldsetLayout.php +++ b/php/layouts/FieldsetLayout.php @@ -12,6 +12,10 @@ use LabelElement; use GroupElement; + /* Static Properties */ + + public static $tagName = 'fieldset'; + /** * @param array $config Configuration options * @param FieldLayout[] $config['items'] Items to add @@ -22,13 +26,15 @@ // Traits $this->initializeIconElement( $config ); - $this->initializeLabelElement( $config ); + $this->initializeLabelElement( array_merge( $config, [ + 'labelElement' => new Tag( 'legend' ) + ] ) ); $this->initializeGroupElement( $config ); // Initialization $this ->addClasses( [ 'oo-ui-fieldsetLayout' ] ) - ->prependContent( $this->icon, $this->label, $this->group ); + ->prependContent( $this->label, $this->icon, $this->group ); if ( isset( $config['items'] ) ) { $this->addItems( $config['items'] ); } diff --git a/src/layouts/FieldsetLayout.js b/src/layouts/FieldsetLayout.js index d3f16ac..76200fe 100644 --- a/src/layouts/FieldsetLayout.js +++ b/src/layouts/FieldsetLayout.js @@ -49,7 +49,7 @@ // Mixin constructors OO.ui.mixin.IconElement.call( this, config ); - OO.ui.mixin.LabelElement.call( this, config ); + OO.ui.mixin.LabelElement.call( this, $.extend( {}, config, { $label: $( '<legend>' ) } ) ); OO.ui.mixin.GroupElement.call( this, config ); if ( config.help ) { @@ -72,7 +72,7 @@ // Initialization this.$element .addClass( 'oo-ui-fieldsetLayout' ) - .prepend( this.$help, this.$icon, this.$label, this.$group ); + .prepend( this.$label, this.$help, this.$icon, this.$group ); if ( Array.isArray( config.items ) ) { this.addItems( config.items ); } @@ -84,3 +84,7 @@ OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.mixin.IconElement ); OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.mixin.LabelElement ); OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.mixin.GroupElement ); + +/* Static Properties */ + +OO.ui.FieldsetLayout.static.tagName = 'fieldset'; diff --git a/src/styles/layouts/FieldsetLayout.less b/src/styles/layouts/FieldsetLayout.less index 62ceb11..f4753c4 100644 --- a/src/styles/layouts/FieldsetLayout.less +++ b/src/styles/layouts/FieldsetLayout.less @@ -2,6 +2,14 @@ .oo-ui-fieldsetLayout { position: relative; + min-width: 0; // Prevent overflowing content in WebKit/Blink (responsive layouts) + margin: 0; + border: 0; + padding: 0.01px 0 0 0; // Prevent WebKit/Safari from collapsing `margin`s + + body:not( :-moz-handler-blocked ) & { + display: table-cell; // Prevent overflowing content in Firefox (responsive layouts) + } &.oo-ui-iconElement > .oo-ui-iconElement-icon { display: block; @@ -9,7 +17,12 @@ } &.oo-ui-labelElement > .oo-ui-labelElement-label { - display: inline-block; + color: inherit; // Correct the color inheritance from `fieldset` elements in IE + display: table; // Correct the text wrapping in Edge and IE + box-sizing: border-box; // Correct the text wrapping in Edge and IE + max-width: 100%; // Correct the text wrapping in Edge and IE + padding: 0; + white-space: normal; // Correct the text wrapping in Edge and IE } > .oo-ui-fieldsetLayout-help { diff --git a/src/themes/apex/layouts.less b/src/themes/apex/layouts.less index 0dbd8b5..e2902f8 100644 --- a/src/themes/apex/layouts.less +++ b/src/themes/apex/layouts.less @@ -102,9 +102,6 @@ } .theme-oo-ui-fieldsetLayout () { - margin: 0; - padding: 0; - border: 0; + .oo-ui-fieldsetLayout, + .oo-ui-formLayout { diff --git a/src/themes/mediawiki/layouts.less b/src/themes/mediawiki/layouts.less index 15ffe06..0523ed7 100644 --- a/src/themes/mediawiki/layouts.less +++ b/src/themes/mediawiki/layouts.less @@ -107,9 +107,6 @@ } .theme-oo-ui-fieldsetLayout () { - margin: 0; - padding: 0; - border: 0; + .oo-ui-fieldsetLayout, + .oo-ui-formLayout { -- To view, visit https://gerrit.wikimedia.org/r/304409 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Ie4655eedf9548199a8e7bb87fbac9df770d5beac Gerrit-PatchSet: 4 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: VolkerE <volke...@wikimedia.org> Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com> Gerrit-Reviewer: Esanders <esand...@wikimedia.org> Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org> Gerrit-Reviewer: Prtksxna <psax...@wikimedia.org> Gerrit-Reviewer: TheDJ <hartman.w...@gmail.com> Gerrit-Reviewer: VolkerE <volke...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
