Android: on mac in dark mode, device setup dialog title bar has weird blank space if not focused

[dbjorge]

Describe the bug

On a Mac, when the device setup dialog isn't the currently focused window, its title bar has a weird looking blank space when the window isn't focused. I'm not sure what the "normal" mac behavior is here (is the window title text supposed to be centered?), but it probably isn't what we see in this screenshot:

To Reproduce Steps to reproduce the behavior:

1. Open Accessibility Insights for Android on a mac
2. Click to some other window
3. Observe title bar

Expected behavior

Styling should looks similar to other apps on the platform

Context (please complete the following information)

• OS Name & Version: Mac 10.15.6 (I think? I took screenshot from Dave's demo presentation today)
• AI-Android Version & Environment: Accessibility Insights for Android v2020.702.3

Are you willing to submit a PR?

yes

Did you search for similar existing issues?

yes

[DaveTryon]

For reference, here's what happens with a system app (the image viewer):

1. The title is always centered
2. Everything is greyed out (but still visible) when the focus is lost

Image with focus:

Image without focus:

[msft-github-bot]

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

[ferBonnin]

Per conversation with Peter, Centering the title would be ideal for Mac but Windows tends to have the title to the left. Could we do centering for Mac and keep Windows as-is?

[dbjorge]

@ferBonnin Yes, this is technically feasible (iirc, the title bar already has custom behavior/styling between the 2 platforms)

[DaveTryon]

@ferBonnin, what do you want to do about the disappearing icons that originally prompted this issue? Can this issue really be "Ready for Work" without that answer?

[ferBonnin]

@DaveTryon can you clarify?

[DaveTryon]

@ferBonnin: When @dbjorge opened this issue, the primary concern was about the blank space in the top left corner--that blank space is where the close/minimize/fullscreen buttons live. These buttons disappear when we lose the focus. The secondary concern was that the text wasn't centered, like most Mac apps.

The question of "should we center text on Mac" seems to be answered (yes we should). The question of "what about the close/minimize/fullscreen buttons" is not answered. We should be able to simulate what a typical Mac app does here (i.e., grey out the controls) without too much difficulty.

[msft-github-bot]

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

[ferBonnin]

Per conversation with Peter and after reading Dave's comment, yes, lets also simulate what Mac apps do if feasible.

[DaveTryon]

@ferBonnin, I've dug into this, and while centering the text should be fairly simple, the disappearing icons appear to be a bug in Electron. I've created a simplified repro and opened https://github.com/electron/electron/issues/27295 to report it. Here are some options that might be available:

1. If the Electron folks come back with an easy fix for the disappearing icons, we ought to be able to incorporate that into the unified client.
2. If this really is a bug in Electron, we can wait for an updated release with the change. That said, we're on Electron 10.X, and the bug exists in Electron 11.X, so it could be a long wait.
3. If we wanted to, we could render the icons (aka the "traffic light" ourselves (it's currently rendered by the OS). Electron supports this option, but it could be fairly tricky--the traffic lights appear differently on older versions of macOS, and we'd need to duplicate the behaviors that we currently get for free.
4. We could forgo the custom title bar on macOS and go with a default title bar. It would look something like this (the caption in the sample is wrong, but that should be an easy fix):

State	Image
Focused
No focus or hover
Hover without focus

[ghost]

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

[ferBonnin]

Per conversation with Peter, marking this as blocked until the bug in Electron is addressed. If we get user feedback on this issue, lets revisit option 4

[DaveTryon]

The electron team pointed out that the icons only disappear if the macOS is in dark mode, so our approach here is probably to decide how to respond to system themes on macOS. There may be a similar question about dark mode on Windows. This may bump down the priority.

[ghost]

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

[DaveTryon]

@ferBonnin, am I correct in thinking that we're going with option 4 (use the default title bar on Mac) ?

[ferBonnin]

@ferBonnin, am I correct in thinking that we're going with option 4 (use the default title bar on Mac) ?

yes, please @DaveTryon

[ghost]

This issue requires additional investigation by the Accessibility Insights team. When the issue is ready to be triaged again, we will update the issue with the investigation result and add "status: ready for triage". Thank you for contributing to Accessibility Insights!

[DaveTryon]

@ferBonnin, option 4 (just use the default mac title bar) gave us the correct visuals (see #3891), but it had an unfortunate side effect. VoiceOver (the macOS AT) reads the title, which includes more information--it says something like "AccessibilityInsights for Android Canary - Automated Checks", which reflects the value that we set as the title. We basically have 1 string for the AT and one string for visual display. When the system draws the title bar, we only have 1 string instead of 2. Electron includes an accessibleTitle property that could theoretically help us out, but https://github.com/electron/electron/issues/25981 tracks an Electron bug that this property doesn't work as expected on Mac.

At the moment, it seems like our options are:

1. Live with it, since it only occurs in dark mode and doesn't seem to be causing a great deal of noise
2. Add support for dark mode (since the buttons exist but are drawn in such a light color that they disappear)
3. Once the Electron bug is fixed, try to use the accessibleTitle property

[ferBonnin]

Per conversation with Peter, marking it as blocked to wait for the Electron bug to be addressed

[DaveTryon]

We won't be fixing this