Feature/popover container firefox polyfill

[JesmoDev]

Description

This PR introduces a polyfill for the popover container, enhancing its functionality to ensure proper compatibility with Firefox browsers. The polyfill has been integrated in a minimally intrusive manner, preserving the original structure of the popover container element. Removing just one line of code from the popover container element will effectively disable the polyfill.

This polyfill supports:

• open / close
• positioning
• light dismiss

Also edits findAncestorByAttributeValue in uui-base, so that it also checks shadow root hosts

Known bugs:

• light dismiss does not trigger if clicking on another popover-container or a popover container trigger.
• light dismiss does not trigger if focus goes outside the dom (when focusing nothing)

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Motivation and context

Currently, due to the lack of support for the new popover API in Firefox, we are unable to utilize the popover container. With this polyfill, the popover container can now offer a user experience in Firefox that is nearly on par with that of supported browsers.

• If my change requires a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[bjarnef]

Not sure if it worth trying this project:
https://github.com/oddbird/popover-polyfill

Based on the demos it seems to work in Firefox:
https://popover-polyfill.netlify.app/

but it has some Caveats like native :popver-open pseudo class vs :popver-open CSS class, so styling would probably need something like this:

:popver-open,
.:popver-open {
    // styling here
}

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[JesmoDev]

@bjarnef I've looked at the oddbird polyfill, and I can't get it to work properly in bigger applications, such as New Backoffice, due to z-index issues.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[iOvergaard]

We agreed on the following:

• Clean up the popover container story (remove test)
• Change experimental warning to say that it now will work in all browsers due to a polyfill (but it is still experimental)
• Make it 1-1 with the old popover stories
• Add deprecation warnings to the old Popover element

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-628.westeurope.azurestaticapps.net