christian/bible-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browser tab: no focus highlight on the page

Browse Source 
Every key on the app's keyboard takes focus from the page for a moment and
gives it back, so the site's focus ring (a 2px blue outline on the search
box, and a brighter border) flashed with each letter. Outline rings are
turned off with the page's clean-up CSS, and the guest preload strips
outline, border and box-shadow from the site's own :focus / :focus-within /
:focus-visible rules, keeping anything else those rules do.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
christian
2026-10-22 09:28:59 -04:00
co-authored by Claude Opus 5.5
parent 0f9c468b1e
commit e1f541d366
3 changed files with 76 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
BROWSER_TAB.md
+4 -2
View File
@@ -1,6 +1,6 @@
# Browser tab
One web page, full screen in the tab: no address bar, bookmarks or scrollbars — just the page, in the
One web page, full screen in the tab: no address bar, bookmarks, scrollbars or focus highlights — just the page, in the
same area the Graphics tab uses. It loads when the app starts and keeps running while other tabs are
showing, so it is ready the moment it is opened. Built for It Is Written
(`https://it-is-written-waters-church.vercel.app/`), but any web page works.
@@ -65,7 +65,9 @@ the search and could put different results on the program feed.
- **`browser-guest-preload.cjs`** runs inside the page (invisible to the site) and reports what the app
cannot see from outside: a tapped text field, a tapped reference (found with the app's own
`scripture-scan.js` — the same rules ProPresenter Sync uses), scroll, activity, five fingers, and — only
while a follower is linked — a script-free copy of the page's DOM.
while a follower is linked — a script-free copy of the page's DOM. It also takes the look (outline,
border, glow) out of the site's focus styles: every key on the app's keyboard takes focus from the page
for a moment, so a focus highlight would flash with each letter typed.
- **`browser-tab.js`** owns the tab: the pages, the keyboard (via `createPrayerKeyboard` with a "sink"),
scripture taps, scrolling for the phone / OSC / admin, and the follower's copy. On the follower it
shows that copy in sandboxed frames (no scripts); in a plain browser (admin offstage copy, `npm start`)