search

microsoft / powerbi-client-react

Power BI for React which provides components and services to enabling developers to easily embed Power BI reports into their applications.
MIT License
308 stars 98 forks source link

broken looking focus border on interaction / navigation #89

Closed kitsunekyo closed 4 months ago

kitsunekyo commented 1 year ago

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: Screenshot 2023-04-03 154552

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 commented 1 year ago

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.