refactor(settings): replace MUI Slider with a native range input

[vbudhram]

Because

• The leftover slider.css clipped the new zoom control to nothing. Its .AvatarCropper input rule set clip: rect(0,0,0,0) and position: absolute to hide MUI's proxy input, and the native <input type="range"> sits inside the same .AvatarCropper container, so the rule matched it too.
• The zoom test drove the control with fireEvent.change, which only proves a synthetic value assignment. .claude/rules/testing/react.md asks for userEvent.

This pull request

• Deletes slider.css and its @import from tailwind.css. Every selector in the file was .AvatarCropper or .MuiSlider-*, and only PageAvatar/index.tsx uses .AvatarCropper.
• Rewrites the zoom test in PageAvatar/index.test.tsx to use userEvent.setup(), with user.upload() for the file input and a user.click() on zoom-in-btn that drives the slider value to 1.1.
• Keeps one fireEvent.change for the thumb move, with a comment. jsdom implements no default action for a range input, so neither a pointer drag nor an arrow key moves the thumb.

Issue that this pull request solves

Closes: https://mozilla-hub.atlassian.net/browse/FXA-10214

Checklist

Put an x in the boxes that apply

• My commit is GPG signed.
• If applicable, I have modified or added tests which pass locally.
• I have added necessary documentation (if appropriate).
• I have verified that my changes render correctly in RTL (if appropriate).
• I have manually reviewed all AI generated code.

How to review (Optional)

• Key files/areas to focus on: the deletion of packages/fxa-settings/src/styles/slider.css, and the zoom test in PageAvatar/index.test.tsx.
• Suggested review order: the CSS deletion first, then the test.
• Risky or complex parts: nothing in the diff, but please open the avatar page and confirm the zoom slider now draws. That is exactly what the clipping bug hid, and no automated check in this branch covers it.

Screenshots (Optional)

Please attach the screenshots of the changes made in case of change in user interface.

Other information (Optional)

Two calls for the reviewer. Both come from the parent commit, not this diff, so I left them alone.

The thumb is w-4 h-4, so 16px. MUI's was 24px, and WCAG 2.5.8 asks for 24x24. The fix is w-6 h-6 on both vendor thumb selectors plus an explicit h-6 on the input. Worth doing before merge if you want the old touch target back.

The deleted rule also carried direction: ltr. A native range input follows page direction instead, so the zoom control now reverses in RTL locales. That is the browser default and probably what we want, but it is a change and nothing here checks it.

Local results: node scripts/test.js --testPathPattern PageAvatar 12 passed, 0 failed. npx eslint . in fxa-settings exits 0. tsc --noEmit clean.

[Copilot]

Pull request overview

Replaces the avatar zoom MUI Slider with a native range input and removes its dependency subtree.

Changes:

• Adds native range handling and vendor-specific styling.
• Adds an interaction test.
• Removes MUI/Emotion dependencies and lockfile entries.

Reviewed changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 2 comments.

File	Description
PageAvatar/index.tsx	Implements the native zoom slider.
PageAvatar/index.test.tsx	Tests slider accessibility and updates.
package.json	Removes obsolete dependencies.
yarn.lock	Removes associated dependency trees.

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.