Repository navigation
Expand file tree
/
Copy path15-code-review.html
More file actions
3110 lines (2933 loc) · 203 KB
/
Copy path15-code-review.html
File metadata and controls
3110 lines (2933 loc) · 203 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="GIT Going with GitHub - A two-day accessible open source workshop by Community Access">
<title>Code Review: PRs, Diffs, and Constructive Feedback - GIT Going with GitHub</title>
<link rel="stylesheet" href="../styles/github-markdown.css">
<link rel="stylesheet" href="../styles/highlight.css">
<link rel="stylesheet" href="../styles/custom.css">
<style>
.markdown-body {
box-sizing: border-box;
min-width: 0;
max-width: 980px;
margin: 0;
padding: 45px;
}
.page-layout {
max-width: 1320px;
margin: 0 auto;
padding: 1rem 1rem 2rem;
display: grid;
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
gap: 1.25rem;
align-items: start;
}
@media (max-width: 767px) {
.page-layout {
grid-template-columns: 1fr;
padding: 0.5rem 0.5rem 1rem;
}
.markdown-body {
padding: 15px;
}
}
</style>
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<header class="site-header" role="banner">
<div class="site-header-inner">
<nav aria-label="Breadcrumb" class="breadcrumb">
<a href="../index.html">Home</a> <span aria-hidden="true">›</span> <span aria-current="page">Code Review: PRs, Diffs, and Constructive Feedback</span>
</nav>
<div class="header-actions">
<a href="https://github.com/Community-Access/git-going-with-github/wiki" class="wiki-link" target="_blank" rel="noopener noreferrer">
<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.06l-2.573 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.457 1.457 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 1 1 1.06-1.06l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h.25a.25.25 0 0 0 .25-.25v-5.5Z"/>
</svg>
Wiki
</a>
<form role="search" class="search-form" action="../search.html" method="get">
<label for="site-search" class="search-label">Search docs</label>
<input
type="search"
id="site-search"
class="search-input"
name="q"
placeholder="Search docs…"
autocomplete="off"
aria-label="Search documentation"
>
<button type="submit" class="search-button" aria-label="Submit search">
<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"/>
</svg>
</button>
</form>
</div>
</div>
</header>
<div class="page-layout">
<aside class="guided-sidebar" aria-label="Guided reference">
<h2 class="guided-title">Guided Reference</h2>
<p class="guided-intro">Follow the learning order, then jump into challenge issue views, appendices, and support resources.</p>
<section class="guided-progress" aria-label="Learning progress">
<h3>Learning Progress</h3>
<p class="guided-progress-copy">19 of 55 pages in the guided sequence</p>
<div class="guided-progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="35" aria-label="Guided sequence progress">
<span class="guided-progress-fill" style="width:35%;"></span>
</div>
<p class="guided-progress-percent">35% complete</p>
</section>
<section class="guided-resume" aria-label="Resume learning">
<a id="resume-link" class="guided-resume-link" href="../index.html" hidden>Resume where you left off</a>
</section>
<nav class="guided-nav" aria-label="Workshop navigation">
<section class="guided-section">
<h3>Start Here</h3>
<ul>
<li><a href="../index.html">Workshop Home</a></li>
<li><a href="../docs/course-guide.html">Course Guide</a></li>
<li><a href="../docs/get-going.html">Get Going with GitHub</a></li>
<li><a href="../docs/CHALLENGES.html">Challenge Hub</a></li>
</ul>
</section>
<section class="guided-section">
<h3>Learning Order</h3>
<details open>
<summary>Day 1 chapters</summary>
<ul>
<li><a href="../docs/00-pre-workshop-setup.html">Pre-Workshop Setup - GIT Going with GitHub</a></li>
<li><a href="../docs/01-choose-your-tools.html">Choose Your Adventure: A Tool Tour</a></li>
<li><a href="../docs/02-understanding-github.html">Understanding GitHub's Web Structure</a></li>
<li><a href="../docs/03-navigating-repositories.html">Navigating Repositories</a></li>
<li><a href="../docs/04-the-learning-room.html">The Learning Room: Your Personal Practice Repository</a></li>
<li><a href="../docs/05-working-with-issues.html">Working with Issues</a></li>
<li><a href="../docs/06-working-with-pull-requests.html">Working with Pull Requests</a></li>
<li><a href="../docs/07-merge-conflicts.html">Merge Conflicts</a></li>
<li><a href="../docs/08-open-source-culture.html">Culture, Etiquette, and Community Standards</a></li>
<li><a href="../docs/09-labels-milestones-projects.html">Labels, Milestones, and Projects</a></li>
<li><a href="../docs/10-notifications-and-day-1-close.html">Notifications</a></li>
</ul>
</details>
<details open>
<summary>Day 2 chapters</summary>
<ul>
<li><a href="../docs/11-vscode-interface.html">VS Code: Interface and Setup</a></li>
<li><a href="../docs/12-vscode-accessibility.html">VS Code: Accessibility Deep Dive</a></li>
<li><a href="../docs/13-how-git-works.html">How Git Works: The Mental Model</a></li>
<li><a href="../docs/14-git-in-practice.html">Git & Source Control in VS Code</a></li>
<li><a href="../docs/15-code-review.html" aria-current="page" class="guided-active">Code Review: PRs, Diffs, and Constructive Feedback</a></li>
<li><a href="../docs/16-github-copilot.html">GitHub Copilot</a></li>
<li><a href="../docs/17-issue-templates.html">Issue Templates</a></li>
<li><a href="../docs/18-fork-and-contribute.html">Fork and Contribute: The Open Source Workflow</a></li>
<li><a href="../docs/19-accessibility-agents.html">Accessibility Agents</a></li>
<li><a href="../docs/20-build-your-agent.html">Capstone Project: Contribute an Impactful Agent</a></li>
<li><a href="../docs/21-github-accessibility-and-open-source.html">GitHub Accessibility and Open Source at Scale</a></li>
<li><a href="../docs/22-what-comes-next.html">What Comes Next: Your Developer Journey</a></li>
</ul>
</details>
</section>
<section class="guided-section">
<h3>Appendices</h3>
<details>
<summary>Reference library</summary>
<ul>
<li><a href="../docs/appendix-a-glossary.html">Appendix A: GitHub Concepts & Glossary</a></li>
<li><a href="../docs/appendix-b-screen-reader-cheatsheet.html">Appendix B: Screen Reader Cheat Sheet</a></li>
<li><a href="../docs/appendix-c-markdown-reference.html">Appendix C: Markdown and GitHub Flavored Markdown - Complete Guide</a></li>
<li><a href="../docs/appendix-d-git-authentication.html">Appendix D: Git Authentication</a></li>
<li><a href="../docs/appendix-e-advanced-git.html">Appendix E: Advanced Git Operations</a></li>
<li><a href="../docs/appendix-f-git-security.html">Appendix F: Git Security for Contributors</a></li>
<li><a href="../docs/appendix-g-vscode-reference.html">Appendix G: VS Code Accessibility Reference</a></li>
<li><a href="../docs/appendix-h-github-desktop.html">Appendix H: GitHub Desktop</a></li>
<li><a href="../docs/appendix-i-github-cli.html">Appendix I: GitHub CLI Reference</a></li>
<li><a href="../docs/appendix-j-cloud-editors.html">Appendix J: GitHub Codespaces</a></li>
<li><a href="../docs/appendix-k-copilot-reference.html">Appendix K: Copilot Reference</a></li>
<li><a href="../docs/appendix-l-agents-reference.html">Appendix L: Accessibility Agents Reference</a></li>
<li><a href="../docs/appendix-m-accessibility-standards.html">Appendix M: Accessibility Standards Reference</a></li>
<li><a href="../docs/appendix-n-advanced-search.html">Appendix N: GitHub Advanced Search</a></li>
<li><a href="../docs/appendix-o-branch-protection.html">Appendix O: Branch Protection Rules and Repository Rulesets</a></li>
<li><a href="../docs/appendix-p-security-features.html">Appendix P: GitHub Security Features</a></li>
<li><a href="../docs/appendix-q-actions-workflows.html">Appendix Q: GitHub Actions and Workflows</a></li>
<li><a href="../docs/appendix-r-projects-deep-dive.html">Appendix R: GitHub Projects Deep Dive</a></li>
<li><a href="../docs/appendix-s-releases-tags-insights.html">Appendix S: Releases, Tags, and Repository Insights</a></li>
<li><a href="../docs/appendix-t-community-and-social.html">Appendix T: Community and Social</a></li>
<li><a href="../docs/appendix-u-discussions-and-gists.html">Appendix U: Discussions and Gists</a></li>
<li><a href="../docs/appendix-v-github-mobile.html">Appendix V: GitHub Mobile</a></li>
<li><a href="../docs/appendix-w-github-pages.html">Appendix W: Publishing with GitHub Pages</a></li>
<li><a href="../docs/appendix-x-resources.html">Appendix X: Resources</a></li>
<li><a href="../docs/appendix-y-workshop-materials.html">Appendix Y: Accessing and Downloading Workshop Materials</a></li>
<li><a href="../docs/appendix-z-github-skills.html">Appendix Z: GitHub Skills - Complete Course Catalog</a></li>
<li><a href="../docs/appendix-aa-agent-installation-setup.html">Appendix AA: Agent Installation & Setup Across All Platforms</a></li>
<li><a href="../docs/appendix-ab-advanced-agent-patterns.html">Appendix AB: Advanced Agent Patterns & Skills</a></li>
<li><a href="../docs/appendix-ac-document-developer-tools.html">Appendix AC: Document & Developer Tool Agents</a></li>
</ul>
</details>
</section>
<section class="guided-section">
<h3>Challenge Lab</h3>
<ul>
<li><a href="../docs/CHALLENGES.html">Challenge Hub</a></li>
<li><a href="../work.html">Issue-Style Challenge Walkthrough</a></li>
<li><a href="../docs/17-issue-templates.html">Issue Template Deep Dive</a></li>
</ul>
</section>
<section class="guided-section">
<h3>External Resources</h3>
<ul>
<li><a href="https://lp.csedesigns.com/ggg/PODCASTS.html">Podcast Episodes <span class="guided-external">(external)</span></a></li>
<li><a href="https://lp.csedesigns.com/ggg/feed.xml">RSS Feed <span class="guided-external">(external)</span></a></li>
</ul>
</section>
<section class="guided-section">
<h3>Get Help</h3>
<ul>
<li><a href="https://github.com/Community-Access/support">Support Hub <span class="guided-external">(external)</span></a></li>
</ul>
</section>
</nav>
</aside>
<main id="main-content" class="markdown-body page-main">
<nav class="quick-jumps" aria-label="Quick jumps">
<h2 class="quick-jumps-title">Quick Jumps</h2>
<ul class="quick-jumps-list">
<li><a href="#course-content">Jump to course content</a></li><li><a href="#main-content">Jump to main content top</a></li><li><a href="#on-this-page">Jump to on-page sections</a></li><li><a href="#companion-media">Jump to companion audio</a></li><li><a href="../docs/CHALLENGES.html">Open challenge hub</a></li><li><a href="../work.html">Open issue-style challenge walkthrough</a></li>
</ul>
</nav>
<section id="companion-media" class="companion-media" aria-label="Companion podcast content">
<h2 class="companion-title">Companion Podcast and Transcript</h2>
<p class="companion-intro">Use audio and transcript companions to review concepts in a conversational format.</p>
<article class="companion-card">
<h3>The GitHub Pull Requests Extension</h3>
<p class="companion-note">Companion audio: this episode reinforces key ideas and may not be a word-for-word reading of this page.</p>
<audio controls preload="none" class="companion-player" src="https://lp.csedesigns.com/ggg/media/ch-13-github-prs-extension.mp3">
Your browser does not support the audio element.
</audio>
<p class="companion-links">
<a href="https://lp.csedesigns.com/ggg/media/ch-13-github-prs-extension.mp3" target="_blank" rel="noopener noreferrer">Open audio file (external)</a>
<span aria-hidden="true"> · </span>
<a href="https://github.com/Community-Access/git-going-with-github/blob/main/podcasts/scripts/chapters/ch-13-github-prs-extension.txt" target="_blank" rel="noopener noreferrer">Full transcript source (external)</a>
</p>
<details class="companion-preview"><summary>Transcript preview</summary><p><strong>Alex:</strong> Welcome back. Today we're staying in VS Code and bringing pull requests into the editor with the GitHub Pull Requests and Issues extension.</p><p><strong>Jamie:</strong> This is the one that lets you look at PRs, read diffs, comment, and even merge without constantly jumping back to the browser, right?</p><p><strong>Alex:</strong> Exactly. A pull request, or PR, is the conversation around a proposed change. The extension gives that conversation a home inside VS Code, right beside your files, source control, and terminal.</p><p><strong>Jamie:</strong> That sounds especially useful on Day 2, because learners are no longer only clicking through GitHub.com. They are pushing branches from VS Code and then trying to understand what changed.</p></details>
</article><article class="companion-card">
<h3>Accessible Code Review</h3>
<p class="companion-note">Companion audio: this episode reinforces key ideas and may not be a word-for-word reading of this page.</p>
<audio controls preload="none" class="companion-player" src="https://lp.csedesigns.com/ggg/media/ch-15-accessible-code-review.mp3">
Your browser does not support the audio element.
</audio>
<p class="companion-links">
<a href="https://lp.csedesigns.com/ggg/media/ch-15-accessible-code-review.mp3" target="_blank" rel="noopener noreferrer">Open audio file (external)</a>
<span aria-hidden="true"> · </span>
<a href="https://github.com/Community-Access/git-going-with-github/blob/main/podcasts/scripts/chapters/ch-15-accessible-code-review.txt" target="_blank" rel="noopener noreferrer">Full transcript source (external)</a>
</p>
<details class="companion-preview"><summary>Transcript preview</summary><p><strong>Alex:</strong> Welcome back. Today we're talking about accessible code review: reading pull requests, understanding diffs, and leaving feedback that actually helps.</p><p><strong>Jamie:</strong> This is one of those skills that can feel intimidating, because you're not just reading code. You're reacting to someone else's work, in public, with a record attached.</p><p><strong>Alex:</strong> Exactly. But code review is one of the best places to learn. You see how other people solve problems, you catch mistakes before they merge, and you practice explaining what makes code or documentation clearer.</p><p><strong>Jamie:</strong> So review is not only a gatekeeping step. It's a learning step, a quality step, and a collaboration step.</p></details>
</article>
</section>
<nav id="on-this-page" class="onpage-nav" aria-label="On this page">
<h2 class="onpage-title">On This Page</h2>
<ul class="onpage-list">
<li class="onpage-item"><a href="#part-1-the-github-pull-requests-extension">Part 1: The GitHub Pull Requests Extension</a></li>
<li class="onpage-item"><a href="#managing-pull-requests-from-vs-code">Managing Pull Requests from VS Code</a></li>
<li class="onpage-item"><a href="#workshop-recommendation-chapter-15-part-1">Workshop Recommendation (Chapter 15, Part 1)</a></li>
<li class="onpage-item onpage-sub"><a href="#chapter-15-part-1-practice-set">Chapter 15, Part 1 Practice Set</a></li>
<li class="onpage-item onpage-sub"><a href="#practice-151-step-by-step-install-the-extension">Practice 15.1 Step-by-Step: Install the Extension</a></li>
<li class="onpage-item onpage-sub"><a href="#practice-152-step-by-step-check-out-a-pr-and-post-a-comment">Practice 15.2 Step-by-Step: Check Out a PR and Post a Comment</a></li>
<li class="onpage-item onpage-sub"><a href="#completing-chapter-15-part-1-practice-only">Completing Chapter 15, Part 1: Practice Only</a></li>
<li class="onpage-item onpage-sub"><a href="#expected-outcomes">Expected Outcomes</a></li>
<li class="onpage-item onpage-sub"><a href="#if-you-get-stuck">If You Get Stuck</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-moment">Learning Moment</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-pattern-used-in-this-chapter">Learning Pattern Used in This Chapter</a></li>
<li class="onpage-item"><a href="#table-of-contents">Table of Contents</a></li>
<li class="onpage-item"><a href="#1-installing-the-github-pull-requests-extension">1. Installing the GitHub Pull Requests Extension</a></li>
<li class="onpage-item onpage-sub"><a href="#installation-steps">Installation Steps</a></li>
<li class="onpage-item onpage-sub"><a href="#signing-in-to-github">Signing In to GitHub</a></li>
<li class="onpage-item onpage-sub"><a href="#what-the-extension-adds">What the Extension Adds</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-installing-the-pr-extension">Learning Cards: Installing the PR Extension</a></li>
<li class="onpage-item"><a href="#2-viewing-pull-requests">2. Viewing Pull Requests</a></li>
<li class="onpage-item onpage-sub"><a href="#opening-the-github-pull-requests-panel">Opening the GitHub Pull Requests Panel</a></li>
<li class="onpage-item"><a href="#method-2-explorer-section">Method 2: Explorer Section</a></li>
<li class="onpage-item onpage-sub"><a href="#pull-request-tree-structure">Pull Request Tree Structure</a></li>
<li class="onpage-item onpage-sub"><a href="#filtering-pr-lists">Filtering PR Lists</a></li>
<li class="onpage-item onpage-sub"><a href="#viewing-pr-details">Viewing PR Details</a></li>
<li class="onpage-item"><a href="#3-checking-out-a-pull-request-branch">3. Checking Out a Pull Request Branch</a></li>
<li class="onpage-item onpage-sub"><a href="#why-check-out-a-pr">Why Check Out a PR</a></li>
<li class="onpage-item onpage-sub"><a href="#how-to-check-out-a-pr">How to Check Out a PR</a></li>
<li class="onpage-item onpage-sub"><a href="#returning-to-your-original-branch">Returning to Your Original Branch</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-checking-out-a-pr">Learning Cards: Checking Out a PR</a></li>
<li class="onpage-item"><a href="#4-reviewing-pull-requests-in-vs-code">4. Reviewing Pull Requests in VS Code</a></li>
<li class="onpage-item onpage-sub"><a href="#reading-the-files-changed-list">Reading the Files Changed List</a></li>
<li class="onpage-item onpage-sub"><a href="#understanding-the-diff-view">Understanding the Diff View</a></li>
<li class="onpage-item onpage-sub"><a href="#screen-reader-diff-review-with-accessible-diff-viewer">Screen Reader Diff Review with Accessible Diff Viewer</a></li>
<li class="onpage-item onpage-sub"><a href="#flagging-issues-during-review">Flagging Issues During Review</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-reviewing-pull-requests-in-vs-code">Learning Cards: Reviewing Pull Requests in VS Code</a></li>
<li class="onpage-item"><a href="#5-creating-a-pull-request-from-vs-code">5. Creating a Pull Request from VS Code</a></li>
<li class="onpage-item onpage-sub"><a href="#tool-cards-create-a-pull-request-from-your-editor">Tool Cards: Create a Pull Request (from your editor)</a></li>
<li class="onpage-item onpage-sub"><a href="#prerequisites">Prerequisites</a></li>
<li class="onpage-item onpage-sub"><a href="#creating-the-pr">Creating the PR</a></li>
<li class="onpage-item onpage-sub"><a href="#filling-out-the-pr-form">Filling Out the PR Form</a></li>
<li class="onpage-item onpage-sub"><a href="#submitting-the-pr">Submitting the PR</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-creating-a-pull-request">Learning Cards: Creating a Pull Request</a></li>
<li class="onpage-item"><a href="#6-pull-request-description-templates">6. Pull Request Description Templates</a></li>
<li class="onpage-item onpage-sub"><a href="#where-templates-are-stored">Where Templates Are Stored</a></li>
<li class="onpage-item onpage-sub"><a href="#example-pr-template">Example PR Template</a></li>
<li class="onpage-item onpage-sub"><a href="#filling-out-a-template">Filling Out a Template</a></li>
<li class="onpage-item"><a href="#7-commenting-and-requesting-changes">7. Commenting and Requesting Changes</a></li>
<li class="onpage-item onpage-sub"><a href="#adding-an-inline-comment">Adding an Inline Comment</a></li>
<li class="onpage-item onpage-sub"><a href="#starting-a-review">Starting a Review</a></li>
<li class="onpage-item onpage-sub"><a href="#submitting-your-review">Submitting Your Review</a></li>
<li class="onpage-item onpage-sub"><a href="#what-happens-after-submission">What Happens After Submission</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-commenting-and-requesting-changes">Learning Cards: Commenting and Requesting Changes</a></li>
<li class="onpage-item"><a href="#8-merging-pull-requests">8. Merging Pull Requests</a></li>
<li class="onpage-item onpage-sub"><a href="#prerequisites-for-merging">Prerequisites for Merging</a></li>
<li class="onpage-item onpage-sub"><a href="#merging-from-vs-code">Merging from VS Code</a></li>
<li class="onpage-item onpage-sub"><a href="#merge-types">Merge Types</a></li>
<li class="onpage-item onpage-sub"><a href="#after-merging">After Merging</a></li>
<li class="onpage-item onpage-sub"><a href="#deleting-the-feature-branch">Deleting the Feature Branch</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-merging-pull-requests">Learning Cards: Merging Pull Requests</a></li>
<li class="onpage-item"><a href="#keyboard-shortcuts---github-pull-requests-extension">Keyboard Shortcuts - GitHub Pull Requests Extension</a></li>
<li class="onpage-item"><a href="#troubleshooting">Troubleshooting</a></li>
<li class="onpage-item onpage-sub"><a href="#quotno-pull-requests-foundquot">&quot;No pull requests found&quot;</a></li>
<li class="onpage-item onpage-sub"><a href="#quotcould-not-create-pull-requestquot">&quot;Could not create pull request&quot;</a></li>
<li class="onpage-item onpage-sub"><a href="#quotauthentication-failedquot">&quot;Authentication failed&quot;</a></li>
<li class="onpage-item"><a href="#try-it-review-a-pr-from-vs-code">Try It: Review a PR from VS Code</a></li>
<li class="onpage-item"><a href="#part-2-accessible-code-review">Part 2: Accessible Code Review</a></li>
<li class="onpage-item"><a href="#conducting-pull-request-reviews-with-a-screen-reader">Conducting Pull Request Reviews with a Screen Reader</a></li>
<li class="onpage-item"><a href="#workshop-recommendation-chapter-15--challenge-12">Workshop Recommendation (Chapter 15 / Challenge 12)</a></li>
<li class="onpage-item onpage-sub"><a href="#challenge-12-practice-set">Challenge 12 Practice Set</a></li>
<li class="onpage-item onpage-sub"><a href="#practice-121-step-by-step-review-a-pr-and-leave-inline-comments">Practice 12.1 Step-by-Step: Review a PR and Leave Inline Comments</a></li>
<li class="onpage-item onpage-sub"><a href="#practice-122-step-by-step-submit-a-formal-review-verdict">Practice 12.2 Step-by-Step: Submit a Formal Review Verdict</a></li>
<li class="onpage-item onpage-sub"><a href="#completing-challenge-12-submit-your-evidence">Completing Challenge 12: Submit Your Evidence</a></li>
<li class="onpage-item onpage-sub"><a href="#expected-outcomes">Expected Outcomes</a></li>
<li class="onpage-item onpage-sub"><a href="#if-you-get-stuck">If You Get Stuck</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-moment">Learning Moment</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-pattern-used-in-this-chapter">Learning Pattern Used in This Chapter</a></li>
<li class="onpage-item"><a href="#prerequisites-checklist">Prerequisites Checklist</a></li>
<li class="onpage-item onpage-sub"><a href="#before-starting-this-chapter-verify-you-have-completed">Before starting this chapter, verify you have completed</a></li>
<li class="onpage-item"><a href="#two-environments-for-code-review">Two Environments for Code Review</a></li>
<li class="onpage-item onpage-sub"><a href="#about-learning-cards-in-this-chapter">About Learning Cards in This Chapter</a></li>
<li class="onpage-item"><a href="#part-1---reviewing-on-githubcom">Part 1 - Reviewing on GitHub.com</a></li>
<li class="onpage-item onpage-sub"><a href="#good-news-modern-interface-is-default">Good News: Modern Interface is Default</a></li>
<li class="onpage-item onpage-sub"><a href="#step-1-reach-the-files-changed-tab">Step 1: Reach the Files Changed Tab</a></li>
<li class="onpage-item onpage-sub"><a href="#step-2-use-the-file-tree-to-orient-yourself">Step 2: Use the File Tree to Orient Yourself</a></li>
<li class="onpage-item onpage-sub"><a href="#step-3-navigate-between-file-diffs">Step 3: Navigate Between File Diffs</a></li>
<li class="onpage-item onpage-sub"><a href="#step-4-read-a-diff">Step 4: Read a Diff</a></li>
<li class="onpage-item onpage-sub"><a href="#step-5-place-an-inline-comment">Step 5: Place an Inline Comment</a></li>
<li class="onpage-item onpage-sub"><a href="#step-6-read-existing-comments-and-threads">Step 6: Read Existing Comments and Threads</a></li>
<li class="onpage-item onpage-sub"><a href="#step-7-submit-your-review">Step 7: Submit Your Review</a></li>
<li class="onpage-item onpage-sub"><a href="#step-8-re-request-review-for-authors">Step 8: Re-request Review (for Authors)</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-reviewing-on-githubcom">Learning Cards: Reviewing on GitHub.com</a></li>
<li class="onpage-item"><a href="#part-2---reviewing-in-vs-code-with-the-accessible-diff-viewer">Part 2 - Reviewing in VS Code with the Accessible Diff Viewer</a></li>
<li class="onpage-item onpage-sub"><a href="#opening-a-diff-in-vs-code">Opening a Diff in VS Code</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-vs-code-code-review">Learning Cards: VS Code Code Review</a></li>
<li class="onpage-item onpage-sub"><a href="#using-the-accessible-diff-viewer-f7">Using the Accessible Diff Viewer (F7)</a></li>
<li class="onpage-item onpage-sub"><a href="#placing-comments-in-vs-code-github-pr-extension">Placing Comments in VS Code (GitHub PR Extension)</a></li>
<li class="onpage-item"><a href="#code-review-structure-and-content">Code Review Structure and Content</a></li>
<li class="onpage-item onpage-sub"><a href="#the-anatomy-of-a-useful-review-comment">The Anatomy of a Useful Review Comment</a></li>
<li class="onpage-item onpage-sub"><a href="#prefixes-that-set-expectations">Prefixes That Set Expectations</a></li>
<li class="onpage-item onpage-sub"><a href="#how-many-comments-is-too-many">How Many Comments Is Too Many?</a></li>
<li class="onpage-item"><a href="#keyboard-reference">Keyboard Reference</a></li>
<li class="onpage-item onpage-sub"><a href="#github-web-review">GitHub Web Review</a></li>
<li class="onpage-item onpage-sub"><a href="#vs-code-accessible-diff-viewer">VS Code Accessible Diff Viewer</a></li>
<li class="onpage-item"><a href="#common-review-scenarios">Common Review Scenarios</a></li>
<li class="onpage-item onpage-sub"><a href="#quoti-want-to-verify-the-pr-only-changes-what-it-claimsquot">&quot;I want to verify the PR only changes what it claims&quot;</a></li>
<li class="onpage-item onpage-sub"><a href="#quoti-want-to-find-all-changes-to-one-specific-sectionquot">&quot;I want to find all changes to one specific section&quot;</a></li>
<li class="onpage-item onpage-sub"><a href="#quoti-agreed-but-then-the-author-made-more-changes---did-anything-new-appearquot">&quot;I agreed but then the author made more changes - did anything new appear?&quot;</a></li>
<li class="onpage-item onpage-sub"><a href="#quota-reviewer-left-a-comment-i-don39t-understandquot">&quot;A reviewer left a comment I don&#39;t understand&quot;</a></li>
<li class="onpage-item"><a href="#exercises">Exercises</a></li>
<li class="onpage-item onpage-sub"><a href="#exercise-a---complete-a-web-review">Exercise A - Complete a Web Review</a></li>
<li class="onpage-item onpage-sub"><a href="#exercise-b---use-the-vs-code-accessible-diff-viewer">Exercise B - Use the VS Code Accessible Diff Viewer</a></li>
<li class="onpage-item onpage-sub"><a href="#exercise-c---compare-and-reflect">Exercise C - Compare and Reflect</a></li>
<li class="onpage-item"><a href="#part-3---using-github-copilot-to-understand-code-changes">Part 3 - Using GitHub Copilot to Understand Code Changes</a></li>
<li class="onpage-item onpage-sub"><a href="#when-to-use-copilot-during-code-review">When to Use Copilot During Code Review</a></li>
<li class="onpage-item onpage-sub"><a href="#how-to-use-copilot-during-review">How to Use Copilot During Review</a></li>
<li class="onpage-item onpage-sub"><a href="#copilot-limitations-during-review-critical-to-know">Copilot Limitations During Review (Critical to Know)</a></li>
<li class="onpage-item onpage-sub"><a href="#best-practices">Best Practices</a></li>
<li class="onpage-item onpage-sub"><a href="#what-comes-next">What Comes Next</a></li>
<li class="onpage-item"><a href="#part-4-the-reviewer39s-craft">Part 4: The Reviewer&#39;s Craft</a></li>
<li class="onpage-item onpage-sub"><a href="#what-to-look-for-in-a-review">What to Look for in a Review</a></li>
<li class="onpage-item onpage-sub"><a href="#the-three-review-actions">The Three Review Actions</a></li>
<li class="onpage-item onpage-sub"><a href="#writing-constructive-feedback">Writing Constructive Feedback</a></li>
<li class="onpage-item onpage-sub"><a href="#the-reviewer39s-checklist">The Reviewer&#39;s Checklist</a></li>
<li class="onpage-item onpage-sub"><a href="#reviewing-as-a-learning-tool">Reviewing as a Learning Tool</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-the-reviewer39s-craft">Learning Cards: The Reviewer&#39;s Craft</a></li>
<li class="onpage-item"><a href="#day-2-teaser-the-full-accessibility-agents-review-ecosystem">Day 2 Teaser: The Full Accessibility Agents Review Ecosystem</a></li>
<li class="onpage-item onpage-sub"><a href="#the-agents-that-help-with-code-review">The Agents That Help With Code Review</a></li>
<li class="onpage-item onpage-sub"><a href="#how-it-works">How It Works</a></li>
<li class="onpage-item onpage-sub"><a href="#the-principle-skill-first-agent-second">The Principle: Skill First, Agent Second</a></li>
<li class="onpage-item onpage-sub"><a href="#a-real-example-the-flow">A Real Example: The Flow</a></li>
<li class="onpage-item"><a href="#authoritative-sources">Authoritative Sources</a></li>
<li class="onpage-item onpage-sub"><a href="#section-level-source-map">Section-Level Source Map</a></li>
</ul>
</nav>
<div id="course-content"><h1 id="code-review-prs-diffs-and-constructive-feedback">Code Review: PRs, Diffs, and Constructive Feedback</h1>
<blockquote>
<p><strong>Related appendices:</strong> <a href="appendix-g-vscode-reference.html">Appendix G: VS Code Reference</a> | <a href="appendix-c-markdown-reference.html">Appendix C: Markdown Reference</a>
<strong>Authoritative sources:</strong> <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests">GitHub Docs: Reviewing changes in pull requests</a> | <a href="https://accessibility.github.com/documentation/guide/pull-requests/">GitHub Accessibility Guide: Pull Request Reviews</a></p>
</blockquote>
<blockquote>
<p><strong>Day 2, Block 2 Material</strong></p>
<p>This chapter unifies PR management, accessible code review, and the reviewer's craft into one chapter. Part 1 covers the GitHub Pull Requests extension in VS Code. Part 2 covers accessible code review with diffs and inline comments. Part 3 adds the reviewer's judgment framework.</p>
</blockquote>
<hr>
<h2 id="part-1-the-github-pull-requests-extension">Part 1: The GitHub Pull Requests Extension</h2>
<blockquote>
<p><strong>See also:</strong> <a href="appendix-g-vscode-reference.html">Appendix G: VS Code Reference</a> for the complete list of GitHub Pull Requests extension keyboard shortcuts.</p>
</blockquote>
<blockquote>
<p><strong>Listen to Episode 13:</strong> <a href="https://lp.csedesigns.com/ggg/PODCASTS.html">The GitHub Pull Requests Extension</a> - a conversational audio overview of this chapter. Listen before reading to preview the concepts, or after to reinforce what you learned.</p>
</blockquote>
<h2 id="managing-pull-requests-from-vs-code">Managing Pull Requests from VS Code</h2>
<blockquote>
<p><strong>Day 2, Block 2 Material</strong></p>
<p>This guide covers the GitHub Pull Requests and Issues extension: viewing open PRs, checking out PR branches for local testing, reviewing PRs with screen reader-accessible tools, creating PRs directly from VS Code, using PR templates, and syncing PR status with GitHub.</p>
<p><strong>Prerequisites:</strong> <a href="06-working-with-pull-requests.html">Working with Pull Requests</a>, <a href="14-git-in-practice.html">Git & Source Control in VS Code</a></p>
<p><strong>Mac keyboard shortcuts:</strong> Throughout this chapter, all <code>Ctrl+</code> shortcuts use <code>Cmd+</code> on Mac, and <code>Alt+</code> shortcuts use <code>Option+</code> on Mac. For example: <code>Ctrl+Shift+P</code> → <code>Cmd+Shift+P</code>, <code>Ctrl+Shift+G</code> → <code>Cmd+Shift+G</code>, <code>Alt+F2</code> → <code>Option+F2</code>. Context menus (<code>Shift+F10</code> on Windows) use <code>Ctrl+Return</code> on Mac.</p>
</blockquote>
<h2 id="workshop-recommendation-chapter-15-part-1">Workshop Recommendation (Chapter 15, Part 1)</h2>
<p>Chapter 15, Part 1 introduces the <strong>GitHub Pull Requests extension</strong> for managing PRs directly from VS Code.</p>
<ul>
<li><strong>Challenge count:</strong> 2 guided challenges</li>
<li><strong>Automation check:</strong> none (extension installation and review state are account-local)</li>
<li><strong>Evidence:</strong> issue comment with confirmation of actions completed</li>
<li><strong>Pattern:</strong> install, check out, review, comment</li>
</ul>
<h3 id="chapter-15-part-1-practice-set">Chapter 15, Part 1 Practice Set</h3>
<ol>
<li><strong>Install the GitHub Pull Requests extension</strong> - add the extension to VS Code and sign in with your GitHub account.</li>
<li><strong>Check out a PR and post a review comment</strong> - download a PR branch locally, read the diff, and post one constructive review comment.</li>
</ol>
<h3 id="practice-151-step-by-step-install-the-extension">Practice 15.1 Step-by-Step: Install the Extension</h3>
<p><strong>Goal:</strong> Install the GitHub Pull Requests and Issues extension and authenticate with your GitHub account.</p>
<p><strong>Where you are working:</strong> VS Code desktop with your Learning Room repository open.</p>
<p><strong>Estimated time:</strong> 3-5 minutes.</p>
<ol>
<li>Open the Extensions sidebar: <code>Ctrl+Shift+X</code> (Mac: <code>Cmd+Shift+X</code>).</li>
<li>Your screen reader announces "Extensions: Marketplace." The search box has focus.</li>
<li>Type <code>GitHub Pull Requests</code> in the search box and press <code>Enter</code>.</li>
<li>Navigate down the results list. Select <strong>GitHub Pull Requests</strong> (publisher: GitHub).</li>
<li>Activate the <strong>Install</strong> button. VS Code installs the extension and may show a notification.</li>
<li>After installation, VS Code prompts you to sign in. Activate <strong>Sign in to GitHub</strong>.</li>
<li>A browser window opens for GitHub OAuth. Approve the authorization and return to VS Code.</li>
<li>Verify: open the Explorer sidebar (<code>Ctrl+Shift+E</code>). You should now see a <strong>GitHub</strong> section in the sidebar showing Pull Requests and Issues.</li>
</ol>
<p><strong>Screen reader tip:</strong> After step 5, if the install notification disappears before you can read it, open Command Palette (<code>Ctrl+Shift+P</code>) and run <code>Notifications: Focus Notification Toast</code>.</p>
<p><strong>You are done when:</strong> The GitHub section appears in your Explorer sidebar and shows pull requests from your Learning Room repository.</p>
<h3 id="practice-152-step-by-step-check-out-a-pr-and-post-a-comment">Practice 15.2 Step-by-Step: Check Out a PR and Post a Comment</h3>
<p><strong>Goal:</strong> Check out someone else's PR branch locally, read the diff in VS Code, and post one constructive review comment.</p>
<p><strong>Where you are working:</strong> VS Code with the GitHub Pull Requests extension installed.</p>
<p><strong>Estimated time:</strong> 10-15 minutes.</p>
<ol>
<li>Open the Command Palette: <code>Ctrl+Shift+P</code> (Mac: <code>Cmd+Shift+P</code>).</li>
<li>Type <code>GitHub Pull Requests: Focus on Pull Requests View</code> and select it. The Pull Requests panel opens.</li>
<li>Navigate the list of open PRs. Find one that is <strong>not yours</strong> (a classmate's PR from Chapter 6, 7, or 14).</li>
<li>With the PR focused, press <code>Enter</code> or activate <strong>Checkout</strong> from the context menu (<code>Shift+F10</code> on Windows). VS Code switches to that PR's branch.</li>
<li>Open the Command Palette again and run <code>GitHub Pull Requests: Open Changed Files</code>. This shows the list of files the PR changed.</li>
<li>Open one changed file. VS Code opens the <strong>Diff Editor</strong> showing old content on the left and new content on the right.</li>
<li>Navigate the diff with the <strong>Accessible Diff Viewer</strong>: press <code>F7</code> to move to the next change, <code>Shift+F7</code> for the previous change. Your screen reader announces each change (added lines, removed lines).</li>
<li>Find one specific thing to comment on: a typo, an unclear sentence, a missing step, or something the author did well.</li>
<li>To add an inline comment: position your cursor on the line you want to comment on, then open Command Palette and run <code>GitHub Pull Requests: Add Comment</code>. Type your constructive comment and activate <strong>Add Comment</strong>.</li>
<li>If the inline comment method is difficult, navigate to the PR on GitHub.com instead and add your comment in the <strong>Files changed</strong> tab.</li>
</ol>
<p><strong>If checkout is blocked by permissions:</strong> You can still complete this challenge in read-only mode. Skip step 4 and instead open the PR on GitHub.com. Use the <strong>Files changed</strong> tab to read the diff and post your comment there.</p>
<p><strong>Screen reader tip:</strong> In the Diff Editor, <code>F7</code> (Accessible Diff Viewer) is the most reliable way to navigate changes. It reads each hunk as a single block, which is much easier than navigating line by line.</p>
<p><strong>You are done when:</strong> You have posted at least one constructive review comment on someone else's PR.</p>
<h3 id="completing-chapter-15-part-1-practice-only">Completing Chapter 15, Part 1: Practice Only</h3>
<p>Part 1 is setup and practice - it does not have its own required issue. Post a comment on your current challenge issue if you want to record what you tried:</p>
<pre><code class="hljs language-text">Chapter 15 Part 1 completed:
- Extension installed: yes / no
- Signed in to GitHub: yes / no
- PR reviewed: #[PR number by classmate]
- Comment posted: yes (inline / on GitHub.com)
- My comment was about: [one-sentence summary]</code></pre>
<p>Your formal evidence for this skill is submitted later, on the <strong>Challenge 12: Review Like a Pro</strong> issue (see Part 2 below).</p>
<h3 id="expected-outcomes">Expected Outcomes</h3>
<ul>
<li>Student can install and authenticate the GitHub PR extension.</li>
<li>Student can check out a PR branch in VS Code (or view it on GitHub.com).</li>
<li>Student can navigate diffs using the Accessible Diff Viewer (<code>F7</code>).</li>
<li>Student can post constructive, specific feedback on a classmate's work.</li>
</ul>
<h3 id="if-you-get-stuck">If You Get Stuck</h3>
<ol>
<li>Extension does not install? Reload VS Code: <code>Ctrl+Shift+P</code>, then run <code>Developer: Reload Window</code>.</li>
<li>OAuth sign-in fails? Verify your GitHub account is active in the browser first, close VS Code, reopen, and retry.</li>
<li>PR list is empty? Switch to "All Open" view in the GitHub Pull Requests panel.</li>
<li>Checkout fails? Confirm you have write access to the repository. If not, use the read-only GitHub.com fallback.</li>
<li>Diff Editor is hard to navigate? Press <code>F7</code> for the Accessible Diff Viewer mode, which is purpose-built for screen readers.</li>
<li>Cannot find the Add Comment command? Use Command Palette and search for <code>GitHub Pull Requests: Add Comment</code>.</li>
<li>Ask facilitator to help verify the GitHub PR panel and model one review comment.</li>
<li>Finished but not sure you did it right? Compare your work against the <a href="solutions/solution-11-day2-pr.html">Challenge 11 reference solution</a>.</li>
</ol>
<blockquote>
<p><strong>Continue learning:</strong> The GitHub Skills course <a href="https://github.com/skills/review-pull-requests">Review Pull Requests</a> practices approving, requesting changes, and using suggestions in an interactive format. See <a href="appendix-z-github-skills.html">Appendix Z</a> for the full catalog.</p>
</blockquote>
<h3 id="learning-moment">Learning Moment</h3>
<p>PR tooling multiplies your impact. Reviewing others' work refines your own standards and builds community trust. The comment you just wrote helps another student learn - and you learn by articulating what makes documentation clear.</p>
<h3 id="learning-pattern-used-in-this-chapter">Learning Pattern Used in This Chapter</h3>
<ol>
<li>Install and configure the tool before starting the task.</li>
<li>Practice on someone else's work first (reviewing is safer than authoring).</li>
<li>Use accessibility tools (<code>F7</code> Accessible Diff Viewer) to navigate efficiently.</li>
<li>Write specific, constructive feedback (not just "looks good").</li>
</ol>
<h2 id="table-of-contents">Table of Contents</h2>
<ol>
<li><a href="#1-installing-the-github-pull-requests-extension">Installing the GitHub Pull Requests Extension</a></li>
<li><a href="#2-viewing-pull-requests">Viewing Pull Requests</a></li>
<li><a href="#3-checking-out-a-pull-request-branch">Checking Out a Pull Request Branch</a></li>
<li><a href="#4-reviewing-pull-requests-in-vs-code">Reviewing Pull Requests in VS Code</a></li>
<li><a href="#5-creating-a-pull-request-from-vs-code">Creating a Pull Request from VS Code</a></li>
<li><a href="#6-pull-request-description-templates">Pull Request Description Templates</a></li>
<li><a href="#7-commenting-and-requesting-changes">Commenting and Requesting Changes</a></li>
<li><a href="#8-merging-pull-requests">Merging Pull Requests</a></li>
</ol>
<h2 id="1-installing-the-github-pull-requests-extension">1. Installing the GitHub Pull Requests Extension</h2>
<p>The GitHub Pull Requests and Issues extension integrates GitHub's PR workflow directly into VS Code - no browser tab switching required.</p>
<h3 id="installation-steps">Installation Steps</h3>
<h4 id="method-1-extensions-sidebar">Method 1: Extensions Sidebar</h4>
<ol>
<li>Open Extensions sidebar: <code>Ctrl+Shift+X</code> (Mac: <code>Cmd+Shift+X</code>)</li>
<li>Type "GitHub Pull Requests" in the search box</li>
<li>Find "GitHub Pull Requests and Issues" (publisher: GitHub)</li>
<li>Navigate to the extension in the results list</li>
<li>Press <code>Enter</code> to open the extension detail page</li>
<li><code>Tab</code> to "Install" button → press <code>Enter</code></li>
</ol>
<h4 id="method-2-command-palette">Method 2: Command Palette</h4>
<ol>
<li><code>Ctrl+Shift+P</code></li>
<li>Type "install extensions"</li>
<li>Select "Extensions: Install Extensions"</li>
<li>Search for "GitHub Pull Requests"</li>
<li>Install "GitHub Pull Requests and Issues"</li>
</ol>
<p><strong>Screen reader note:</strong> The Extensions sidebar is a tree view. Use <code>Up/Down Arrow</code> to navigate, <code>Enter</code> to open an extension's detail page.</p>
<h3 id="signing-in-to-github">Signing In to GitHub</h3>
<p>After installation, VS Code prompts you to sign in:</p>
<ol>
<li>A notification appears: "Sign in to GitHub to use Pull Requests"</li>
<li>Navigate to the notification (<code>Alt+N</code> / Mac: <code>Option+N</code>, or status bar navigation)</li>
<li>Select "Sign in"</li>
<li>VS Code opens your browser for GitHub OAuth authentication</li>
<li>Authorize VS Code in the browser</li>
<li>Return to VS Code - you're now signed in</li>
</ol>
<h4 id="verify-sign-in">Verify sign-in</h4>
<ul>
<li>Open Command Palette: <code>Ctrl+Shift+P</code> (Mac: <code>Cmd+Shift+P</code>)</li>
<li>Type "GitHub Pull Requests: Sign in"</li>
<li>If already signed in, the option shows "Sign out" instead</li>
</ul>
<h3 id="what-the-extension-adds">What the Extension Adds</h3>
<p>After installation, you gain:</p>
<ul>
<li><strong>GitHub view in the Activity Bar</strong> (sidebar icon that looks like the GitHub logo)</li>
<li><strong>Pull Requests and Issues tree</strong> in the Explorer</li>
<li><strong>PR creation commands</strong> in the Command Palette</li>
<li><strong>Inline PR review features</strong> in the editor</li>
<li><strong>Issue linking</strong> when writing commit messages</li>
</ul>
<h3 id="learning-cards-installing-the-pr-extension">Learning Cards: Installing the PR Extension</h3>
<details>
<summary>Screen reader users</summary>
<ul>
<li>Open Extensions with <code>Ctrl+Shift+X</code>, type "GitHub Pull Requests" -- your screen reader announces each result; press <code>Enter</code> on the correct one then <code>Tab</code> to "Install"</li>
<li>After installation, verify sign-in via Command Palette (<code>Ctrl+Shift+P</code>): type "GitHub Pull Requests: Sign in" -- if already signed in, it shows "Sign out" instead</li>
<li>The GitHub view appears as a new icon in the Activity Bar; press <code>F6</code> to cycle between panels until you hear "GitHub"</li>
</ul>
</details>
<details>
<summary>Low vision users</summary>
<ul>
<li>A new GitHub logo icon appears in the Activity Bar (left sidebar) after installation -- it is the Octocat silhouette</li>
<li>After signing in, the notification bar at the bottom confirms authentication with your username</li>
<li>Increase sidebar width by dragging its edge so PR titles are not truncated at high zoom levels</li>
</ul>
</details>
<details>
<summary>Sighted users</summary>
<ul>
<li>Look for the GitHub Octocat icon in the Activity Bar after installation -- click it to open the Pull Requests and Issues panel</li>
<li>A blue notification badge appears on the icon when there are new PRs to review</li>
<li>The Explorer sidebar also gains a "GitHub Pull Requests" section that you can expand or collapse</li>
</ul>
</details>
<h2 id="2-viewing-pull-requests">2. Viewing Pull Requests</h2>
<h3 id="opening-the-github-pull-requests-panel">Opening the GitHub Pull Requests Panel</h3>
<h4 id="method-1-activity-bar">Method 1: Activity Bar</h4>
<details>
<summary>Visual / mouse users</summary>
<p>Click the <strong>GitHub logo icon</strong> in the Activity Bar (the vertical strip of icons on the far left). It's usually the 5th or 6th icon. The GitHub Pull Requests panel opens.</p>
</details>
<details>
<summary>Screen reader users (NVDA / JAWS / VoiceOver)</summary>
<ol>
<li>The Activity Bar is not always reachable by <code>Tab</code> from the editor</li>
<li>Use <code>Ctrl+Shift+P</code> (Mac: <code>Cmd+Shift+P</code>) → type "GitHub Pull Requests: View Pull Request" or "Focus on Pull Requests View" → press <code>Enter</code></li>
<li>Alternatively press <code>Ctrl+Shift+G</code> (Mac: <code>Cmd+Shift+G</code>) to open Source Control, then <code>Tab</code> until you reach the Activity Bar icon strip</li>
</ol>
<p>The GitHub view opens, showing:</p>
<ul>
<li>"Pull Requests"</li>
<li>"Issues"</li>
</ul>
</details>
<details>
<summary>Web alternative (github.com)</summary>
<p>View pull requests directly on GitHub without VS Code:</p>
<ol>
<li>Navigate to the repository on GitHub.com</li>
<li>Click the <strong>Pull requests</strong> tab</li>
<li>Click any PR title to view its conversation, commits, and changed files</li>
<li>Use the <strong>Files changed</strong> tab to review diffs</li>
</ol>
<p>See <a href="06-working-with-pull-requests.html">Working with Pull Requests</a> for the full web-based PR workflow.</p>
</details>
<details>
<summary>GitHub CLI (gh) alternative</summary>
<p>View PRs from your terminal:</p>
<pre><code class="hljs language-bash"><span class="hljs-comment"># List open PRs</span>
gh <span class="hljs-built_in">pr</span> list
<span class="hljs-comment"># View a specific PR</span>
gh <span class="hljs-built_in">pr</span> view 42
<span class="hljs-comment"># Open a PR in your browser</span>
gh <span class="hljs-built_in">pr</span> view 42 --web
<span class="hljs-comment"># Filter PRs waiting for your review</span>
gh <span class="hljs-built_in">pr</span> list --search <span class="hljs-string">"review-requested:@me"</span></code></pre>
</details>
<h2 id="method-2-explorer-section">Method 2: Explorer Section</h2>
<ol>
<li>Open Explorer: <code>Ctrl+Shift+E</code> (Mac: <code>Cmd+Shift+E</code>)</li>
<li>Navigate with <code>Arrow</code> keys to find the "GitHub Pull Requests" section</li>
<li>Expand it with <code>Right Arrow</code></li>
</ol>
<h3 id="pull-request-tree-structure">Pull Request Tree Structure</h3>
<h4 id="description">Description</h4>
<p>The GitHub Pull Requests panel has two top-level sections. "My Pull Requests" contains four filters: Assigned to Me, Created by Me, Waiting for my Review, and All Open. The repository section shows Local Pull Request Branches (checked out locally), All Open Pull Requests, and All Closed Pull Requests.</p>
<h4 id="screen-reader-announcement-example">Screen reader announcement example</h4>
<p>"Pull Request #42: Add Timeline Guide, opened by jeffb, 2 days ago, 3 files changed"</p>
<h3 id="filtering-pr-lists">Filtering PR Lists</h3>
<h4 id="by-status">By status</h4>
<ul>
<li>"All Open" - every open PR</li>
<li>"Assigned to Me" - PRs where you're an assignee</li>
<li>"Waiting for my Review" - PRs where you're requested as reviewer</li>
<li>"Draft" - PRs marked as work-in-progress</li>
</ul>
<h4 id="by-repository">By repository</h4>
<p>The tree organizes PRs by repository. Expand a repo to see its PRs.</p>
<h3 id="viewing-pr-details">Viewing PR Details</h3>
<ol>
<li>Navigate to a PR in the tree</li>
<li>Press <code>Enter</code></li>
</ol>
<p>A PR detail view opens in the editor area showing:</p>
<ul>
<li>PR title and number</li>
<li>Author and creation date</li>
<li>Status (Open, Merged, Closed)</li>
<li>Description (full Markdown with inline rendering)</li>
<li>Reviewers and their status (Approved, Requested Changes, Pending)</li>
<li>Checks (CI status: passing, failing, pending)</li>
<li>Files changed (clickable list)</li>
<li>Comments timeline</li>
</ul>
<h4 id="screen-reader-experience">Screen reader experience</h4>
<ul>
<li>The detail view is Markdown-rendered HTML</li>
<li>Use standard screen reader reading commands (<code>Arrow</code> keys in NVDA/JAWS virtual mode)</li>
<li>Headings mark each section ("Description", "Reviewers", "Files Changed", "Comments")</li>
<li>Links are clickable with <code>Enter</code></li>
</ul>
<h2 id="3-checking-out-a-pull-request-branch">3. Checking Out a Pull Request Branch</h2>
<p><strong>Checking out a PR</strong> means downloading its branch to your local machine so you can test it, review it interactively, or add commits to it.</p>
<h3 id="why-check-out-a-pr">Why Check Out a PR</h3>
<ul>
<li><strong>Test functionality:</strong> Run the code locally to verify it works</li>
<li><strong>Review with full context:</strong> See the changes in your editor with full file access</li>
<li><strong>Make suggestions:</strong> Add commits to someone else's PR (if you have write access)</li>
<li><strong>Verify accessibility:</strong> Test with your screen reader to ensure changes don't break navigation</li>
</ul>
<h3 id="how-to-check-out-a-pr">How to Check Out a PR</h3>
<h4 id="method-1-from-the-pr-detail-view">Method 1: From the PR Detail View</h4>
<ol>
<li>Open a PR (see Section 2)</li>
<li>In the PR detail view, navigate to "Checkout" button</li>
<li>Press <code>Enter</code></li>
</ol>
<p>VS Code:</p>
<ul>
<li>Downloads the branch</li>
<li>Switches your local repository to that branch</li>
<li>Opens the changed files in the editor</li>
</ul>
<h4 id="method-2-from-the-pr-tree">Method 2: From the PR Tree</h4>
<ol>
<li>Navigate to the PR in the GitHub Pull Requests tree</li>
<li>Press <code>Shift+F10</code> (Mac: <code>Ctrl+Return</code>) to open context menu</li>
<li>Select "Checkout Pull Request"</li>
</ol>
<h4 id="method-3-command-palette">Method 3: Command Palette</h4>
<ol>
<li><code>Ctrl+Shift+P</code> (Mac: <code>Cmd+Shift+P</code>)</li>
<li>Type "GitHub Pull Requests: Checkout"</li>
<li>Select "GitHub Pull Requests: Checkout Pull Request"</li>
<li>Choose the PR from the list</li>
</ol>
<p><strong>Screen reader note:</strong> After checkout, the bottom-left status bar shows the branch name (example: "jeffb/add-timeline-guide"). Your local files now match that branch.</p>
<h3 id="returning-to-your-original-branch">Returning to Your Original Branch</h3>
<p>After reviewing:</p>
<ol>
<li><code>Ctrl+Shift+P</code> (Mac: <code>Cmd+Shift+P</code>)</li>
<li>Type "git checkout"</li>
<li>Select "Git: Checkout to..."</li>
<li>Choose your original branch (usually <code>main</code> or your feature branch)</li>
</ol>
<h3 id="learning-cards-checking-out-a-pr">Learning Cards: Checking Out a PR</h3>
<details>
<summary>Screen reader users</summary>
<ul>
<li>After checkout, press <code>F6</code> to navigate to the Status Bar and hear the branch name (e.g., "jeffb/fix-alt-text") confirming you are on the PR branch</li>
<li>Use <code>Ctrl+Shift+P</code> then "Git: Checkout to" to switch back to your original branch when done reviewing</li>
<li>The PR detail view is Markdown-rendered HTML -- navigate with <code>h</code> (heading), <code>t</code> (table), and arrow keys in your screen reader's virtual mode</li>
</ul>
</details>
<details>
<summary>Low vision users</summary>
<ul>
<li>The Status Bar in the bottom-left changes to show the PR branch name, confirming the checkout succeeded</li>
<li>Files changed by the PR are highlighted in the Explorer sidebar with colored badges (M for modified, A for added)</li>
<li>Use <code>Ctrl+=</code> to zoom the editor if diff annotations are hard to read</li>
</ul>
</details>
<details>
<summary>Sighted users</summary>
<ul>
<li>After checkout, the branch name in the bottom-left Status Bar changes to the PR branch name</li>
<li>Changed files appear in the Source Control panel with status badges so you can quickly see what was modified</li>
<li>Right-click a file in the PR file list to open a side-by-side diff view</li>
</ul>
</details>
<h2 id="4-reviewing-pull-requests-in-vs-code">4. Reviewing Pull Requests in VS Code</h2>
<p>Once you've checked out a PR (or opened it in the detail view), you can review its changes fully within VS Code.</p>
<h3 id="reading-the-files-changed-list">Reading the Files Changed List</h3>
<h4 id="in-the-pr-detail-view">In the PR detail view</h4>
<ol>
<li>Scroll down to "Files Changed" section</li>
<li>Each file is a link</li>
<li>Navigate with <code>Arrow</code> keys</li>
<li>Press <code>Enter</code> on a file to open its diff view</li>
</ol>
<h4 id="screen-reader-announcement">Screen reader announcement</h4>
<p>"docs/11-vscode-interface.md, 42 additions, 3 deletions"</p>
<h3 id="understanding-the-diff-view">Understanding the Diff View</h3>
<p>When you open a file from "Files Changed":</p>
<h4 id="split-view-mode-default">Split view mode (default)</h4>
<ul>
<li>Left side: original file (before changes)</li>
<li>Right side: modified file (after changes)</li>
<li>Changed lines highlighted (added = green, removed = red)</li>
</ul>
<h4 id="inline-view-mode">Inline view mode</h4>
<ul>
<li>Single editor</li>
<li>Removed lines shown with <code>-</code> prefix</li>
<li>Added lines shown with <code>+</code> prefix</li>
</ul>
<h4 id="to-toggle-between-views">To toggle between views</h4>
<ul>
<li>Command Palette: <code>Ctrl+Shift+P</code> (Mac: <code>Cmd+Shift+P</code>) → "Diff: Toggle Inline View"</li>
</ul>
<h3 id="screen-reader-diff-review-with-accessible-diff-viewer">Screen Reader Diff Review with Accessible Diff Viewer</h3>
<h4 id="recommended-workflow-for-screen-reader-users">Recommended workflow for screen reader users</h4>
<ol>
<li>Open a changed file from the PR detail view</li>
<li>Press <code>F7</code> to jump to the first diff hunk</li>
<li>Press <code>Alt+F2</code> (Mac: <code>Option+F2</code>) to open Accessible View</li>
<li>Read the hunk content:<ul>
<li>Unchanged lines (for context)</li>
<li>Removed lines (prefixed with <code>-</code>)</li>
<li>Added lines (prefixed with <code>+</code>)</li>
</ul>
</li>
<li>Press <code>Escape</code> to close Accessible View</li>
<li>Press <code>F7</code> to jump to the next hunk</li>
<li>Repeat until all hunks reviewed</li>
</ol>
<h4 id="example-accessible-diff-output">Example Accessible Diff output</h4>
<pre><code class="hljs language-text">Hunk 1 of 3 - lines 12 to 18
Unchanged: ## VS Code Setup
- Removed: This guide covers VS Code basics.
+ Added: This guide covers VS Code basics and accessibility features.
Unchanged:
Unchanged: **Prerequisites:** Day 1 completion</code></pre>
<h4 id="this-structured-reading-is-far-superior-to-navigating-the-visual-diff-manually">This structured reading is far superior to navigating the visual diff manually</h4>
<blockquote>
<p><strong>VS Code October 2025 update:</strong> Deleted lines (shown with the <code>-</code> prefix) are now fully selectable and copyable in the diff editor. Previously, deleted code could only be read, not selected. This is useful when you want to copy a deleted function signature, old variable name, or removed text for reference while writing your review comment.</p>
</blockquote>
<h3 id="flagging-issues-during-review">Flagging Issues During Review</h3>
<p>As you review, note any problems:</p>
<ol>
<li>Navigate to the specific line in the diff</li>
<li>Press <code>Shift+F10</code> (Mac: <code>Ctrl+Return</code>) for context menu</li>
<li>Select "Add Comment"</li>
<li>Type your comment in the input that appears</li>
<li>Choose "Single Comment" or "Start Review"</li>
</ol>
<p><strong>Single Comment</strong> posts immediately.<br><strong>Start Review</strong> saves your comments as a draft until you submit the full review (see Section 7).</p>
<h3 id="learning-cards-reviewing-pull-requests-in-vs-code">Learning Cards: Reviewing Pull Requests in VS Code</h3>
<p><strong>Screen reader users:</strong></p>
<ul>
<li>Press <code>F7</code> to enter the Accessible Diff Viewer and hear each hunk announced as "Change N of M" with clear "Removed:" and "Added:" labels -- this is far more reliable than navigating the raw split diff line by line</li>
<li>After reviewing a hunk, press <code>Escape</code> to return to the diff editor, then <code>Shift+F10</code> on the target line and select "Add Comment" to place inline feedback exactly where the issue is</li>
<li>Use <code>Alt+F2</code> (Accessible View) on any hunk for a plain-text rendering you can read with arrow keys at your own pace</li>
</ul>
<p><strong>Low-vision users:</strong></p>
<ul>
<li>Switch from split diff to inline diff (<code>Ctrl+Shift+P</code> then "Toggle Inline View") to keep all changes in a single column -- much easier at high zoom than scanning two narrow panes</li>
<li>Press <code>F7</code> / <code>Shift+F7</code> to jump between hunks; each hunk gains a visible focus outline that tracks your position so you do not lose your place at high magnification</li>
<li>Added lines show a green gutter bar and removed lines a red gutter bar; in High Contrast themes these become bold solid borders visible at any zoom level</li>
</ul>
<p><strong>Sighted users:</strong></p>
<ul>
<li>Scan the left gutter for green (added) and red (removed) bars to spot changes quickly, then click the <code>+</code> icon on any line to start an inline comment</li>
<li>Use the minimap on the right edge of the diff editor to see the distribution of changes across the file and click directly on coloured blocks to jump there</li>
<li>Right-click a file in the PR file list and choose "Open Changes" for a side-by-side diff, or "Open File" to see the final state without diff annotations</li>
</ul>
<h2 id="5-creating-a-pull-request-from-vs-code">5. Creating a Pull Request from VS Code</h2>
<h3 id="tool-cards-create-a-pull-request-from-your-editor">Tool Cards: Create a Pull Request (from your editor)</h3>
<p><strong>VS Code Desktop (primary for Day 2):</strong></p>
<ol>
<li><code>Ctrl+Shift+P</code> > <strong>GitHub Pull Requests: Create Pull Request</strong>.</li>
<li>Fill in the title, description, and base branch.</li>
<li>Click <strong>Create</strong>.</li>
</ol>
<p><strong>github.com (browser):</strong></p>
<ol>
<li>Push your branch, then click the <strong>Compare & pull request</strong> banner on the repo page.</li>
<li>Fill in the form and click <strong>Create pull request</strong>.</li>
</ol>
<p><strong>GitHub Desktop:</strong></p>
<ol>
<li>After pushing, click <strong>Create Pull Request</strong> -- this opens gitub.com with the form pre-filled.</li>
</ol>
<p><strong>Git CLI / GitHub CLI:</strong></p>
<pre><code class="hljs language-bash">git push -u origin your-branch
gh <span class="hljs-built_in">pr</span> create --title <span class="hljs-string">"Title"</span> --body <span class="hljs-string">"Description"</span></code></pre>
<p>After you've pushed commits to a feature branch, you can create a PR without leaving VS Code.</p>
<h3 id="prerequisites">Prerequisites</h3>
<ol>
<li>You've created a branch (see <a href="14-git-in-practice.html#3-branch-management">Git & Source Control: Branch Management</a>)</li>
<li>You've made commits</li>
<li>You've pushed the branch to GitHub (<code>Ctrl+Shift+P</code> / Mac: <code>Cmd+Shift+P</code> → "Git: Push")</li>
</ol>
<h3 id="creating-the-pr">Creating the PR</h3>
<h4 id="method-1-command-palette-recommended">Method 1: Command Palette (Recommended)</h4>
<ol>
<li><code>Ctrl+Shift+P</code> (Mac: <code>Cmd+Shift+P</code>)</li>
<li>Type "GitHub Pull Requests: Create"</li>
<li>Select "GitHub Pull Requests: Create Pull Request"</li>
<li>A form opens in the editor</li>
</ol>
<h4 id="method-2-source-control-panel">Method 2: Source Control Panel</h4>
<ol>
<li>Open Source Control: <code>Ctrl+Shift+G</code> (Mac: <code>Cmd+Shift+G</code>)</li>
<li>After pushing, a "Create Pull Request" button appears</li>
<li>Press <code>Enter</code> on that button</li>
</ol>
<h4 id="method-3-github-panel">Method 3: GitHub Panel</h4>
<ol>
<li>Open GitHub view (Activity Bar → GitHub icon)</li>
<li>Right-click your branch in the tree</li>
<li>Select "Create Pull Request"</li>
</ol>
<h3 id="filling-out-the-pr-form">Filling Out the PR Form</h3>
<p>The form has these fields:</p>
<h4 id="title-required">Title (required)</h4>
<ul>
<li>Auto-filled with your most recent commit message</li>
<li>Edit to make it descriptive (example: "Add Timeline View documentation")</li>
</ul>
<h4 id="description-optional-but-recommended">Description (optional but recommended)</h4>
<ul>
<li>Explain what changed and why</li>
<li>Reference the issue you're fixing: "Fixes #42"</li>
<li>If a PR template exists, VS Code loads it here (see Section 6)</li>
<li><strong>Copilot-assisted description:</strong> An AI sparkle icon in the description toolbar lets you generate a description from your commits. When a PR template exists, Copilot fills in the template sections intelligently rather than replacing the template - it populates the checklist items and description sections with content derived from your changes.</li>
</ul>
<h4 id="base-branch-target">Base branch (target)</h4>
<ul>
<li>Usually <code>main</code> or <code>develop</code></li>
<li>This is the branch your changes will merge into</li>
</ul>
<h4 id="compare-branch-source">Compare branch (source)</h4>
<ul>
<li>Your feature branch (auto-selected)</li>
<li>This is the branch with your changes</li>
</ul>
<h4 id="reviewers-optional">Reviewers (optional)</h4>
<ul>
<li>Select people to review your PR</li>
<li>Navigate the list with <code>Arrow</code> keys</li>
</ul>
<h4 id="labels-optional">Labels (optional)</h4>
<ul>
<li>Add labels like <code>documentation</code>, <code>accessibility</code>, <code>good-first-issue</code></li>
</ul>
<h4 id="milestone-optional">Milestone (optional)</h4>
<ul>
<li>Link the PR to a project milestone</li>
</ul>
<h4 id="draft-pr-checkbox">Draft PR checkbox</h4>
<ul>
<li>Check this if the PR is not ready for review yet</li>
<li>Unchecked = "Ready for review"</li>
</ul>
<h4 id="screen-reader-navigation">Screen reader navigation</h4>
<ul>
<li>All fields are standard form inputs</li>
<li><code>Tab</code> to move between fields</li>
<li>Use <code>Arrow</code> keys in dropdowns (reviewers, labels, milestones)</li>
</ul>
<h3 id="submitting-the-pr">Submitting the PR</h3>
<ol>
<li>Review all fields</li>
<li><code>Tab</code> to "Create" button</li>
<li>Press <code>Enter</code></li>
</ol>
<p>VS Code creates the PR on GitHub and shows a success message. The PR link appears in the notification - click it to open the PR on GitHub, or open it in the GitHub Pull Requests panel.</p>
<details>
<summary>Web alternative (github.com) - creating a PR</summary>
<p>Create a PR from your browser after pushing your branch:</p>
<ol>
<li>Navigate to the repository on GitHub</li>
<li>If you recently pushed, a yellow banner "Compare & pull request" appears - click it</li>
<li>Otherwise: click <strong>Pull requests</strong> tab, then <strong>New pull request</strong>, then select your branch</li>
<li>Fill in the title and description</li>
<li>Click <strong>Create pull request</strong></li>
</ol>
<p>See <a href="06-working-with-pull-requests.html#opening-a-pull-request">Working with Pull Requests - Opening a PR</a> for detailed screen reader steps.</p>
</details>
<details>
<summary>GitHub CLI (gh) alternative - creating a PR</summary>
<pre><code class="hljs language-bash"><span class="hljs-comment"># Interactive: prompts for title, body, base branch</span>
gh <span class="hljs-built_in">pr</span> create
<span class="hljs-comment"># Inline: provide details directly</span>
gh <span class="hljs-built_in">pr</span> create --title <span class="hljs-string">"Add Timeline View documentation"</span> --body <span class="hljs-string">"Fixes #42"</span>
<span class="hljs-comment"># Create as draft</span>
gh <span class="hljs-built_in">pr</span> create --draft
<span class="hljs-comment"># Open the form in your browser</span>
gh <span class="hljs-built_in">pr</span> create --web</code></pre>
</details>
<h3 id="learning-cards-creating-a-pull-request">Learning Cards: Creating a Pull Request</h3>
<details>
<summary>Screen reader users</summary>
<ul>
<li>Press <code>Ctrl+Shift+P</code> then type "GitHub Pull Requests: Create" -- the PR creation form opens with title, description, base branch, and reviewer fields navigable with <code>Tab</code></li>
<li>The description field supports full Markdown -- use <code>Ctrl+F</code> to find and replace <code><!-- comment --></code> placeholders in templates</li>
<li>After creating, your screen reader announces the new PR number; the PR detail view opens automatically</li>
</ul>
</details>
<details>
<summary>Low vision users</summary>
<ul>
<li>The PR creation form appears as a new editor tab with clearly labeled input fields for title, description, base branch, and reviewers</li>
<li>Use <code>Ctrl+=</code> to zoom the form if the input fields are small; the form reflows to accommodate larger text</li>
<li>The base branch dropdown is near the top of the form -- verify it shows <code>main</code> (or your target branch) before submitting</li>
</ul>
</details>
<details>
<summary>Sighted users</summary>
<ul>
<li>Click the "Create Pull Request" button in the Source Control panel header (appears when you have unpushed changes on a feature branch)</li>
<li>The PR form shows a preview pane for your Markdown description so you can verify formatting before submitting</li>
<li>Use the reviewer picker to search for and add specific GitHub users to request reviews</li>
</ul>
</details>
<h2 id="6-pull-request-description-templates">6. Pull Request Description Templates</h2>
<p>Many repositories include a <strong>PR template</strong> - a Markdown file that pre-fills the PR description with a checklist or structure.</p>
<h3 id="where-templates-are-stored">Where Templates Are Stored</h3>
<p>Common locations:</p>