带Aria属性的搜索框Placeholder不显示及清空后NVDA播报异常问题

1. 搜索框Placeholder搭配Aria属性不生效问题 #

原因：你的input输入框上配置了aria-label属性，该属性的无障碍播报优先级高于原生placeholder，会导致NVDA等屏幕阅读器优先读取aria-label的内容，不会识别placeholder，且当前aria-label的内容存在拼写错误。
修复方案：

• 若无需自定义无障碍标签，直接删除input上冗余的aria-label属性即可，原生placeholder本身可被主流屏幕阅读器正常识别。
• 若需要保留自定义标签，将aria-label的内容修改为与placeholder一致即可，同时不会影响placeholder的视觉展示。

2. 清空输入后屏幕阅读器播报总人数问题 #

原因：你的aria-live实时播报区域没有和搜索状态绑定，当输入清空后，filterPeople会返回全量人员列表，此时播报区域仍会更新计数并触发朗读。
修复方案：
修改aria-live区域的属性绑定逻辑，仅当搜索词不为空时才输出结果计数，搜索词为空时返回空内容即可，同时删除div上无效的alt属性（alt仅适用于img标签，普通div配置无意义）：

<div class="sr-only" aria-atomic="true" aria-live="assertive">
    <span class="sr-only" v-bind:aria-label="search ? 'Showing '+filterPeople.length + ' results.' : ''"></span>
</div> 

额外代码问题修正 #

你当前的搜索结果列表代码存在变量引用错误：循环变量为person，但内部属性错误引用了不存在的city，点击事件也错误调用了addCity方法，需修正为对应变量和方法，否则列表无法正常渲染：

<div v-show="search != ''" class="wc-select-city">
    <div v-for="(person, index) in filterPeople" :key="person.Id + '-' + index" class="wc-result-people" tabindex="0" :value="person.Id" @click.stop.prevent="addPerson(person.Id)" @keyup.enter.stop.prevent="addPerson(person.Id)">
        <p :title="person.PersonName">
            {{ person.PersonName }}
        </p>
    </div>
</div>

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