webdle
day 4
Build an accessible settings panel with grouped form controls that supports keyboard navigation and screen reader announcements.

Requirements:
- Create a settings panel with at least 3 setting groups, each with a fieldset element and legend (class 'setting-group')
- Each fieldset should have a legend that describes the group (e.g., "Display Settings", "Sound Settings", "Privacy Settings")
- Include at least 2 checkbox inputs per group with accompanying labels
- All form elements must be properly associated with labels using `for` and `id` attributes
- Add a "Save Changes" button with id 'save-btn' that is keyboard accessible
- Implement keyboard navigation: Tab to move between controls, Shift+Tab to go backward, and focus must be visible (outline or border change)
- Use ARIA attributes: add `role="group"` to setting groups, use `aria-label` on the main panel container with id 'settings-panel'
- Apply monochromatic styling (grayscale: blacks, whites, grays only) with a settings-focused aesthetic
- Focused elements must have a visible focus indicator (at least 2px border or outline in a contrasting shade of gray)
- Add aria-live region with id 'feedback-message' that announces "Settings saved successfully" when Save Changes is clicked
- The aria-live region must have `aria-live="polite"` and `aria-atomic="true"` attributes
Preview
Tests
    day 3
    day 5