feat(List): allow overriding role prop

src/elements/List/List.js

@@ -147,22 +147,22 @@ class List extends Component {
 
     if (!childrenUtils.isNil(children)) {
       return (
-        <ElementType {...rest} role='list' className={classes}>
+        <ElementType role='list' className={classes} {...rest}>
           {children}
         </ElementType>
       )
     }
 
     if (!childrenUtils.isNil(content)) {
       return (
-        <ElementType {...rest} role='list' className={classes}>
+        <ElementType role='list' className={classes} {...rest}>
           {content}
         </ElementType>
       )
     }
 
     return (
-      <ElementType {...rest} role='list' className={classes}>
+      <ElementType role='list' className={classes} {...rest}>
         {_.map(items, item => ListItem.create(item, { overrideProps: this.handleItemOverrides }))}
       </ElementType>
     )

src/elements/List/ListItem.js

@@ -112,11 +112,11 @@ class ListItem extends Component {
     if (!childrenUtils.isNil(children)) {
       return (
         <ElementType
-          {...rest}
           {...valueProp}
           role='listitem'
           className={classes}
           onClick={this.handleClick}
+          {...rest}
         >
           {children}
         </ElementType>
@@ -130,11 +130,11 @@ class ListItem extends Component {
     if (!isValidElement(content) && _.isPlainObject(content)) {
       return (
         <ElementType
-          {...rest}
           {...valueProp}
           role='listitem'
           className={classes}
           onClick={this.handleClick}
+          {...rest}
         >
           {iconElement || imageElement}
           {ListContent.create(content, {
@@ -150,11 +150,11 @@ class ListItem extends Component {
     if (iconElement || imageElement) {
       return (
         <ElementType
-          {...rest}
           {...valueProp}
           role='listitem'
           className={classes}
           onClick={this.handleClick}
+          {...rest}
         >
           {iconElement || imageElement}
           {(content || headerElement || descriptionElement) && (
@@ -170,11 +170,11 @@ class ListItem extends Component {
 
     return (
       <ElementType
-        {...rest}
         {...valueProp}
         role='listitem'
         className={classes}
         onClick={this.handleClick}
+        {...rest}
       >
         {headerElement}
         {descriptionElement}

test/specs/elements/List/List-test.js

@@ -75,15 +75,32 @@ describe('List', () => {
   describe('role', () => {
     it('is accessibile with no items', () => {
       const wrapper = shallow(<List />)
-
       wrapper.should.have.prop('role', 'list')
     })
 
     it('is accessibile with items', () => {
       const wrapper = shallow(<List items={items} />)
-
       wrapper.should.have.prop('role', 'list')
     })
+
+    it('allows overriding with no items', () => {
+      const wrapper = shallow(<List role='listbox' />)
+      wrapper.should.have.prop('role', 'listbox')
+    })
+
+    it('allows overriding with items', () => {
+      const wrapper = shallow(<List role='listbox' items={items} />)
+      wrapper.should.have.prop('role', 'listbox')
+    })
+
+    it('allows overriding with children', () => {
+      const wrapper = shallow(
+        <List role='listbox'>
+          <ListItem />
+        </List>,
+      )
+      wrapper.should.have.prop('role', 'listbox')
+    })
   })
 
   describe('shorthand', () => {

test/specs/elements/List/ListItem-test.js

@@ -103,18 +103,41 @@ describe('ListItem', () => {
     it('adds role=listitem', () => {
       shallow(<ListItem />).should.have.prop('role', 'listitem')
     })
+
     it('adds role=listitem with children', () => {
       shallow(
         <ListItem>
           <div>Test</div>
         </ListItem>,
       ).should.have.prop('role', 'listitem')
     })
+
     it('adds role=listitem with content', () => {
       shallow(<ListItem content={<div />} />).should.have.prop('role', 'listitem')
     })
+
     it('adds role=listitem with icon', () => {
       shallow(<ListItem icon='user' />).should.have.prop('role', 'listitem')
     })
+
+    it('allows role override without children', () => {
+      shallow(<ListItem role='option' />).should.have.prop('role', 'option')
+    })
+
+    it('allows role override with children', () => {
+      shallow(
+        <ListItem role='option'>
+          <div>Test</div>
+        </ListItem>,
+      ).should.have.prop('role', 'option')
+    })
+
+    it('allows role override with content', () => {
+      shallow(<ListItem role='option' content={<div />} />).should.have.prop('role', 'option')
+    })
+
+    it('allows role override with icon', () => {
+      shallow(<ListItem role='option' icon='user' />).should.have.prop('role', 'option')
+    })
   })
 })