ak-dropdown-menu - npm Package Compare versions

Comparing version 2.2.1 to 2.2.2

CHANGELOG.md

@@ -1,6 +0,16 @@
-<a name="2.2.1"></a>
-## 2.2.1 (2017-01-13)
+<a name="2.2.2"></a>
+## 2.2.2 (2017-01-17)
 
 
 
+<a name="ak-dropdown-menu@2.2.2"></a>
+## ak-dropdown-menu@2.2.2 (2017-01-17)
+
+
+### Bug Fixes
+
+* **component:** fix accessibility ([322e29a](https://bitbucket.org/atlassian/atlaskit/commits/322e29a))
+
+
+
 <a name="ak-dropdown-menu@2.2.1"></a>
@@ -7,0 +17,0 @@ ## ak-dropdown-menu@2.2.1 (2017-01-13)

dist/bundle-cjs.js

@@ -218,3 +218,3 @@ module.exports = /******/
     });
-    var _extends2 = __webpack_require__(10), _extends3 = _interopRequireDefault(_extends2), _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _akDroplist = __webpack_require__(11), _akDroplist2 = _interopRequireDefault(_akDroplist), _akDroplistItem = __webpack_require__(12), _akDroplistItem2 = _interopRequireDefault(_akDroplistItem), _akDroplistGroup = __webpack_require__(13), _akDroplistGroup2 = _interopRequireDefault(_akDroplistGroup), _akButton = __webpack_require__(14), _akButton2 = _interopRequireDefault(_akButton), _expand = __webpack_require__(15), _expand2 = _interopRequireDefault(_expand), Icon = _react2.default.createElement(_expand2.default, {
+    var _extends2 = __webpack_require__(10), _extends3 = _interopRequireDefault(_extends2), _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _akDroplist = __webpack_require__(11), _akDroplist2 = _interopRequireDefault(_akDroplist), _akDroplistItem = __webpack_require__(12), _akDroplistItem2 = _interopRequireDefault(_akDroplistItem), _akDroplistGroup = __webpack_require__(13), _akDroplistGroup2 = _interopRequireDefault(_akDroplistGroup), _akButton = __webpack_require__(14), _akButton2 = _interopRequireDefault(_akButton), _expand = __webpack_require__(15), _expand2 = _interopRequireDefault(_expand), _uid = __webpack_require__(16), _uid2 = _interopRequireDefault(_uid), Icon = _react2.default.createElement(_expand2.default, {
         label: ""
@@ -228,3 +228,5 @@ }), StatelessDropdownMenu = function(_PureComponent) {
             _getPrototypeOf2.default)(StatelessDropdownMenu)).call.apply(_ref, [ this ].concat(args))), 
-            _this.renderItems = function(items) {
+            _this.state = {
+                id: (0, _uid2.default)()
+            }, _this.renderItems = function(items) {
                 return items.map(function(item, itemIndex) {
@@ -248,3 +250,3 @@ return _react2.default.createElement(_akDroplistItem2.default, (0, _extends3.default)({}, item, {
             }, _this.render = function() {
-                var _this2 = _this, props = _this2.props;
+                var _this2 = _this, props = _this2.props, state = _this2.state;
                 return _react2.default.createElement(_akDroplist2.default, {
@@ -256,8 +258,13 @@ position: props.position,
                     isTriggerNotTabbable: "button" === props.triggerType || props.isTriggerNotTabbable,
-                    listContext: "menu",
                     trigger: "button" === props.triggerType ? _react2.default.createElement(_akButton2.default, {
                         isSelected: props.isOpen,
-                        iconAfter: Icon
+                        iconAfter: Icon,
+                        ariaHaspopup: !0,
+                        ariaExpanded: props.isOpen,
+                        ariaControls: state.id
                     }, props.children) : props.children
-                }, _this.renderGroups(props.items));
+                }, _react2.default.createElement("div", {
+                    id: state.id,
+                    role: "menu"
+                }, _this.renderGroups(props.items)));
             }, _ret = _temp, (0, _possibleConstructorReturn3.default)(_this, _ret);
@@ -312,2 +319,6 @@ }
     module.exports = require("ak-icon/glyph/expand");
+}, /* 16 */
+/***/
+function(module, exports) {
+    module.exports = require("uid");
 } ]);

dist/bundle-cjs.min.js

