fix (cherry-pick): Don't show AccountListMenu back button by default (#…

…27152)

## **Description**

A recent change
(#26271) made it such
that the "<" (back button) in the `AccountListMenu` component always
shows. We do *not* want this when the `AccountListMenu` first opens, so
this PR ensures that.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26940?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Open the `AccountListMenu`
2. Don't see the `<`
3. Click the "Add account" button
4. See the `<`
5. Click the `<`, go back to main menu

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<img width="891" alt="SCR-20240904-pens"
src="https://github.com/user-attachments/assets/ee4b9cdc-503d-4d97-99a0-f7045ba1d503">


### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/components/component-library/modal-header/modal-header.types.ts

@@ -17,7 +17,7 @@ export interface ModalHeaderProps extends HeaderBaseStyleUtilityProps {
    * The onClick handler for the back `ButtonIcon`
    * When passed this will allow for the back `ButtonIcon` to show
    */
-  onBack?: () => void;
+  onBack?: () => void | undefined;
   /**
    * The props to pass to the back `ButtonIcon`
    */

ui/components/multichain/account-list-menu/account-list-menu.test.tsx

@@ -117,6 +117,7 @@ describe('AccountListMenu', () => {
 
     expect(getByPlaceholderText('Search accounts')).toBeInTheDocument();
     expect(getByText('Add account or hardware wallet')).toBeInTheDocument();
+    expect(document.querySelector('[aria-label="Back"]')).toStrictEqual(null);
   });
 
   it('displays accounts for list and filters by search', () => {

ui/components/multichain/account-list-menu/account-list-menu.tsx

@@ -265,7 +265,7 @@ export const AccountListMenu = ({
   );
 
   // eslint-disable-next-line no-empty-function
-  let onBack = () => {};
+  let onBack;
   if (actionMode !== ACTION_MODES.LIST) {
     if (actionMode === ACTION_MODES.MENU) {
       onBack = () => setActionMode(ACTION_MODES.LIST);