element-web-Github/test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap
Michael Telatynski 99ac9e5029
Ensure tooltip contents is linked via aria to the target element (#10729)
* Ensure tooltip contents is linked via aria to the target element

* Iterate

* Fix tests

* Fix tests

* Update snapshot

* Fix missing aria labels for more tooltips

* Iterate

* Update snapshots
2023-05-05 08:26:11 +00:00

113 lines
2.6 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<TooltipTarget /> displays Bottom aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
id="test id"
role="tooltip"
style="display: block; top: 6px; transform: translate(max(10px, min(calc(0px - 50%), calc(100vw - 100% - 10px))));"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays InnerBottom aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
id="test id"
role="tooltip"
style="display: block; top: -50px; transform: translate(max(10px, min(calc(0px - 50%), calc(100vw - 100% - 10px))));"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Left aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
id="test id"
role="tooltip"
style="display: block; right: 1030px; top: 0px; transform: translateY(-50%);"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Natural aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
id="test id"
role="tooltip"
style="display: block; left: 6px; top: 0px; transform: translateY(-50%);"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Right aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
id="test id"
role="tooltip"
style="display: block; left: 6px; top: 0px; transform: translateY(-50%);"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Top aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
id="test id"
role="tooltip"
style="display: block; top: -6px; transform: translate(max(10px, min(calc(0px - 50%), calc(100vw - 100% - 10px))), -100%);"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays TopRight aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
id="test id"
role="tooltip"
style="display: block; top: -6px; right: 1024px; transform: translateY(-100%);"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> renders container 1`] = `
<div
aria-describedby="test id"
class="test tooltipTargetClassName"
data-testid="test"
tabindex="0"
>
<span>
child
</span>
</div>
`;