broken looking focus border on interaction / navigation

[kitsunekyo]

when embedding a powerbi report via the package we see a weird black outline on load and whenever we navigate within the powerbi report. this looks different to the regular focus outline that is active when tabbing through the powerbi content.

the source for this issue seems to be this css rule:

/* https://content.powerapps.com/resource/powerbiwfe/styles/reportembed.bundle.min.SOMEID.css */
html[data-focus-source=key] .embedWrapper .canvasFlexBox .displayAreaContainer .displayArea .visualContainerHost:focus {
    outline: var(--focus-two-tone-outline-definition,auto 1px)!important;
    outline-color: var(--focus-two-tone-outline-color,-webkit-focus-ring-color)!important
}

example screenshot of the issue:

is this an issue with the react package or the general powerbi-client? how can i disable this (if in the gui possible), or may I send a PR that removes these lines as they look atrocious and serve no real accessibility purpose

[v-MadhavC]

The black outline you're experiencing while tabbing through the Power BI content is actually the default behavior of the application. This behavior is consistent on both Power BI Desktop and the Power BI Service.

Feel free to reach out for any other queries.