@@ -1,1 +0,1 @@
-module.exports=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.StatelessDropdownMenu=void 0;var o=n(2),i=r(o),a=n(3),p=r(a),s=n(4),u=r(s),l=n(5),c=r(l),f=n(6),d=r(f),m=n(7),b=r(m),g=n(8),h=r(g),T=n(9),y=r(T),O=function(e){function t(){var e,n,r,o;(0,u.default)(this,t);for(var a=arguments.length,s=Array(a),l=0;l<a;l++)s[l]=arguments[l];return n=r=(0,d.default)(this,(e=t.__proto__||(0,p.default)(t)).call.apply(e,[this].concat(s))),r.state={isOpen:r.props.defaultOpen,items:[].concat((0,i.default)(r.props.items))},r.findActivatedGroup=function(e){return r.state.items.filter(function(t){return t.items.indexOf(e)>-1})[0]},r.handleItemActivation=function(e){var t=e.item,n=r.findActivatedGroup(t),o=[].concat((0,i.default)(r.state.items));switch(t.type){case"checkbox":t.isChecked=!t.isChecked,r.props.onItemActivated({item:t}),r.setState({items:o});break;case"radio":n.items.forEach(function(e){e===t?e.isChecked=!0:e.isChecked=!1}),r.props.onItemActivated({item:t}),r.setState({items:o});break;case"link":default:r.props.onItemActivated({item:t}),t.href||r.close()}},r.handleOpenChange=function(e){r.setState({isOpen:e.isOpen}),r.props.onOpenChange(e)},r.close=function(){r.setState({isOpen:!1}),r.props.onOpenChange({isOpen:!1})},r.render=function(){var e=r,t=e.props,n=e.state;return h.default.createElement(y.default,{position:t.position,appearance:t.appearance,isOpen:n.isOpen,onItemActivated:r.handleItemActivation,onOpenChange:r.handleOpenChange,isTriggerNotTabbable:t.isTriggerNotTabbable,triggerType:t.triggerType,items:n.items},t.children)},o=n,(0,d.default)(r,o)}return(0,b.default)(t,e),(0,c.default)(t,[{key:"componentWillReceiveProps",value:function(e){e.items!==this.state.items&&this.setState({items:[].concat((0,i.default)(e.items))})}}]),t}(g.PureComponent);O.propTypes={appearance:g.PropTypes.oneOf(["default","tall"]),children:g.PropTypes.node,defaultOpen:g.PropTypes.bool,isTriggerNotTabbable:g.PropTypes.bool,items:g.PropTypes.array.isRequired,onItemActivated:g.PropTypes.func,onOpenChange:g.PropTypes.func,position:g.PropTypes.string,triggerType:g.PropTypes.oneOf(["default","button"])},O.defaultProps={appearance:"default",defaultOpen:!1,isTriggerNotTabbable:!1,items:[],onItemActivated:function(){},onOpenChange:function(){},position:"bottom left",triggerType:"default"},t.default=O,t.StatelessDropdownMenu=y.default},function(e,t){e.exports=require("babel-runtime/helpers/toConsumableArray")},function(e,t){e.exports=require("babel-runtime/core-js/object/get-prototype-of")},function(e,t){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,t){e.exports=require("babel-runtime/helpers/createClass")},function(e,t){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("babel-runtime/helpers/inherits")},function(e,t){e.exports=require("react")},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(10),i=r(o),a=n(3),p=r(a),s=n(4),u=r(s),l=n(6),c=r(l),f=n(7),d=r(f),m=n(8),b=r(m),g=n(11),h=r(g),T=n(12),y=r(T),O=n(13),v=r(O),x=n(14),P=r(x),C=n(15),A=r(C),k=b.default.createElement(A.default,{label:""}),_=function(e){function t(){var e,n,r,o;(0,u.default)(this,t);for(var a=arguments.length,s=Array(a),l=0;l<a;l++)s[l]=arguments[l];return n=r=(0,c.default)(this,(e=t.__proto__||(0,p.default)(t)).call.apply(e,[this].concat(s))),r.renderItems=function(e){return e.map(function(e,t){return b.default.createElement(y.default,(0,i.default)({},e,{key:t,onActivate:function(){r.props.onItemActivated({item:e})}}),e.content)})},r.renderGroups=function(e){return e.map(function(e,t){return b.default.createElement(v.default,{heading:e.heading,key:t},r.renderItems(e.items))})},r.render=function(){var e=r,t=e.props;return b.default.createElement(h.default,{position:t.position,appearance:t.appearance,isOpen:t.isOpen,onOpenChange:t.onOpenChange,isTriggerNotTabbable:"button"===t.triggerType||t.isTriggerNotTabbable,listContext:"menu",trigger:"button"===t.triggerType?b.default.createElement(P.default,{isSelected:t.isOpen,iconAfter:k},t.children):t.children},r.renderGroups(t.items))},o=n,(0,c.default)(r,o)}return(0,d.default)(t,e),t}(m.PureComponent);_.propTypes={appearance:m.PropTypes.oneOf(["default","tall"]),children:m.PropTypes.node,isOpen:m.PropTypes.bool,isTriggerNotTabbable:m.PropTypes.bool,items:m.PropTypes.array.isRequired,onItemActivated:m.PropTypes.func,onOpenChange:m.PropTypes.func,position:m.PropTypes.string,triggerType:m.PropTypes.oneOf(["default","button"])},_.defaultProps={appearance:"default",isOpen:!1,isTriggerNotTabbable:!1,items:[],onItemActivated:function(){},onOpenChange:function(){},position:"bottom left",triggerType:"default"},t.default=_},function(e,t){e.exports=require("babel-runtime/helpers/extends")},function(e,t){e.exports=require("ak-droplist")},function(e,t){e.exports=require("ak-droplist-item")},function(e,t){e.exports=require("ak-droplist-group")},function(e,t){e.exports=require("ak-button")},function(e,t){e.exports=require("ak-icon/glyph/expand")}]);
+module.exports=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.StatelessDropdownMenu=void 0;var o=n(2),i=r(o),a=n(3),p=r(a),s=n(4),u=r(s),l=n(5),c=r(l),d=n(6),f=r(d),m=n(7),b=r(m),g=n(8),h=r(g),T=n(9),y=r(T),O=function(e){function t(){var e,n,r,o;(0,u.default)(this,t);for(var a=arguments.length,s=Array(a),l=0;l<a;l++)s[l]=arguments[l];return n=r=(0,f.default)(this,(e=t.__proto__||(0,p.default)(t)).call.apply(e,[this].concat(s))),r.state={isOpen:r.props.defaultOpen,items:[].concat((0,i.default)(r.props.items))},r.findActivatedGroup=function(e){return r.state.items.filter(function(t){return t.items.indexOf(e)>-1})[0]},r.handleItemActivation=function(e){var t=e.item,n=r.findActivatedGroup(t),o=[].concat((0,i.default)(r.state.items));switch(t.type){case"checkbox":t.isChecked=!t.isChecked,r.props.onItemActivated({item:t}),r.setState({items:o});break;case"radio":n.items.forEach(function(e){e===t?e.isChecked=!0:e.isChecked=!1}),r.props.onItemActivated({item:t}),r.setState({items:o});break;case"link":default:r.props.onItemActivated({item:t}),t.href||r.close()}},r.handleOpenChange=function(e){r.setState({isOpen:e.isOpen}),r.props.onOpenChange(e)},r.close=function(){r.setState({isOpen:!1}),r.props.onOpenChange({isOpen:!1})},r.render=function(){var e=r,t=e.props,n=e.state;return h.default.createElement(y.default,{position:t.position,appearance:t.appearance,isOpen:n.isOpen,onItemActivated:r.handleItemActivation,onOpenChange:r.handleOpenChange,isTriggerNotTabbable:t.isTriggerNotTabbable,triggerType:t.triggerType,items:n.items},t.children)},o=n,(0,f.default)(r,o)}return(0,b.default)(t,e),(0,c.default)(t,[{key:"componentWillReceiveProps",value:function(e){e.items!==this.state.items&&this.setState({items:[].concat((0,i.default)(e.items))})}}]),t}(g.PureComponent);O.propTypes={appearance:g.PropTypes.oneOf(["default","tall"]),children:g.PropTypes.node,defaultOpen:g.PropTypes.bool,isTriggerNotTabbable:g.PropTypes.bool,items:g.PropTypes.array.isRequired,onItemActivated:g.PropTypes.func,onOpenChange:g.PropTypes.func,position:g.PropTypes.string,triggerType:g.PropTypes.oneOf(["default","button"])},O.defaultProps={appearance:"default",defaultOpen:!1,isTriggerNotTabbable:!1,items:[],onItemActivated:function(){},onOpenChange:function(){},position:"bottom left",triggerType:"default"},t.default=O,t.StatelessDropdownMenu=y.default},function(e,t){e.exports=require("babel-runtime/helpers/toConsumableArray")},function(e,t){e.exports=require("babel-runtime/core-js/object/get-prototype-of")},function(e,t){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,t){e.exports=require("babel-runtime/helpers/createClass")},function(e,t){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("babel-runtime/helpers/inherits")},function(e,t){e.exports=require("react")},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(10),i=r(o),a=n(3),p=r(a),s=n(4),u=r(s),l=n(6),c=r(l),d=n(7),f=r(d),m=n(8),b=r(m),g=n(11),h=r(g),T=n(12),y=r(T),O=n(13),v=r(O),x=n(14),P=r(x),C=n(15),A=r(C),k=n(16),q=r(k),_=b.default.createElement(A.default,{label:""}),I=function(e){function t(){var e,n,r,o;(0,u.default)(this,t);for(var a=arguments.length,s=Array(a),l=0;l<a;l++)s[l]=arguments[l];return n=r=(0,c.default)(this,(e=t.__proto__||(0,p.default)(t)).call.apply(e,[this].concat(s))),r.state={id:(0,q.default)()},r.renderItems=function(e){return e.map(function(e,t){return b.default.createElement(y.default,(0,i.default)({},e,{key:t,onActivate:function(){r.props.onItemActivated({item:e})}}),e.content)})},r.renderGroups=function(e){return e.map(function(e,t){return b.default.createElement(v.default,{heading:e.heading,key:t},r.renderItems(e.items))})},r.render=function(){var e=r,t=e.props,n=e.state;return b.default.createElement(h.default,{position:t.position,appearance:t.appearance,isOpen:t.isOpen,onOpenChange:t.onOpenChange,isTriggerNotTabbable:"button"===t.triggerType||t.isTriggerNotTabbable,trigger:"button"===t.triggerType?b.default.createElement(P.default,{isSelected:t.isOpen,iconAfter:_,ariaHaspopup:!0,ariaExpanded:t.isOpen,ariaControls:n.id},t.children):t.children},b.default.createElement("div",{id:n.id,role:"menu"},r.renderGroups(t.items)))},o=n,(0,c.default)(r,o)}return(0,f.default)(t,e),t}(m.PureComponent);I.propTypes={appearance:m.PropTypes.oneOf(["default","tall"]),children:m.PropTypes.node,isOpen:m.PropTypes.bool,isTriggerNotTabbable:m.PropTypes.bool,items:m.PropTypes.array.isRequired,onItemActivated:m.PropTypes.func,onOpenChange:m.PropTypes.func,position:m.PropTypes.string,triggerType:m.PropTypes.oneOf(["default","button"])},I.defaultProps={appearance:"default",isOpen:!1,isTriggerNotTabbable:!1,items:[],onItemActivated:function(){},onOpenChange:function(){},position:"bottom left",triggerType:"default"},t.default=I},function(e,t){e.exports=require("babel-runtime/helpers/extends")},function(e,t){e.exports=require("ak-droplist")},function(e,t){e.exports=require("ak-droplist-item")},function(e,t){e.exports=require("ak-droplist-group")},function(e,t){e.exports=require("ak-button")},function(e,t){e.exports=require("ak-icon/glyph/expand")},function(e,t){e.exports=require("uid")}]);

