# 02 - M1.5 Revision Sheet & Interview Q&A

Short revision summary for **Milestone 1.5**.

---

## 1. Quick Summary

- **What We Built:** Floating chat bubble button and collapsible chat panel UI shell rendered inside Shadow DOM with Vanilla JS and CSS.
- **State Management:** Simple `isOpen` boolean toggling `.hidden` class on the chat panel.
- **Accessibility:** Semantic `<button>` elements with dynamic `aria-label` attributes and focus management.
- **Isolation:** Host page global styles (such as red containers in `demo.html`) do not affect the widget UI.

---

## 2. 5 Key Interview Q&As

#### Q1: How does the chat panel open and close?
**Answer:** A `toggleChat()` function flips an `isOpen` boolean variable and toggles the `.hidden` CSS class (`display: none`) on `.chat-panel`.

#### Q2: How is accessibility handled in M1.5?
**Answer:** Interactive items use semantic `<button>` elements, dynamic `aria-label` descriptions ("Open Chat Window" / "Close Chat Window"), and automatic keyboard focus handling.

#### Q3: Why is the chat input disabled in M1.5?
**Answer:** M1.5 focuses strictly on UI structure and DOM state. Backend session initialization and message routing belong to later milestones (M1.7 and M1.9).

#### Q4: Where are the CSS styles defined?
**Answer:** All CSS is encapsulated within a `<style>` element appended directly inside the Shadow Root (`shadow.appendChild(style)`).

#### Q5: Did M1.5 modify any backend code?
**Answer:** No. M1.5 is strictly frontend UI. All 6 backend unit tests pass without modification.