Design note: Breadcrumb wraps a semantic <nav aria-label="Breadcrumb">, giving screen readers a distinct navigation landmark. The isCurrent prop renders aria-current="page" on the final item instead of making it a link — linking to the page you are already on adds keyboard noise with no benefit.

BIOL 101: Introduction to Biology

Spring 2026 · 142 students enrolled

Design note: H1 is used exactly once per page and represents its unique title. It is the primary entry point for heading-based navigation in screen readers (NVDA, JAWS, VoiceOver all provide a "jump to H1" shortcut). The enrollment subtitle uses Text as="p" — not a heading — because it supplements the title without introducing a new document section.

Design note: An aria-label on the <section> creates a named landmark region without requiring a visible heading — appropriate here because the stat cards themselves communicate the section's purpose visually. Grid cols={4} gap="md" (1.5 rem / gap-6) gives breathing room without waste. All four metrics sit at the same information hierarchy, so a uniform grid is semantically correct over a Stack. Davis StatCard renders the trend direction as both a coloured icon and text — colour is never the sole differentiator (WCAG 1.4.1).

Students Enrolled

142

+12since last term

Assignments Published

0 change

Avg. Completion Rate

78%

+5%vs last week

Overdue Submissions

-3since Monday

Course Notices

Design note: H2 marks a landmark section subordinate to the H1 page title. Davis Alert always renders role="alert", which live-announces the message to screen readers on mount — so use it intentionally. Colour is paired with a distinct icon per variant (WCAG 1.4.1). The success alert is dismissible because once acknowledged it has served its purpose; warning and info persist because they require ongoing user attention.

Submission deadline tonight

Assignment 5 is due at 11:59 PM. 23 students have not yet submitted.

Grading rubric updated

The rubric for Assignment 3 was updated on April 10. Please review before grading.

Midterm grades published

Grades for the Midterm Exam have been released to students.

Course Content

Design note: Tabs organise parallel content categories — Assignments, Students, Grades, and Settings — so only one panel is in the DOM at a time. Davis Tabs is built on HeadlessUI, which manages role="tablist", role="tab", aria-selected, and role="tabpanel" automatically. Arrow-key navigation between tabs is provided out of the box (WCAG 2.1 keyboard pattern for tabs). No extra ARIA attributes are needed from the caller.

Assignments

24 total

Design note: H3 is used here because this heading is within the H2 "Course Content" region — maintaining H1 › H2 › H3 hierarchy with no skipped levels (WCAG 1.3.1). A plain semantic <table> is used rather than the full DataTable from @libretexts/davis-react-table because this is a read-only display with no sorting, filtering, or virtual scrolling. A <caption className="sr-only"> is required by WCAG 1.3.1 so screen readers can announce the table's purpose. Every <th> carries scope="col" to associate headers with data cells programmatically.

Course assignments with type, due date, publication status, and submission counts
Title	Type	Due Date	Status	Submissions
Lab Report 1: Cell Biology	Lab Report	Apr 14, 2026	Published	128 / 142
Reading Quiz — Chapter 3	Quiz	Apr 16, 2026	Published	97 / 142
Midterm Essay	Essay	Apr 21, 2026	Published	0 / 142
Group Presentation	Presentation	May 1, 2026	Draft	0 / 142
Final Exam	Exam	May 15, 2026	Draft	0 / 142

Learning Resources

Design note: H2 "Learning Resources" is a second landmark section, parallel to "Course Content" — both are immediate children of the H1 content area. Grid cols={3} gap="md" works well at the content width established by the layout container. Placing actions in Card.Footer rather than Card.Body ensures the footer always aligns at the same vertical position regardless of body content length, keeping the grid visually balanced. variant="outline" is used (rather than elevated) because these cards are content items, not interactive surfaces — a subtle border communicates grouping without implying clickability.

Lecture Slides — Week 1

PDF · 4.2 MB · Uploaded April 8

Available

Lab Safety Guidelines

PDF · 1.1 MB · Uploaded April 1

Available

Supplementary Reading: DNA Replication

PDF · 2.8 MB · Uploaded April 10

Available