优化Next.js/Material-UI登录组件的国家码选择器：提升可访问性与UX

基础<select>实现国家码选择虽然简单，但面对大量国家选项时，用户查找效率低、视觉识别性差，且难以满足复杂交互需求。下面给出两个兼顾可访问性和用户体验的替代方案，适配React + Material-UI技术栈：

方案1：基于Autocomplete的可搜索国家码选择器 #

利用Material-UI的Autocomplete组件实现带搜索功能的国家码选择，解决大列表查找痛点，同时原生支持键盘导航和屏幕阅读器适配。

核心实现代码 #

import { useState } from 'react';
import { Autocomplete, TextField, Box, Button } from '@mui/material';
import PhoneIcon from '@mui/icons-material/Phone';

// 国家码数据示例，可扩展为完整列表
const countryCodes = [
  { code: '+86', name: 'China', flag: '🇨🇳' },
  { code: '+1', name: 'United States', flag: '🇺🇸' },
  { code: '+44', name: 'United Kingdom', flag: '🇬🇧' },
  // 更多国家...
];

export default function PhoneLogin() {
  const [selectedCountry, setSelectedCountry] = useState(countryCodes[0]);
  const [phoneNumber, setPhoneNumber] = useState('');

  return (
    <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', maxWidth: 500, mx: 'auto', mt: 4 }}>
      {/* 国家码选择器 */}
      <Autocomplete
        value={selectedCountry}
        onChange={(event, newValue) => {
          if (newValue) setSelectedCountry(newValue);
        }}
        options={countryCodes}
        getOptionLabel={(option) => `${option.flag} ${option.name} (${option.code})`}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Country Code"
            variant="outlined"
            sx={{ width: 200 }}
            InputProps={{
              ...params.InputProps,
              startAdornment: null, // 移除默认下拉图标，用自定义内容
            }}
          />
        )}
        aria-label="Select country code"
      />

      {/* 手机号输入框 */}
      <TextField
        label="Phone Number"
        variant="outlined"
        value={phoneNumber}
        onChange={(e) => setPhoneNumber(e.target.value)}
        InputProps={{
          startAdornment: <PhoneIcon sx={{ mr: 1 }} />,
        }}
        // 根据选中国家码限制输入长度
        inputProps={{ maxLength: selectedCountry.code === '+86' ? 11 : 10 }}
        sx={{ flex: 1 }}
      />

      {/* 登录按钮 */}
      <Button variant="contained" onClick={() => console.log('Sign In', selectedCountry.code + phoneNumber)}>
        Sign In
      </Button>
    </Box>
  );
}

优势说明 #

• 用户体验：支持搜索国家名/代码快速定位，搭配国旗图标提升视觉识别效率；可结合IP定位逻辑预选中用户所在国家，减少操作步骤。
• 可访问性：Autocomplete原生支持键盘导航（上下箭头选择、回车确认、Esc关闭），自带屏幕阅读器友好的aria属性，无需额外处理基础交互的无障碍适配。

方案2：自定义分组式国家码选择器（基于Popper） #

如果需要按地区分组展示国家（比如亚洲、欧洲），可以用Material-UI的Popper组件封装自定义下拉面板，完全控制UI样式和交互逻辑。

核心实现代码 #

import { useState, useRef } from 'react';
import { TextField, Popper, Paper, List, ListItem, ListItemText, Box, Button } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

// 分组国家数据示例
const groupedCountries = {
  Asia: [
    { code: '+86', name: 'China', flag: '🇨🇳' },
    { code: '+81', name: 'Japan', flag: '🇯🇵' },
  ],
  Europe: [
    { code: '+44', name: 'United Kingdom', flag: '🇬🇧' },
    { code: '+33', name: 'France', flag: '🇫🇷' },
  ],
};

export default function GroupedPhoneLogin() {
  const [selectedCountry, setSelectedCountry] = useState({ code: '+86', name: 'China', flag: '🇨🇳' });
  const [phoneNumber, setPhoneNumber] = useState('');
  const [open, setOpen] = useState(false);
  const anchorRef = useRef(null);

  const handleToggle = () => setOpen((prev) => !prev);
  const handleClose = (event) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) return;
    setOpen(false);
  };

  // 键盘导航支持：上下箭头切换选项，Esc关闭面板
  const handleKeyDown = (event) => {
    if (event.key === 'Escape') setOpen(false);
    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
      event.preventDefault();
      // 此处可实现选项焦点切换逻辑
    }
  };

  return (
    <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', maxWidth: 500, mx: 'auto', mt: 4 }}>
      {/* 国家码触发框 */}
      <TextField
        ref={anchorRef}
        variant="outlined"
        label="Country Code"
        value={`${selectedCountry.flag} ${selectedCountry.code}`}
        onClick={handleToggle}
        InputProps={{
          endAdornment: <ExpandMoreIcon />,
          readOnly: true,
        }}
        sx={{ width: 200 }}
        aria-haspopup="listbox"
        aria-expanded={open}
        onKeyDown={handleKeyDown}
      />

      {/* 自定义下拉面板 */}
      <Popper open={open} anchorEl={anchorRef.current} placement="bottom-start">
        <Paper sx={{ width: 250, maxHeight: 300, overflow: 'auto' }}>
          {Object.entries(groupedCountries).map(([region, countries]) => (
            <Box key={region} sx={{ px: 2, py: 1, bgcolor: '#f5f5f5', fontWeight: 'bold' }}>
              {region}
              <List>
                {countries.map((country) => (
                  <ListItem
                    key={country.code}
                    button
                    onClick={() => {
                      setSelectedCountry(country);
                      setOpen(false);
                    }}
                    sx={{ '&:hover': { bgcolor: '#e0e0e0' } }}
                    role="option"
                  >
                    <ListItemText primary={`${country.flag} ${country.name}`} secondary={country.code} />
                  </ListItem>
                ))}
              </List>
            </Box>
          ))}
        </Paper>
      </Popper>

      {/* 手机号输入框 */}
      <TextField
        label="Phone Number"
        variant="outlined"
        value={phoneNumber}
        onChange={(e) => setPhoneNumber(e.target.value)}
        sx={{ flex: 1 }}
        inputProps={{ maxLength: selectedCountry.code === '+86' ? 11 : 10 }}
      />

      <Button variant="contained" onClick={() => console.log('Sign In', selectedCountry.code + phoneNumber)}>
        Sign In
      </Button>
    </Box>
  );
}

优势说明 #

• 用户体验：按地区分组降低查找成本，完全自定义的UI可以100%匹配设计稿；点击空白区域自动关闭面板，符合用户交互习惯。
• 可访问性：手动设置aria-haspopup、aria-expanded属性，实现键盘导航逻辑，确保屏幕阅读器能正确识别组件状态和选项。

通用优化建议 #

1. 自动预选国家：通过前端IP定位解析用户所在国家，自动选中匹配的国家码，减少用户操作步骤。
2. 实时格式校验：根据选中的国家码，实时校验手机号格式（长度、前缀规则），并在输入框下方显示友好的错误提示。
3. 视觉反馈强化：选中国家码后高亮显示，输入手机号时若格式错误，输入框边框变红并提示规则。
4. 键盘全流程支持：确保从国家码选择、手机号输入到点击登录按钮，都可以通过Tab、回车等键盘操作完成，无需依赖鼠标。

内容的提问来源于stack exchange，提问作者kvk30