Angular-cli: Mac Voiceover will not start after ng serve has been run

[ecerta]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _| | | | |/ _ | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ __| |_|__, |__,_|_|__,_|_| ____|_____|___|
|___/
@angular/cli: 1.0.0
node: 7.9.0
os: darwin x64
@angular/animations: 4.0.2
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/core: 4.0.2
@angular/flex-layout: 2.0.0-beta.7
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/platform-server: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.2

Repro steps.

Pre-req's: Own a Macbook

1. Run ng serve with any angular 2 app.
2. Try to start Voiceover, Mac's screenreader (built-in hotkey is Cmd+f5) either while it's running or after it's finished running.

Expected: Voiceover starts, reads screen.
Result: Voiceover's black box appears and disappears a few times, and then dies.

The log given by the failure.

N/A, although here's the output from running ng serve, if that helps.

** NG Live Development Server is running on http://localhost:4200 ** Hash: daab498fd5db009b8bfb Time: 29612ms chunk {0} 0.chunk.js, 0.chunk.js.map 41.6 kB {1} {2} {5} [rendered] chunk {1} 1.chunk.js, 1.chunk.js.map 27.9 kB {0} {2} {5} [rendered] chunk {2} 2.chunk.js, 2.chunk.js.map 8.44 kB {0} {1} {5} [rendered] chunk {3} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 458 kB {8} [initial] [rendered] chunk {4} styles.bundle.js, styles.bundle.js.map (styles) 376 kB {8} [initial] [rendered] chunk {5} main.bundle.js, main.bundle.js.map (main) 67.7 kB {7} [initial] [rendered] chunk {6} scripts.bundle.js, scripts.bundle.js.map (scripts) 243 kB {8} [initial] [rendered] chunk {7} vendor.bundle.js, vendor.bundle.js.map (vendor) 6.48 MB [initial] [rendered] chunk {8} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] webpack: Compiled successfully.

Desired functionality.

Voiceover can be started while ng serve is running or after it's been run.

Mention any other details that might be useful.

Voiceover will continue to function if it is started before ng serve is run; it just won't start while ng serve is running or after it's been run. Also, it is possible to use browser-based screenreaders (like ChromeVox), and I haven't tested with JAWS, but working with Voiceover would be helpful.

I'm aware this is probably a low-priority bug since it has an easy work-around, but for those of us working primarily on accessibility-related issues and for blind developers, this'd be a nice thing to fix.

[sjclemmy]

+1
I'm also getting this behaviour. Just to add - running ng serve in iTerm or terminal makes no difference.

[filipesilva]

I don't have OSX so I don't really understand what was supposed to happen but... Was it supposed to read the console or the screen?

Because if it's supposed to read the console, then the progress reporting (the lines that shift really fast saying which phase of the build it's at) might be messing with screenreaders. Try running with --no-progress and see if that fixes it.

[ecerta]

Voiceover reads whatever is happening in what you've focused on. If your console has focus, it'll read what's going on in the console. If it's your browser, it reads that.

I don't think it's an issue of progress reporting finished its updating and no changes have been made to the browser or the code, Voiceover still won't start. It also doesn't matter if you've minimized your console, or put it in a separate workspace on your Mac - it still won't strt. Something about ng serve simply being up interferes with Mac Voiceover starting itself.

[filipesilva]

Got it. Very weird, I don't know why that is. @sumitarora, can you have a look to see if somethings makes sense to you?

I'll also tag for community help, maybe someone knows.

[adamaso-zz]

Having the same error. Currently using browser-level screen reader (ChromeVox) in the meantime but would appreciate a fix for OSX voiceover.

[robdodson]

Just found a crash report as I was trying to debug this. Key line:

*** Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[<__NSDictionaryI 0x7ff0b9004200> valueForUndefinedKey:]: this class is not key value coding-compliant for the key angular/cli.'

[svinkle]

Same experience here while developing Angular 2.x and/or 4.x apps. Also running Hyper term if that matters. I've just been shutting the server down to test with VO. 😕

[filipesilva]

@robdodson so it seems it's a problem with the process name or something?

[robdodson]

@filipesilva yeah I thought the same. Although I'm not familiar enough with mac errors to know what's up there :) @cookiecrook may know more.

[ecerta]

@cookiecrook did you get to take a look? It'd be great if this was just a matter of changing a process name.

[cookiecrook]

@ecerta I do not know if there is another bug in angular-cli, but we have applied a workaround that can be verified in the developer beta of 10.13.

[cookiecrook]

https://beta.apple.com/sp/betaprogram/

[filipesilva]

@Brocco can you have a look on OSX please?

[ecerta]

@Brocco has this been tested?

[ecerta]

Any update here? @Brocco ? @filipesilva ?

[jelbourn]

Chiming in that I experience this consistently as well. It makes my a11y testing more difficult.

[hansl]

Removing this line from our code:

process.title = '@angular/cli';

fixes this issue... Most peculiar indeed. This is the recommended way of changing the process name in node (for monitors like ps, top, ...). Urgh. Still looking, I haven't found another issue with that particular in there. Ember CLI, for example, would have something similar when serving.

Go figure.

[jelbourn]

Is it the @?

[hansl]

Alright after investigation, it's the @ that causes problems. Will be fixed in 1.5.

[hansl]

@jelbourn seems like it...

[ecerta]

Thank you all so much! This is going to make accessibility-related work so much easier.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}