search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.51k stars 263 forks source link

ui5-link: Problem with tabindex="-1" when using with Svelte (or similar) #5843

Open winterkind opened 2 years ago

winterkind commented 2 years ago

Bug Description

When adding text to the default slot of ui5-link after ui5-link is added to the DOM, tabindex is set to -1. Adding the slot content after adding the ui5-link element happens e.g. in Svelte if the content for the slot is reactive (see example below). It may also happen in other frameworks or in custom JS code.

As far as I could figure out, this happens because upon rendering, ui5-link runs through the getter for tabIndex. That checks for Node.textContent, finds nothing there and therefore sets tabIndex to -1. When textContent changes, the value for tabIndex is not re-calculated.

Expected Behavior

E.g. ui5-link updating when its text content changes, OR ui5-link supporting setting the tabindex to it explicitly.

Steps to Reproduce

  1. Go to this example in the Svelte REPL. (Wait a few seconds until the dependencies are bundled into the example.)
  2. Press the button "Show Links" in the sample results on the right side.
  3. Inspect the shadow DOM of the rendered links. Make sure not to right-click on the links themselves because that will influence their tabindex value.
  4. Note that only the second link has a tabindex of 0, which is the intended value.

Context

Priority

niyap commented 2 years ago

Hello @SAP/ui5-webcomponents-topic-b,

Please read the description of the issue and check whether it is valid to add content to the link's slot in that way. If it is valid, please analyse the issue, that could be easily reproduced in the sample provided.

Thank you in advance!

Kind Regards, Niya