dist/bundle.js

 !function(root, factory) {
-    "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("babel-runtime/helpers/toConsumableArray"), require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("babel-runtime/helpers/extends"), require("ak-droplist"), require("ak-droplist-item"), require("ak-droplist-group"), require("ak-button"), require("ak-icon/glyph/expand")) : "function" == typeof define && define.amd ? define([ "babel-runtime/helpers/toConsumableArray", "babel-runtime/core-js/object/get-prototype-of", "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/createClass", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "react", "babel-runtime/helpers/extends", "ak-droplist", "ak-droplist-item", "ak-droplist-group", "ak-button", "ak-icon/glyph/expand" ], factory) : "object" == typeof exports ? exports.akDropdownMenu = factory(require("babel-runtime/helpers/toConsumableArray"), require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("babel-runtime/helpers/extends"), require("ak-droplist"), require("ak-droplist-item"), require("ak-droplist-group"), require("ak-button"), require("ak-icon/glyph/expand")) : root.akDropdownMenu = factory(root["babel-runtime/helpers/toConsumableArray"], root["babel-runtime/core-js/object/get-prototype-of"], root["babel-runtime/helpers/classCallCheck"], root["babel-runtime/helpers/createClass"], root["babel-runtime/helpers/possibleConstructorReturn"], root["babel-runtime/helpers/inherits"], root.react, root["babel-runtime/helpers/extends"], root["ak-droplist"], root["ak-droplist-item"], root["ak-droplist-group"], root["ak-button"], root["ak-icon/glyph/expand"]);
-}(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_10__, __WEBPACK_EXTERNAL_MODULE_11__, __WEBPACK_EXTERNAL_MODULE_12__, __WEBPACK_EXTERNAL_MODULE_13__, __WEBPACK_EXTERNAL_MODULE_14__, __WEBPACK_EXTERNAL_MODULE_15__) {
+    "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("babel-runtime/helpers/toConsumableArray"), require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("babel-runtime/helpers/extends"), require("ak-droplist"), require("ak-droplist-item"), require("ak-droplist-group"), require("ak-button"), require("ak-icon/glyph/expand"), require("uid")) : "function" == typeof define && define.amd ? define([ "babel-runtime/helpers/toConsumableArray", "babel-runtime/core-js/object/get-prototype-of", "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/createClass", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "react", "babel-runtime/helpers/extends", "ak-droplist", "ak-droplist-item", "ak-droplist-group", "ak-button", "ak-icon/glyph/expand", "uid" ], factory) : "object" == typeof exports ? exports.akDropdownMenu = factory(require("babel-runtime/helpers/toConsumableArray"), require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("babel-runtime/helpers/extends"), require("ak-droplist"), require("ak-droplist-item"), require("ak-droplist-group"), require("ak-button"), require("ak-icon/glyph/expand"), require("uid")) : root.akDropdownMenu = factory(root["babel-runtime/helpers/toConsumableArray"], root["babel-runtime/core-js/object/get-prototype-of"], root["babel-runtime/helpers/classCallCheck"], root["babel-runtime/helpers/createClass"], root["babel-runtime/helpers/possibleConstructorReturn"], root["babel-runtime/helpers/inherits"], root.react, root["babel-runtime/helpers/extends"], root["ak-droplist"], root["ak-droplist-item"], root["ak-droplist-group"], root["ak-button"], root["ak-icon/glyph/expand"], root.uid);
+}(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_10__, __WEBPACK_EXTERNAL_MODULE_11__, __WEBPACK_EXTERNAL_MODULE_12__, __WEBPACK_EXTERNAL_MODULE_13__, __WEBPACK_EXTERNAL_MODULE_14__, __WEBPACK_EXTERNAL_MODULE_15__, __WEBPACK_EXTERNAL_MODULE_16__) {
     /******/
@@ -221,3 +221,3 @@ return function(modules) {
         });
