I currently have a website built using Vue.js (2.x) and deployed using Google App Engine.
Upon testing the deployed application in Safari, I found that the accessibility feature "'skip navigation' on :focus" was not "supported" anymore (i.e. pressing tab only toggled browser's search bar, not links in webpage). In short, I wasn't able to use the tab key, spacebar, and Shift to navigate links and page content. However this was not an issue in Chrome.
App URL: https://ixplore-web.appspot.com/?
1. I've went into the Google Developer documentation on enabling accessibility features through gcloud, as well as the App Engine FAQs but they don't mention anything on covering for these accessibility issues. Although the first resource mentions how to configure accessibility for screen-readers, it doesn’t say anything about keyboard navigation.
2. I've checked out the configuration files for deployment to Google App Engine such as cloudbuild.yml and app.yml and there doesn't seem to be anything on accessibility configuration (because why would deployment configuration have this?).
3. I have looked into the .gitignore file and there is nothing that ignores keyboard-based navigation. As a professional courtesy, I never disable/ignore anything related to web accessibility in web apps.
Has anyone comes across why an app deployed to App Engine and opened in Safari (13.1) doesn't "support" keyboard navigation?
It wasn't anything related to .gitignore, or any files. In the Safari browser, tab-based navigation requires both '⌥ Option' + 'Tab' to navigate a webpage - see MDN Docs on keyboard accessibility (https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility).
The difference between the issue experienced in this post and the article is that by default, if you want to tab ALL "tab-able" items in a webpage, you DO NOT need to check the checkbox 'Press tab to highlight each element on webpage' under 'Safari > Preferences > Advanced'