Add aria-labelledby to picklist component. Remove it from dropdown. Based on Jesse, Stef advice

Author: donnieberg

components/SLDSDropdownBase/index.jsx

@@ -55,7 +55,6 @@ module.exports = React.createClass( {
 
   getInitialState(){
     return {
-      triggerId:null,
       isOpen:false,
       isFocused:false,
       isClosing:false,
@@ -68,8 +67,6 @@ module.exports = React.createClass( {
   },
 
   componentDidMount(){
-    const id = React.findDOMNode(this.refs.button).getAttribute("data-reactid");
-    this.setState({triggerId:id});
     if(this.props.initialFocus){
       this.setFocus();
     }
@@ -242,7 +239,6 @@ module.exports = React.createClass( {
 
   getPopoverContent(){
     return <List
-            triggerId={this.state.triggerId}
             ref='list'
             options={this.props.options}
             className={this.props.listClassName}
@@ -321,7 +317,6 @@ module.exports = React.createClass( {
 
     return <SLDSButton
         ref='button'
-        id={this.state.triggerId}
         aria-haspopup='true'
         label={this.props.label}
         className={this.props.className}

components/SLDSDropdownBase/list.jsx

@@ -163,7 +163,7 @@ module.exports = React.createClass({
           ref="scroll"
           className={"slds-dropdown__list slds-theme--"+this.props.theme}
           role="menu"
-          aria-labelledby={this.props.triggerId}>
+          >
           { this.getItems() }
         </ul>
       </div>

components/SLDSPicklistBase/index.jsx

@@ -47,6 +47,7 @@ module.exports = React.createClass( {
 
   getInitialState(){
     return {
+      triggerId:null,
       isOpen:false,
       isFocused:false,
       highlightedIndex:0,
@@ -57,6 +58,9 @@ module.exports = React.createClass( {
   },
 
   componentDidMount () {
+    const id = React.findDOMNode(this.refs.triggerbutton).getAttribute("data-reactid");
+    this.setState({triggerId:id});
+
     if(this.props.initialFocus){
       this.setFocus();
     }
@@ -122,7 +126,7 @@ module.exports = React.createClass( {
 
   setFocus () {
     if(this.isMounted()){
-      React.findDOMNode(this.refs.button).focus();
+      React.findDOMNode(this.refs.triggerbutton).focus();
     }
   },
 
@@ -160,6 +164,7 @@ module.exports = React.createClass( {
 
   getPopoverContent() {
     return <List
+            triggerId={this.state.triggerId}
             ref='list'
             options={this.props.options}
             label={this.props.label}
@@ -216,8 +221,8 @@ module.exports = React.createClass( {
       <div className={"slds-form-element slds-theme--"+this.props.theme}>
         <div className={"slds-picklist slds-theme--"+this.props.theme}>
           <button
-            id={this.props.id}
-            ref="button"
+            id={this.state.triggerId}
+            ref="triggerbutton"
             className={'slds-button slds-button--neutral slds-picklist__label '+this.props.className }
             aria-haspopup="true"
             onBlur={this.handleBlur}
@@ -272,4 +277,4 @@ module.exports = React.createClass( {
 });
 
 module.exports.ListItem = ListItem;
-module.exports.ListItemLabel = ListItemLabel;
+module.exports.ListItemLabel = ListItemLabel;

components/SLDSPicklistBase/list.jsx

@@ -166,7 +166,7 @@ module.exports = React.createClass({
           ref="scroll"
           className={"slds-dropdown__list slds-theme--"+this.props.theme}
           role="menu"
-          aria-labelledby={this.props.label}>
+          aria-labelledby={this.props.triggerId}>
           { this.getItems() }
         </ul>
       </div>