Accessibility: Signal changes to screen readers on navigation

feature
6

@riking this is awesome, thanks for chiming in! :slight_smile:

It sounds like you have a bit more context on the pieces involved here than I do, but on first read it looks to me like the issue you’re bringing up is around focus management and navigation between topics (similar to Accessibility: Need way to browse between messages quickly - #3 by kevinrobinson and then you split that out to here: Accessibility: Focus management in topics - #3 by riking). And so I’ll leave those aside here and talk about those further over there. If I’m mixed up or missing something please chime in!

So for the original issue on this thread, I think we could try @sam’s awesome suggestion to use the onPageChange hook. I can see how it works here, and the only question is where to enable that hook. I think we’d want to have this be enabled by default (with opt-out possible) and not a separate plugin.

If I’m reading through the code correctly, it looks like a new initializer in here would be the right place to add in that call to api.onPageChange. For now we could just have it do something like:

   api.onPageChange((url, title) => {
       Em.run.next(()=>{
           // insert the .screen-reader-only div if it isn't on the page already
           var screenReaderOnlyEl = document.getElementById('screen-reader-only-announcer');
           if (!screenReaderOnlyEl) {
             $('body').append('<div id="screen-reader-only-announcer" aria-live="polite"> </div>');
             screenReaderOnlyEl = document.getElementById('screen-reader-only-announcer');
           }
           $(screenReaderOnlyEl).text('Page changed to: ' + title);
       });
    });

Does this seem like a reasonable first step?