superdesk-ui-framework 2.4.16 → 2.4.19

package/dist/react/Inputs.tsx

@@ -33,7 +33,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                 <p className='docs-page__paragraph'></p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                        <div className='docs-page__content-row'>
                             <div className='form__row'>
                                 <CheckGroup>
                                     <Checkbox checked={this.state.required} label={{text:'Required input'}} onChange={(value) => {this.setState({required: value})}} />
@@ -45,7 +45,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                             <div className='form__row'>
                                 <Input label='Input label'
-                                    value='This is some value'
+                                    value='This is the value'
                                     maxLength={30}
                                     error='This is error message'
                                     info='This is some hint message'
@@ -57,6 +57,23 @@ export default class InputsDoc extends React.Component<{}, IState> {
                             </div>
                         </div>
 
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <p className="docs-page__paragraph">// Hidden label</p>
+                            <div className='form__row'>
+                                <Input label='Hidden input label'
+                                    value='Lorem ipsum input'
+                                    maxLength={30}
+                                    error='This is an error message'
+                                    info='This is a hint message'
+                                    inlineLabel={true}
+                                    labelHidden={true}
+                                    required={false}
+                                    disabled={false}
+                                    invalid={false}
+                                    onChange={(value) => {}} />
+                            </div>
+                        </div>
+
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Input label='Input label'
@@ -80,6 +97,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                     <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
                     <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
                     <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
+                    <Prop name='labelHidden' isRequired={false} type='boolean' default='false' description='Hide the label. The label will still be accessible to screen-readers.'/>
                     <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
                     <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
                     <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>

package/dist/react/Selects.tsx

@@ -37,7 +37,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                 <p className='docs-page__paragraph'></p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                        <div className='docs-page__content-row'>
                             <div className='form__row'>
                                 <CheckGroup>
                                     <Checkbox checked={this.state.required} label={{ text: 'Required input' }} onChange={(value) => { this.setState({ required: value }) }} />
@@ -63,6 +63,27 @@ export default class InputsDoc extends React.Component<{}, IState> {
                             </div>
                         </div>
 
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <p className="docs-page__paragraph">// Hidden label</p>
+                            <div className='form__row'>
+                                <Select label='Hidden select label'
+                                    value='Option 1'
+                                    error='Error message'
+                                    info='This is a hint message'
+                                    inlineLabel={true}
+                                    labelHidden={true}
+                                    required={false}
+                                    disabled={false}
+                                    invalid={this.state.invalid}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                    <Option>Option 3</Option>
+                                    <Option>Option 4</Option>
+                                </Select>
+                            </div>
+                        </div>
+
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Select label='Select label'
@@ -87,6 +108,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                     <Prop name='info' isRequired={false} type='string' default='/' description='Hint text' />
                     <Prop name='error' isRequired={false} type='string' default='/' description='Error text' />
                     <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline' />
+                    <Prop name='labelHidden' isRequired={false} type='boolean' default='false' description='Hide the label. The label will still be accessible to screen-readers.'/>
                     <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
                     <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
                     <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid' />

package/dist/superdesk-ui.bundle.css

@@ -19092,12 +19092,13 @@ tags-input {
     opacity: 1 !important; }
 
 .a11y-only {
-  position: absolute;
+  position: absolute !important;
   top: 0;
   z-index: -1;
   pointer-events: none;
   opacity: 0;
-  height: 1px;
+  height: 1px !important;
+  width: 1px !important;
   overflow: hidden; }
 
 .sd-popover {

package/dist/superdesk-ui.bundle.js

@@ -38267,13 +38267,21 @@ function mapToStyles(_ref2) {
       adaptive = _ref2.adaptive,
       roundOffsets = _ref2.roundOffsets,
       isFixed = _ref2.isFixed;
+  var _offsets$x = offsets.x,
+      x = _offsets$x === void 0 ? 0 : _offsets$x,
+      _offsets$y = offsets.y,
+      y = _offsets$y === void 0 ? 0 : _offsets$y;
 
-  var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
-      _ref3$x = _ref3.x,
-      x = _ref3$x === void 0 ? 0 : _ref3$x,
-      _ref3$y = _ref3.y,
-      y = _ref3$y === void 0 ? 0 : _ref3$y;
+  var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
 
+  x = _ref3.x;
+  y = _ref3.y;
   var hasX = offsets.hasOwnProperty('x');
   var hasY = offsets.hasOwnProperty('y');
   var sideX = __WEBPACK_IMPORTED_MODULE_0__enums_js__["l" /* left */];
@@ -38318,6 +38326,17 @@ function mapToStyles(_ref2) {
     position: position
   }, adaptive && unsetSides);
 
+  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
+
+  x = _ref4.x;
+  y = _ref4.y;
+
   if (gpuAcceleration) {
     var _Object$assign;
 
@@ -38327,9 +38346,9 @@ function mapToStyles(_ref2) {
   return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
 }
 
-function computeStyles(_ref4) {
-  var state = _ref4.state,
-      options = _ref4.options;
+function computeStyles(_ref5) {
+  var state = _ref5.state,
+      options = _ref5.options;
   var _options$gpuAccelerat = options.gpuAcceleration,
       gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
       _options$adaptive = options.adaptive,
@@ -59635,7 +59654,7 @@ module.exports = function(isValidElement, throwOnDirectAccess) {
         if (checkerResult == null) {
           return null;
         }
-        if (checkerResult.data.hasOwnProperty('expectedType')) {
+        if (checkerResult.data && has(checkerResult.data, 'expectedType')) {
           expectedTypes.push(checkerResult.data.expectedType);
         }
       }
@@ -60265,8 +60284,11 @@ var Input = /** @class */ (function (_super) {
             'sd-input--disabled': this.props.disabled,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
+        var labelClasses = classnames_1.default('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
         return (React.createElement("div", { className: classes },
-            this.props.label ? React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label) : null,
+            React.createElement("label", { className: labelClasses, htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label),
             React.createElement("input", { className: 'sd-input__input', type: 'text', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId + 'label', onChange: this.handleChange, disabled: this.props.disabled }),
             this.props.maxLength ?
                 React.createElement("div", { className: 'sd-input__char-count' },
@@ -60349,6 +60371,13 @@ var Select = /** @class */ (function (_super) {
         this.setState({ value: event.target.value });
         this.props.onChange(event.target.value);
     };
+    Select.prototype.componentDidUpdate = function (prevProps) {
+        var _a, _b;
+        if (this.props.value !== prevProps.value) {
+            this.setState({ value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '' });
+            this.props.onChange((_b = this.props.value) !== null && _b !== void 0 ? _b : '');
+        }
+    };
     Select.prototype.render = function () {
         var classes = classnames_1.default('sd-input sd-input--is-select', {
             'sd-input--inline-label': this.props.inlineLabel,
@@ -60356,9 +60385,11 @@ var Select = /** @class */ (function (_super) {
             'sd-input--disabled': this.props.disabled,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
+        var labelClasses = classnames_1.default('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
         return (React.createElement("div", { className: classes },
-            this.props.label ?
-                React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId }, this.props.label) : null,
+            React.createElement("label", { className: labelClasses, htmlFor: this.htmlId }, this.props.label),
             React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children),
             React.createElement("div", { className: 'sd-input__message-box' },
                 this.props.info && !this.props.invalid && !this.state.invalid ?
@@ -71196,7 +71227,6 @@ exports.Dropdown = function (_a) {
                     if (toggleRef && menuRef) {
                         core_1.createPopper(toggleRef, menuRef, {
                             placement: checkAlign() ? 'bottom-end' : 'bottom-start',
-                            strategy: 'fixed',
                         });
                         menuRef.style.display = 'block';
                     }
@@ -71429,7 +71459,7 @@ function getClippingParents(element) {
 
 
   return clippingParents.filter(function (clippingParent) {
-    return Object(__WEBPACK_IMPORTED_MODULE_7__instanceOf_js__["a" /* isElement */])(clippingParent) && Object(__WEBPACK_IMPORTED_MODULE_10__contains_js__["a" /* default */])(clippingParent, clipperElement) && Object(__WEBPACK_IMPORTED_MODULE_11__getNodeName_js__["a" /* default */])(clippingParent) !== 'body' && (canEscapeClipping ? Object(__WEBPACK_IMPORTED_MODULE_6__getComputedStyle_js__["a" /* default */])(clippingParent).position !== 'static' : true);
+    return Object(__WEBPACK_IMPORTED_MODULE_7__instanceOf_js__["a" /* isElement */])(clippingParent) && Object(__WEBPACK_IMPORTED_MODULE_10__contains_js__["a" /* default */])(clippingParent, clipperElement) && Object(__WEBPACK_IMPORTED_MODULE_11__getNodeName_js__["a" /* default */])(clippingParent) !== 'body';
   });
 } // Gets the maximum area that the element is visible in due to any number of
 // clipping parents
@@ -72051,7 +72081,7 @@ exports.Tag = function (_a) {
         _b["tag-label--" + shade] = shade && shade !== 'light',
         _b['tag-label--square'] = shape === 'square',
         _b));
-    return (React.createElement("div", { className: classes, key: keyValue },
+    return (React.createElement("span", { className: classes, key: keyValue },
         text,
         !readOnly ? React.createElement("button", { className: 'tag-label__remove', onClick: onClick },
             React.createElement("i", { className: 'icon-close-small' })) : null));

package/dist/vendor.bundle.js

@@ -28243,7 +28243,7 @@ __webpack_require__(7);
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
- * jQuery UI Widget 1.13.0
+ * jQuery UI Widget 1.13.1
  * http://jqueryui.com
  *
  * Copyright jQuery Foundation and other contributors
@@ -28324,7 +28324,7 @@ $.widget = function( name, base, prototype ) {
 	constructor = $[ namespace ][ name ] = function( options, element ) {
 
 		// Allow instantiation without "new" keyword
-		if ( !this._createWidget ) {
+		if ( !this || !this._createWidget ) {
 			return new constructor( options, element );
 		}
 
@@ -28746,6 +28746,8 @@ $.Widget.prototype = {
 		}, options );
 
 		function bindRemoveEvent() {
+			var nodesToBind = [];
+
 			options.element.each( function( _, element ) {
 				var isTracked = $.map( that.classesElementLookup, function( elements ) {
 					return elements;
@@ -28755,11 +28757,13 @@ $.Widget.prototype = {
 					} );
 
 				if ( !isTracked ) {
-					that._on( $( element ), {
-						remove: "_untrackClassesElement"
-					} );
+					nodesToBind.push( element );
 				}
 			} );
+
+			that._on( $( nodesToBind ), {
+				remove: "_untrackClassesElement"
+			} );
 		}
 
 		function processClassString( classes, checkOption ) {
@@ -29024,7 +29028,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
 $.ui = $.ui || {};
 
-return $.ui.version = "1.13.0";
+return $.ui.version = "1.13.1";
 
 } );
 

package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx

@@ -228,7 +228,20 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                             <Badge text={item.priority} shape='square' color={item.priorityColor} />
                                         </GridElements.GridItemFooterBlock>
                                         <GridElements.GridItemFooterActions>
-                                            <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
+                                            <Dropdown
+                                                align = 'right'
+                                                append = {true}
+                                                items={[
+                                                    {
+                                                        type: 'group', label: 'Actions', items: [
+                                                            'divider',
+                                                            { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
+                                                            { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
+                                                            { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
+                                                        ]
+                                                    }]}>
+                                                <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
+                                            </Dropdown>
                                         </GridElements.GridItemFooterActions>
                                     </GridElements.GridItemFooter>
                                 </GridElements.GridItem>

package/examples/pages/react/Inputs.tsx

@@ -33,7 +33,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                 <p className='docs-page__paragraph'></p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                        <div className='docs-page__content-row'>
                             <div className='form__row'>
                                 <CheckGroup>
                                     <Checkbox checked={this.state.required} label={{text:'Required input'}} onChange={(value) => {this.setState({required: value})}} />
@@ -45,7 +45,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                             <div className='form__row'>
                                 <Input label='Input label'
-                                    value='This is some value'
+                                    value='This is the value'
                                     maxLength={30}
                                     error='This is error message'
                                     info='This is some hint message'
@@ -57,6 +57,23 @@ export default class InputsDoc extends React.Component<{}, IState> {
                             </div>
                         </div>
 
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <p className="docs-page__paragraph">// Hidden label</p>
+                            <div className='form__row'>
+                                <Input label='Hidden input label'
+                                    value='Lorem ipsum input'
+                                    maxLength={30}
+                                    error='This is an error message'
+                                    info='This is a hint message'
+                                    inlineLabel={true}
+                                    labelHidden={true}
+                                    required={false}
+                                    disabled={false}
+                                    invalid={false}
+                                    onChange={(value) => {}} />
+                            </div>
+                        </div>
+
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Input label='Input label'
@@ -80,6 +97,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                     <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
                     <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
                     <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
+                    <Prop name='labelHidden' isRequired={false} type='boolean' default='false' description='Hide the label. The label will still be accessible to screen-readers.'/>
                     <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
                     <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
                     <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>

package/examples/pages/react/Selects.tsx

@@ -37,7 +37,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                 <p className='docs-page__paragraph'></p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                        <div className='docs-page__content-row'>
                             <div className='form__row'>
                                 <CheckGroup>
                                     <Checkbox checked={this.state.required} label={{ text: 'Required input' }} onChange={(value) => { this.setState({ required: value }) }} />
@@ -63,6 +63,27 @@ export default class InputsDoc extends React.Component<{}, IState> {
                             </div>
                         </div>
 
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <p className="docs-page__paragraph">// Hidden label</p>
+                            <div className='form__row'>
+                                <Select label='Hidden select label'
+                                    value='Option 1'
+                                    error='Error message'
+                                    info='This is a hint message'
+                                    inlineLabel={true}
+                                    labelHidden={true}
+                                    required={false}
+                                    disabled={false}
+                                    invalid={this.state.invalid}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                    <Option>Option 3</Option>
+                                    <Option>Option 4</Option>
+                                </Select>
+                            </div>
+                        </div>
+
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Select label='Select label'
@@ -87,6 +108,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                     <Prop name='info' isRequired={false} type='string' default='/' description='Hint text' />
                     <Prop name='error' isRequired={false} type='string' default='/' description='Error text' />
                     <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline' />
+                    <Prop name='labelHidden' isRequired={false} type='boolean' default='false' description='Hide the label. The label will still be accessible to screen-readers.'/>
                     <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
                     <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
                     <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid' />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "2.4.16",
+  "version": "2.4.19",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/Dropdown.js

@@ -105,7 +105,6 @@ exports.Dropdown = function (_a) {
                     if (toggleRef && menuRef) {
                         core_1.createPopper(toggleRef, menuRef, {
                             placement: checkAlign() ? 'bottom-end' : 'bottom-start',
-                            strategy: 'fixed',
                         });
                         menuRef.style.display = 'block';
                     }

package/react/components/Input.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 interface IProps {
     value?: string;
-    label?: string;
+    label: string;
     maxLength?: number;
     info?: string;
     error?: string;
@@ -9,6 +9,7 @@ interface IProps {
     disabled?: boolean;
     invalid?: boolean;
     inlineLabel?: boolean;
+    labelHidden?: boolean;
     onChange(newValue: string): void;
 }
 interface IState {

package/react/components/Input.js

@@ -66,8 +66,11 @@ var Input = /** @class */ (function (_super) {
             'sd-input--disabled': this.props.disabled,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
+        var labelClasses = classnames_1.default('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
         return (React.createElement("div", { className: classes },
-            this.props.label ? React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label) : null,
+            React.createElement("label", { className: labelClasses, htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label),
             React.createElement("input", { className: 'sd-input__input', type: 'text', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId + 'label', onChange: this.handleChange, disabled: this.props.disabled }),
             this.props.maxLength ?
                 React.createElement("div", { className: 'sd-input__char-count' },

package/react/components/Select.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
 interface ISelect {
     value?: string;
-    label?: string;
+    label: string;
     info?: string;
     error?: string;
     required?: boolean;
     disabled?: boolean;
     invalid?: boolean;
     inlineLabel?: boolean;
+    labelHidden?: boolean;
     onChange(newValue: string): void;
 }
 interface IState {
@@ -18,6 +19,7 @@ declare class Select extends React.Component<ISelect, IState> {
     constructor(props: ISelect);
     htmlId: string;
     handleChange(event: React.ChangeEvent<HTMLSelectElement>): void;
+    componentDidUpdate(prevProps: any): void;
     render(): JSX.Element;
 }
 interface IOption {

package/react/components/Select.js

@@ -56,6 +56,13 @@ var Select = /** @class */ (function (_super) {
         this.setState({ value: event.target.value });
         this.props.onChange(event.target.value);
     };
+    Select.prototype.componentDidUpdate = function (prevProps) {
+        var _a, _b;
+        if (this.props.value !== prevProps.value) {
+            this.setState({ value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '' });
+            this.props.onChange((_b = this.props.value) !== null && _b !== void 0 ? _b : '');
+        }
+    };
     Select.prototype.render = function () {
         var classes = classnames_1.default('sd-input sd-input--is-select', {
             'sd-input--inline-label': this.props.inlineLabel,
@@ -63,9 +70,11 @@ var Select = /** @class */ (function (_super) {
             'sd-input--disabled': this.props.disabled,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
+        var labelClasses = classnames_1.default('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
         return (React.createElement("div", { className: classes },
-            this.props.label ?
-                React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId }, this.props.label) : null,
+            React.createElement("label", { className: labelClasses, htmlFor: this.htmlId }, this.props.label),
             React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children),
             React.createElement("div", { className: 'sd-input__message-box' },
                 this.props.info && !this.props.invalid && !this.state.invalid ?

package/react/components/Tag.js

@@ -32,7 +32,7 @@ exports.Tag = function (_a) {
         _b["tag-label--" + shade] = shade && shade !== 'light',
         _b['tag-label--square'] = shape === 'square',
         _b));
-    return (React.createElement("div", { className: classes, key: keyValue },
+    return (React.createElement("span", { className: classes, key: keyValue },
         text,
         !readOnly ? React.createElement("button", { className: 'tag-label__remove', onClick: onClick },
             React.createElement("i", { className: 'icon-close-small' })) : null));