-        var _extends2 = __webpack_require__(10), _extends3 = _interopRequireDefault(_extends2), _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _akDroplist = __webpack_require__(11), _akDroplist2 = _interopRequireDefault(_akDroplist), _akDroplistItem = __webpack_require__(12), _akDroplistItem2 = _interopRequireDefault(_akDroplistItem), _akDroplistGroup = __webpack_require__(13), _akDroplistGroup2 = _interopRequireDefault(_akDroplistGroup), _akButton = __webpack_require__(14), _akButton2 = _interopRequireDefault(_akButton), _expand = __webpack_require__(15), _expand2 = _interopRequireDefault(_expand), Icon = _react2.default.createElement(_expand2.default, {
+        var _extends2 = __webpack_require__(10), _extends3 = _interopRequireDefault(_extends2), _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _akDroplist = __webpack_require__(11), _akDroplist2 = _interopRequireDefault(_akDroplist), _akDroplistItem = __webpack_require__(12), _akDroplistItem2 = _interopRequireDefault(_akDroplistItem), _akDroplistGroup = __webpack_require__(13), _akDroplistGroup2 = _interopRequireDefault(_akDroplistGroup), _akButton = __webpack_require__(14), _akButton2 = _interopRequireDefault(_akButton), _expand = __webpack_require__(15), _expand2 = _interopRequireDefault(_expand), _uid = __webpack_require__(16), _uid2 = _interopRequireDefault(_uid), Icon = _react2.default.createElement(_expand2.default, {
             label: ""
@@ -231,3 +231,5 @@ }), StatelessDropdownMenu = function(_PureComponent) {
                 _getPrototypeOf2.default)(StatelessDropdownMenu)).call.apply(_ref, [ this ].concat(args))), 
