Njk: Improve popover control element

[xak]

Detailed description

The popover__control acts as a wrapper container but it should be the trigger for the popover__body

The popover macro should be able to handle all the ARIA needs — aria-controls, aria-hidden, Aira-expanded — without having to pass any of that to the control. container.

In the current example in the docs the control is implemented twice.

<div class="fd-popover fd-popover--left">
	<div class="fd-popover__control">
		<span class="fd-popover__control  fd-image--m fd-image--circle" aria-label="Image label" aria-controls="SvlVX415" aria-expanded="false" aria-haspopup="true" style="background-image: url('https://placeimg.com/400/400/nature');"></span>
	</div>
	<div class="fd-popover__body fd-popover__body--left"  aria-hidden="true" id="SvlVX415">
		<nav class="fd-menu">
			<ul class="fd-menu__list">
				<li><a href="#" class="fd-menu__item">Option 1</a>
			</li>
				<li><a href="#" class="fd-menu__item">Option 2</a>
			</li>
				<li><a href="#" class="fd-menu__item">Option 3</a>
			</li>
				<li><a href="#" class="fd-menu__item">Option 4</a>
			</li>
		</ul>
		</nav>
	</div>
</div>

Separating the control from the contents inside it will be more flexible so that the contents can be completely divorced from the functionality of the popover.

Recommended ...

<div class="fd-popover">
	<div class="fd-popover__control" aria-controls="SvlVX415" aria-expanded="false" aria-haspopup="true" role="button">
		//anything
	<div class="fd-popover__body" aria-hidden="true" id="SvlVX415">
		//anything
	</div>
</div>