pfe-dropdown: role attribute not set properly in React and Vue #1010

pfe-dropdown: role attribute not set properly in React and Vue

This test fails in React and Vue.
https://github.com/patternfly/patternfly-elements/blob/master/elements/pfe-dropdown/test/pfe-dropdown_test.html#L82

Impacted component(s)

• pfe-dropdown and pfe-dropdown-item

Steps to reproduce

1. Go to https://codesandbox.io/s/pfe-dropdown-issue-1010-qwsqd
2. View the React version and the plain HTML version
3. The role attribute on the first pfe-dropdown-item is not present
4. See that the role attribute on the first pfe-dropdown-item is present in the plain HTML version

Expected behavior

The role of the pfe-dropdown-item should be a menu item if the pfe-item-type is a link.

Screenshots

Developer notes

I suspect it's an issue related to the timing of finding this._item in the slot in the constructor of PfeDropdownItem. This shouldn't be done in the constructor. And since the attributeChangedCallback is firing before the connectedCallback, we can't set this._item in the connectedCallback either. I think we'll need to set this._item in the attributeChangedCallback.

https://github.com/patternfly/patternfly-elements/blob/master/elements/pfe-dropdown/src/pfe-dropdown-item.js#L28