Docs: address multi-device accessibility/layout warnings (contrast, logo sizing, video loading) by Copilot · Pull Request #27583 · github/gh-aw

Copilot · 2026-04-21T13:45:45Z

The multi-device docs report flagged non-critical gaps in accessibility and rendering stability: missing high-contrast handling, logo image dimensions that could allow minor CLS, and no lazy-loading hint on video media. This PR applies targeted docs component/CSS updates to close those gaps without changing site structure.

Accessibility: high-contrast support
- Added prefers-contrast: more rules to strengthen visible focus and link affordances.
- Added forced-colors: active handling for key header/video surfaces so content remains readable in OS-enforced high-contrast modes.
Layout stability: explicit logo dimensions
- Added width/height attributes to the header logo <img> in CustomLogo.astro (24x24) to eliminate intrinsic-size ambiguity before CSS settles.
Media loading behavior: video lazy hint
- Updated Video.astro to set a loading hint on <video>:
  - default: lazy
  - autoplay case: eager

const loadingStrategy = autoStart ? 'eager' : 'lazy'

<video
  poster={posterPath}
  preload="metadata"
  loading={loadingStrategy}
  ...
/>

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

accounts.google.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=33935 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.k4KQ6v --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,12024871874913166748,16785902224517543213,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,9678571390329854757,1065102934785417012,4 --trace-process-track-uuid=3190708989122997041 GOMODCACHE go (dns block)
- Triggering command: /usr/bin/chromium-browser chromium-browser --headless --disable-gpu --no-sandbox --window-size=1440,2000 --screenshot=/tmp/gh-aw-docs-home.png REDACTED 64/bin/go GOINSECURE GOMOD GOMODCACHE go env s public/js/ && --theme GO111MODULE 64/bin/go ofileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,AutoDeElevate,Automat GOMOD GOMODCACHE go (dns block)
clients2.google.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=33935 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.k4KQ6v --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,12024871874913166748,16785902224517543213,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,9678571390329854757,1065102934785417012,4 --trace-process-track-uuid=3190708989122997041 GOMODCACHE go (dns block)
- Triggering command: /usr/bin/chromium-browser chromium-browser --headless --disable-gpu --no-sandbox --window-size=1440,2000 --screenshot=/tmp/gh-aw-docs-home.png REDACTED 64/bin/go GOINSECURE GOMOD GOMODCACHE go env s public/js/ && --theme GO111MODULE 64/bin/go ofileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,AutoDeElevate,Automat GOMOD GOMODCACHE go (dns block)
redirector.gvt1.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=33935 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.k4KQ6v --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,12024871874913166748,16785902224517543213,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,9678571390329854757,1065102934785417012,4 --trace-process-track-uuid=3190708989122997041 GOMODCACHE go (dns block)
- Triggering command: /usr/bin/chromium-browser chromium-browser --headless --disable-gpu --no-sandbox --window-size=1440,2000 --screenshot=/tmp/gh-aw-docs-home.png REDACTED 64/bin/go GOINSECURE GOMOD GOMODCACHE go env s public/js/ && --theme GO111MODULE 64/bin/go ofileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,AutoDeElevate,Automat GOMOD GOMODCACHE go (dns block)
telemetry.astro.build
- Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node node /home/REDACTED/work/gh-aw/gh-aw/docs/node_modules/.bin/astro build ides/*.pdf publ env -o public/slides/index.html GO111MODULE 64/bin/go GOINSECURE GOMOD GOMODCACHE go env -json GO111MODULE 64/bin/go GOINSECURE GOMOD GOMODCACHE go (dns block)
www.google.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=33935 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.k4KQ6v --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,12024871874913166748,16785902224517543213,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,9678571390329854757,1065102934785417012,4 --trace-process-track-uuid=3190708989122997041 GOMODCACHE go (dns block)
- Triggering command: /usr/bin/chromium-browser chromium-browser --headless --disable-gpu --no-sandbox --window-size=1440,2000 --screenshot=/tmp/gh-aw-docs-home.png REDACTED 64/bin/go GOINSECURE GOMOD GOMODCACHE go env s public/js/ && --theme GO111MODULE 64/bin/go ofileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,AutoDeElevate,Automat GOMOD GOMODCACHE go (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Agent-Logs-Url: https://github.com/github/gh-aw/sessions/b1ccc016-4737-42a9-b710-1d08153a2159 Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Copilot

Pull request overview

Targets docs site audit warnings around accessibility (high contrast/forced colors), layout stability (logo CLS), and media loading behavior for embedded videos.

Changes:

Added prefers-contrast: more and forced-colors: active CSS rules to improve focus/affordance visibility and readability.
Added explicit width/height attributes to the header logo image to stabilize intrinsic sizing.
Added a conditional “loading strategy” attribute to the video component.

Show a summary per file

File	Description
`docs/src/styles/custom.css`	Adds high-contrast and forced-colors styling for header/video surfaces and focus/link affordances.
`docs/src/components/Video.astro`	Introduces a conditional loading strategy attribute for `<video>`.
`docs/src/components/CustomLogo.astro`	Adds explicit intrinsic logo dimensions (24×24) to reduce layout shift.

Copilot's findings

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Files reviewed: 3/3 changed files
Comments generated: 3

Copilot · 2026-04-21T15:04:40Z

+    background: Canvas;
+    color: CanvasText;
+  }
+


In forced-colors mode you set color: CanvasText on .site-title, but .site-title span has an explicit color rule elsewhere with higher specificity (and a separate light-theme override). That can override the forced-colors intent and produce low-contrast text. Consider explicitly setting .site-title span { color: CanvasText; } within this @media (forced-colors: active) block.

Suggested change

.site-title span {

color: CanvasText;

}

Copilot · 2026-04-21T15:04:40Z

+
+  .header-link:hover,
+  .site-title:hover {
+    forced-color-adjust: auto;
+  }


forced-color-adjust: auto is the default behavior, so this hover rule is effectively a no-op. If you intended to override UA color adjustments, set the desired value (commonly none) on the base state; otherwise, removing this rule will reduce confusion.

Suggested change

.header-link:hover,

.site-title:hover {

forced-color-adjust: auto;

}

Copilot · 2026-04-21T15:04:40Z

            muted={silenced}
            poster={posterPath}
            preload="metadata"
+            loading={loadingStrategy}


loading is not a valid/recognized attribute for the HTML <video> element (it’s supported on <img>/<iframe>), so this won’t actually change video loading behavior and may still leave the audit warning unresolved. If the goal is to avoid network activity until needed, consider using a real video mechanism (e.g., preload="none" when autoStart is false, or deferring setting <source src> until the video is in/near the viewport via IntersectionObserver).

Initial plan

7a5bfe9

Copilot AI assigned Copilot and pelikhan Apr 21, 2026

Copilot started work on behalf of pelikhan April 21, 2026 14:03 View session

Copilot AI linked an issue Apr 21, 2026 that may be closed by this pull request

🔍 Multi-Device Docs Testing Report - 2026-04-21 #27569

Closed

fix(docs): improve contrast support and media loading hints

4958e43

Agent-Logs-Url: https://github.com/github/gh-aw/sessions/b1ccc016-4737-42a9-b710-1d08153a2159 Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Update multi-device docs testing report for 2026-04-21~~ Docs: address multi-device accessibility/layout warnings (contrast, logo sizing, video loading) Apr 21, 2026

Copilot AI requested a review from pelikhan April 21, 2026 14:24

Copilot finished work on behalf of pelikhan April 21, 2026 14:24

pelikhan marked this pull request as ready for review April 21, 2026 14:59

Copilot AI review requested due to automatic review settings April 21, 2026 14:59

pelikhan merged commit ed5145d into main Apr 21, 2026
3 checks passed

pelikhan deleted the copilot/update-multi-device-docs-testing-report branch April 21, 2026 15:00

Copilot started reviewing on behalf of pelikhan April 21, 2026 15:00 View session

github-actions Bot mentioned this pull request Apr 21, 2026

[aw] No-Op Runs #27396

Closed

Copilot AI reviewed Apr 21, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs: address multi-device accessibility/layout warnings (contrast, logo sizing, video loading)#27583

Docs: address multi-device accessibility/layout warnings (contrast, logo sizing, video loading)#27583
pelikhan merged 2 commits intomainfrom
copilot/update-multi-device-docs-testing-report

Copilot AI commented Apr 21, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 21, 2026

Uh oh!

Copilot AI Apr 21, 2026

Uh oh!

Copilot AI Apr 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Copilot AI commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Apr 21, 2026 •

edited

Loading