-                _this.renderItems = function(items) {
+                _this.state = {
+                    id: (0, _uid2.default)()
+                }, _this.renderItems = function(items) {
                     return items.map(function(item, itemIndex) {
@@ -251,3 +253,3 @@ return _react2.default.createElement(_akDroplistItem2.default, (0, _extends3.default)({}, item, {
                 }, _this.render = function() {
-                    var _this2 = _this, props = _this2.props;
+                    var _this2 = _this, props = _this2.props, state = _this2.state;
                     return _react2.default.createElement(_akDroplist2.default, {
@@ -259,8 +261,13 @@ position: props.position,
                         isTriggerNotTabbable: "button" === props.triggerType || props.isTriggerNotTabbable,
-                        listContext: "menu",
                         trigger: "button" === props.triggerType ? _react2.default.createElement(_akButton2.default, {
                             isSelected: props.isOpen,
-                            iconAfter: Icon
+                            iconAfter: Icon,
+                            ariaHaspopup: !0,
+                            ariaExpanded: props.isOpen,
+                            ariaControls: state.id
                         }, props.children) : props.children
-                    }, _this.renderGroups(props.items));
+                    }, _react2.default.createElement("div", {
+                        id: state.id,
+                        role: "menu"
+                    }, _this.renderGroups(props.items)));
                 }, _ret = _temp, (0, _possibleConstructorReturn3.default)(_this, _ret);
@@ -315,3 +322,7 @@ }
         module.exports = __WEBPACK_EXTERNAL_MODULE_15__;
+    }, /* 16 */
+    /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_16__;
     } ]);
 });

