Opening by hovering over the trigger for inline-dialog seems to be deprecated, any idea why? And what to use instead?

1

Opening by hovering over the trigger for inline-dialog seems to be deprecated, any idea why? And what to use instead?

https://docs.atlassian.com/aui/9.0.2/docs/inline-dialog.html#opening-by-hovering

2

Hi @DanielAnechitoaie,

The behaviour was deprecated because reveal-on-hover is an inaccessible approach to progressive disclosure of information.

The replacement for the behaviour depends on the use-case you have. Can you tell us what you are using the inline dialog component to achieve?

Cheers,
Daz

3

I’m working on a custom plugin that renders a custom tab panel. On that tab panel there are some items with some info that’s displayed by default with an icon next to them to “view more” and what I’m trying to do is when user goes with his mouse over that icon to trigger the inline dialog with that additional info in it.

4

Okay, so you have an explicit element, and the intent is that when a user interacts with the element, they reveal further information.

This use-case can be handled by the standard “on click” behaviour of inline dialog’s trigger. So long as the icon element is a <button>, anybody that cannot use the mouse will still perceive there is additional detail to be viewed if they click it, and still be able to interact with it (e.g., via the keyboard).

<p class="my-panel">
  <span>Here's something interesting.</span>
  <button data-aui-trigger aria-controls="my-details-panel" class="aui-button aui-button-icon">
    <span class="aui-icon aui-icon-small aui-iconfont-view">View more details</span>
  </button>
</p>

<aui-inline-dialog id="my-details-panel">
  <!-- content here -->
  <p>Here's some more info!</p>
</aui-inline-dialog>

See it in action here: https://codepen.io/chrisdarroch/pen/mdPLVwX

Hope that helps :slight_smile:
Daz