dist/bundle.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/helpers/toConsumableArray"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("babel-runtime/helpers/extends"),require("ak-droplist"),require("ak-droplist-item"),require("ak-droplist-group"),require("ak-button"),require("ak-icon/glyph/expand")):"function"==typeof define&&define.amd?define(["babel-runtime/helpers/toConsumableArray","babel-runtime/core-js/object/get-prototype-of","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/createClass","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","react","babel-runtime/helpers/extends","ak-droplist","ak-droplist-item","ak-droplist-group","ak-button","ak-icon/glyph/expand"],t):"object"==typeof exports?exports.akDropdownMenu=t(require("babel-runtime/helpers/toConsumableArray"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("babel-runtime/helpers/extends"),require("ak-droplist"),require("ak-droplist-item"),require("ak-droplist-group"),require("ak-button"),require("ak-icon/glyph/expand")):e.akDropdownMenu=t(e["babel-runtime/helpers/toConsumableArray"],e["babel-runtime/core-js/object/get-prototype-of"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/createClass"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.react,e["babel-runtime/helpers/extends"],e["ak-droplist"],e["ak-droplist-item"],e["ak-droplist-group"],e["ak-button"],e["ak-icon/glyph/expand"])}(this,function(e,t,r,n,o,i,a,s,p,u,l,c,d){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(1)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.StatelessDropdownMenu=void 0;var o=r(2),i=n(o),a=r(3),s=n(a),p=r(4),u=n(p),l=r(5),c=n(l),d=r(6),f=n(d),b=r(7),m=n(b),h=r(8),g=n(h),y=r(9),T=n(y),C=function(e){function t(){var e,r,n,o;(0,u.default)(this,t);for(var a=arguments.length,p=Array(a),l=0;l<a;l++)p[l]=arguments[l];return r=n=(0,f.default)(this,(e=t.__proto__||(0,s.default)(t)).call.apply(e,[this].concat(p))),n.state={isOpen:n.props.defaultOpen,items:[].concat((0,i.default)(n.props.items))},n.findActivatedGroup=function(e){return n.state.items.filter(function(t){return t.items.indexOf(e)>-1})[0]},n.handleItemActivation=function(e){var t=e.item,r=n.findActivatedGroup(t),o=[].concat((0,i.default)(n.state.items));switch(t.type){case"checkbox":t.isChecked=!t.isChecked,n.props.onItemActivated({item:t}),n.setState({items:o});break;case"radio":r.items.forEach(function(e){e===t?e.isChecked=!0:e.isChecked=!1}),n.props.onItemActivated({item:t}),n.setState({items:o});break;case"link":default:n.props.onItemActivated({item:t}),t.href||n.close()}},n.handleOpenChange=function(e){n.setState({isOpen:e.isOpen}),n.props.onOpenChange(e)},n.close=function(){n.setState({isOpen:!1}),n.props.onOpenChange({isOpen:!1})},n.render=function(){var e=n,t=e.props,r=e.state;return g.default.createElement(T.default,{position:t.position,appearance:t.appearance,isOpen:r.isOpen,onItemActivated:n.handleItemActivation,onOpenChange:n.handleOpenChange,isTriggerNotTabbable:t.isTriggerNotTabbable,triggerType:t.triggerType,items:r.items},t.children)},o=r,(0,f.default)(n,o)}return(0,m.default)(t,e),(0,c.default)(t,[{key:"componentWillReceiveProps",value:function(e){e.items!==this.state.items&&this.setState({items:[].concat((0,i.default)(e.items))})}}]),t}(h.PureComponent);C.propTypes={appearance:h.PropTypes.oneOf(["default","tall"]),children:h.PropTypes.node,defaultOpen:h.PropTypes.bool,isTriggerNotTabbable:h.PropTypes.bool,items:h.PropTypes.array.isRequired,onItemActivated:h.PropTypes.func,onOpenChange:h.PropTypes.func,position:h.PropTypes.string,triggerType:h.PropTypes.oneOf(["default","button"])},C.defaultProps={appearance:"default",defaultOpen:!1,isTriggerNotTabbable:!1,items:[],onItemActivated:function(){},onOpenChange:function(){},position:"bottom left",triggerType:"default"},t.default=C,t.StatelessDropdownMenu=T.default},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t){e.exports=r},function(e,t){e.exports=n},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(10),i=n(o),a=r(3),s=n(a),p=r(4),u=n(p),l=r(6),c=n(l),d=r(7),f=n(d),b=r(8),m=n(b),h=r(11),g=n(h),y=r(12),T=n(y),C=r(13),k=n(C),x=r(14),O=n(x),v=r(15),q=n(v),P=m.default.createElement(q.default,{label:""}),A=function(e){function t(){var e,r,n,o;(0,u.default)(this,t);for(var a=arguments.length,p=Array(a),l=0;l<a;l++)p[l]=arguments[l];return r=n=(0,c.default)(this,(e=t.__proto__||(0,s.default)(t)).call.apply(e,[this].concat(p))),n.renderItems=function(e){return e.map(function(e,t){return m.default.createElement(T.default,(0,i.default)({},e,{key:t,onActivate:function(){n.props.onItemActivated({item:e})}}),e.content)})},n.renderGroups=function(e){return e.map(function(e,t){return m.default.createElement(k.default,{heading:e.heading,key:t},n.renderItems(e.items))})},n.render=function(){var e=n,t=e.props;return m.default.createElement(g.default,{position:t.position,appearance:t.appearance,isOpen:t.isOpen,onOpenChange:t.onOpenChange,isTriggerNotTabbable:"button"===t.triggerType||t.isTriggerNotTabbable,listContext:"menu",trigger:"button"===t.triggerType?m.default.createElement(O.default,{isSelected:t.isOpen,iconAfter:P},t.children):t.children},n.renderGroups(t.items))},o=r,(0,c.default)(n,o)}return(0,f.default)(t,e),t}(b.PureComponent);A.propTypes={appearance:b.PropTypes.oneOf(["default","tall"]),children:b.PropTypes.node,isOpen:b.PropTypes.bool,isTriggerNotTabbable:b.PropTypes.bool,items:b.PropTypes.array.isRequired,onItemActivated:b.PropTypes.func,onOpenChange:b.PropTypes.func,position:b.PropTypes.string,triggerType:b.PropTypes.oneOf(["default","button"])},A.defaultProps={appearance:"default",isOpen:!1,isTriggerNotTabbable:!1,items:[],onItemActivated:function(){},onOpenChange:function(){},position:"bottom left",triggerType:"default"},t.default=A},function(e,t){e.exports=s},function(e,t){e.exports=p},function(e,t){e.exports=u},function(e,t){e.exports=l},function(e,t){e.exports=c},function(e,t){e.exports=d}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/helpers/toConsumableArray"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("babel-runtime/helpers/extends"),require("ak-droplist"),require("ak-droplist-item"),require("ak-droplist-group"),require("ak-button"),require("ak-icon/glyph/expand"),require("uid")):"function"==typeof define&&define.amd?define(["babel-runtime/helpers/toConsumableArray","babel-runtime/core-js/object/get-prototype-of","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/createClass","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","react","babel-runtime/helpers/extends","ak-droplist","ak-droplist-item","ak-droplist-group","ak-button","ak-icon/glyph/expand","uid"],t):"object"==typeof exports?exports.akDropdownMenu=t(require("babel-runtime/helpers/toConsumableArray"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("babel-runtime/helpers/extends"),require("ak-droplist"),require("ak-droplist-item"),require("ak-droplist-group"),require("ak-button"),require("ak-icon/glyph/expand"),require("uid")):e.akDropdownMenu=t(e["babel-runtime/helpers/toConsumableArray"],e["babel-runtime/core-js/object/get-prototype-of"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/createClass"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.react,e["babel-runtime/helpers/extends"],e["ak-droplist"],e["ak-droplist-item"],e["ak-droplist-group"],e["ak-button"],e["ak-icon/glyph/expand"],e.uid)}(this,function(e,t,r,n,o,i,a,s,p,u,l,c,d,f){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(1)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.StatelessDropdownMenu=void 0;var o=r(2),i=n(o),a=r(3),s=n(a),p=r(4),u=n(p),l=r(5),c=n(l),d=r(6),f=n(d),b=r(7),m=n(b),h=r(8),g=n(h),y=r(9),T=n(y),C=function(e){function t(){var e,r,n,o;(0,u.default)(this,t);for(var a=arguments.length,p=Array(a),l=0;l<a;l++)p[l]=arguments[l];return r=n=(0,f.default)(this,(e=t.__proto__||(0,s.default)(t)).call.apply(e,[this].concat(p))),n.state={isOpen:n.props.defaultOpen,items:[].concat((0,i.default)(n.props.items))},n.findActivatedGroup=function(e){return n.state.items.filter(function(t){return t.items.indexOf(e)>-1})[0]},n.handleItemActivation=function(e){var t=e.item,r=n.findActivatedGroup(t),o=[].concat((0,i.default)(n.state.items));switch(t.type){case"checkbox":t.isChecked=!t.isChecked,n.props.onItemActivated({item:t}),n.setState({items:o});break;case"radio":r.items.forEach(function(e){e===t?e.isChecked=!0:e.isChecked=!1}),n.props.onItemActivated({item:t}),n.setState({items:o});break;case"link":default:n.props.onItemActivated({item:t}),t.href||n.close()}},n.handleOpenChange=function(e){n.setState({isOpen:e.isOpen}),n.props.onOpenChange(e)},n.close=function(){n.setState({isOpen:!1}),n.props.onOpenChange({isOpen:!1})},n.render=function(){var e=n,t=e.props,r=e.state;return g.default.createElement(T.default,{position:t.position,appearance:t.appearance,isOpen:r.isOpen,onItemActivated:n.handleItemActivation,onOpenChange:n.handleOpenChange,isTriggerNotTabbable:t.isTriggerNotTabbable,triggerType:t.triggerType,items:r.items},t.children)},o=r,(0,f.default)(n,o)}return(0,m.default)(t,e),(0,c.default)(t,[{key:"componentWillReceiveProps",value:function(e){e.items!==this.state.items&&this.setState({items:[].concat((0,i.default)(e.items))})}}]),t}(h.PureComponent);C.propTypes={appearance:h.PropTypes.oneOf(["default","tall"]),children:h.PropTypes.node,defaultOpen:h.PropTypes.bool,isTriggerNotTabbable:h.PropTypes.bool,items:h.PropTypes.array.isRequired,onItemActivated:h.PropTypes.func,onOpenChange:h.PropTypes.func,position:h.PropTypes.string,triggerType:h.PropTypes.oneOf(["default","button"])},C.defaultProps={appearance:"default",defaultOpen:!1,isTriggerNotTabbable:!1,items:[],onItemActivated:function(){},onOpenChange:function(){},position:"bottom left",triggerType:"default"},t.default=C,t.StatelessDropdownMenu=T.default},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t){e.exports=r},function(e,t){e.exports=n},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(10),i=n(o),a=r(3),s=n(a),p=r(4),u=n(p),l=r(6),c=n(l),d=r(7),f=n(d),b=r(8),m=n(b),h=r(11),g=n(h),y=r(12),T=n(y),C=r(13),k=n(C),x=r(14),O=n(x),v=r(15),q=n(v),P=r(16),A=n(P),_=m.default.createElement(q.default,{label:""}),j=function(e){function t(){var e,r,n,o;(0,u.default)(this,t);for(var a=arguments.length,p=Array(a),l=0;l<a;l++)p[l]=arguments[l];return r=n=(0,c.default)(this,(e=t.__proto__||(0,s.default)(t)).call.apply(e,[this].concat(p))),n.state={id:(0,A.default)()},n.renderItems=function(e){return e.map(function(e,t){return m.default.createElement(T.default,(0,i.default)({},e,{key:t,onActivate:function(){n.props.onItemActivated({item:e})}}),e.content)})},n.renderGroups=function(e){return e.map(function(e,t){return m.default.createElement(k.default,{heading:e.heading,key:t},n.renderItems(e.items))})},n.render=function(){var e=n,t=e.props,r=e.state;return m.default.createElement(g.default,{position:t.position,appearance:t.appearance,isOpen:t.isOpen,onOpenChange:t.onOpenChange,isTriggerNotTabbable:"button"===t.triggerType||t.isTriggerNotTabbable,trigger:"button"===t.triggerType?m.default.createElement(O.default,{isSelected:t.isOpen,iconAfter:_,ariaHaspopup:!0,ariaExpanded:t.isOpen,ariaControls:r.id},t.children):t.children},m.default.createElement("div",{id:r.id,role:"menu"},n.renderGroups(t.items)))},o=r,(0,c.default)(n,o)}return(0,f.default)(t,e),t}(b.PureComponent);j.propTypes={appearance:b.PropTypes.oneOf(["default","tall"]),children:b.PropTypes.node,isOpen:b.PropTypes.bool,isTriggerNotTabbable:b.PropTypes.bool,items:b.PropTypes.array.isRequired,onItemActivated:b.PropTypes.func,onOpenChange:b.PropTypes.func,position:b.PropTypes.string,triggerType:b.PropTypes.oneOf(["default","button"])},j.defaultProps={appearance:"default",isOpen:!1,isTriggerNotTabbable:!1,items:[],onItemActivated:function(){},onOpenChange:function(){},position:"bottom left",triggerType:"default"},t.default=j},function(e,t){e.exports=s},function(e,t){e.exports=p},function(e,t){e.exports=u},function(e,t){e.exports=l},function(e,t){e.exports=c},function(e,t){e.exports=d},function(e,t){e.exports=f}])});

package.json

 {
   "name": "ak-dropdown-menu",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "ak-dropdown-menu React component",
@@ -26,3 +26,4 @@ "main": "dist/bundle.js",
     "ak-icon": "^12.2.0",
-    "keycode": "^2.1.2"
+    "keycode": "^2.1.2",
+    "uid": "0.0.2"
   },
@@ -29,0 +30,0 @@ "author": "Atlassian Pty Ltd",

README.md

@@ -5,3 +5,3 @@ [![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://aui-cdn.atlassian.com/atlaskit/registry/)
 [![Report an issue](https://img.shields.io/badge/Report-an_issue-6554C0.svg)](https://ecosystem.atlassian.net/browse/AK)
-[![Ask in our forum](https://img.shields.io/badge/Ask-in_our_forum-6554C0.svg)](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-dropdown-menu,ak-dropdown-menu@2.2.1)
+[![Ask in our forum](https://img.shields.io/badge/Ask-in_our_forum-6554C0.svg)](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-dropdown-menu,ak-dropdown-menu@2.2.2)
 
@@ -14,3 +14,3 @@ # Dropdown menu
 
-See more detailed documentation and code examples in the [live demo of the component](https://aui-cdn.atlassian.com/atlaskit/stories/ak-dropdown-menu/2.2.1/).
+See more detailed documentation and code examples in the [live demo of the component](https://aui-cdn.atlassian.com/atlaskit/stories/ak-dropdown-menu/2.2.2/).
 
@@ -25,3 +25,3 @@ ## Installation
 
-See examples of usage and detailed documentation in the [live demo of the component](https://aui-cdn.atlassian.com/atlaskit/stories/ak-dropdown-menu/2.2.1/).
+See examples of usage and detailed documentation in the [live demo of the component](https://aui-cdn.atlassian.com/atlaskit/stories/ak-dropdown-menu/2.2.2/).
 
@@ -38,3 +38,3 @@
 
-Ask a question in our [forum](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-dropdown-menu,ak-dropdown-menu@2.2.1).
+Ask a question in our [forum](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-dropdown-menu,ak-dropdown-menu@2.2.2).
 
@@ -41,0 +41,0 @@ Check [if someone has already asked the same question before](https://answers.atlassian.com/questions/topics/42926171/atlaskit).

No alert changes

Improved metrics

Total package byte prevSize

56618

increased by3.11%

Lines of code

673

increased by3.54%

Worsened metrics

Dependency count

13

increased by8.33%

Dependency changes

• + Addeduid@0.0.2

• + Addeduid@0.0.2(transitive)