解决按钮无障碍

2025-08-09 08:23:45 +08:00 · 2024-08-07 13:01:08 +08:00
parent c9099ca0a5
commit 14ff46b5cd
8 changed files with 89 additions and 2 deletions
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -246,6 +246,7 @@ function DangerItems() {
        subTitle={Locale.Settings.Danger.Reset.SubTitle}
      >
        <IconButton
+          aria={Locale.Settings.Danger.Reset.Title}
          text={Locale.Settings.Danger.Reset.Action}
          onClick={async () => {
            if (await showConfirm(Locale.Settings.Danger.Reset.Confirm)) {
@@ -260,6 +261,7 @@ function DangerItems() {
        subTitle={Locale.Settings.Danger.Clear.SubTitle}
      >
        <IconButton
+          aria={Locale.Settings.Danger.Clear.Title}
          text={Locale.Settings.Danger.Clear.Action}
          onClick={async () => {
            if (await showConfirm(Locale.Settings.Danger.Clear.Confirm)) {
@@ -513,6 +515,7 @@ function SyncItems() {
        >
          <div style={{ display: "flex" }}>
            <IconButton
+              aria={Locale.Settings.Sync.CloudState + Locale.UI.Config}
              icon={<ConfigIcon />}
              text={Locale.UI.Config}
              onClick={() => {
@@ -543,6 +546,7 @@ function SyncItems() {
        >
          <div style={{ display: "flex" }}>
            <IconButton
+              aria={Locale.Settings.Sync.LocalState + Locale.UI.Export}
              icon={<UploadIcon />}
              text={Locale.UI.Export}
              onClick={() => {
@@ -550,6 +554,7 @@ function SyncItems() {
              }}
            />
            <IconButton
+              aria={Locale.Settings.Sync.LocalState + Locale.UI.Import}
              icon={<DownloadIcon />}
              text={Locale.UI.Import}
              onClick={() => {
@@ -687,6 +692,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.CustomEndpoint.SubTitle}
      >
        <input
+          aria-label={Locale.Settings.Access.CustomEndpoint.Title}
          type="checkbox"
          checked={accessStore.useCustomConfig}
          onChange={(e) =>
@@ -706,6 +712,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.OpenAI.Endpoint.SubTitle}
      >
        <input
+          aria-label={Locale.Settings.Access.OpenAI.Endpoint.Title}
          type="text"
          value={accessStore.openaiUrl}
          placeholder={OPENAI_BASE_URL}
@@ -721,6 +728,8 @@ export function Settings() {
        subTitle={Locale.Settings.Access.OpenAI.ApiKey.SubTitle}
      >
        <PasswordInput
+          aria={Locale.Settings.ShowPassword}
+          aria-label={Locale.Settings.Access.OpenAI.ApiKey.Title}
          value={accessStore.openaiApiKey}
          type="text"
          placeholder={Locale.Settings.Access.OpenAI.ApiKey.Placeholder}
@@ -744,6 +753,7 @@ export function Settings() {
        }
      >
        <input
+          aria-label={Locale.Settings.Access.Azure.Endpoint.Title}
          type="text"
          value={accessStore.azureUrl}
          placeholder={Azure.ExampleEndpoint}
@@ -759,6 +769,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Azure.ApiKey.SubTitle}
      >
        <PasswordInput
+          aria-label={Locale.Settings.Access.Azure.ApiKey.Title}
          value={accessStore.azureApiKey}
          type="text"
          placeholder={Locale.Settings.Access.Azure.ApiKey.Placeholder}
@@ -774,6 +785,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Azure.ApiVerion.SubTitle}
      >
        <input
+          aria-label={Locale.Settings.Access.Azure.ApiVerion.Title}
          type="text"
          value={accessStore.azureApiVersion}
          placeholder="2023-08-01-preview"
@@ -798,6 +810,7 @@ export function Settings() {
        }
      >
        <input
+          aria-label={Locale.Settings.Access.Google.Endpoint.Title}
          type="text"
          value={accessStore.googleUrl}
          placeholder={Google.ExampleEndpoint}
@@ -813,6 +826,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Google.ApiKey.SubTitle}
      >
        <PasswordInput
+          aria-label={Locale.Settings.Access.Google.ApiKey.Title}
          value={accessStore.googleApiKey}
          type="text"
          placeholder={Locale.Settings.Access.Google.ApiKey.Placeholder}
@@ -828,6 +842,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Google.ApiVersion.SubTitle}
      >
        <input
+          aria-label={Locale.Settings.Access.Google.ApiVersion.Title}
          type="text"
          value={accessStore.googleApiVersion}
          placeholder="2023-08-01-preview"
@@ -843,6 +858,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Google.GoogleSafetySettings.SubTitle}
      >
        <Select
+          aria-label={Locale.Settings.Access.Google.GoogleSafetySettings.Title}
          value={accessStore.googleSafetySettings}
          onChange={(e) => {
            accessStore.update(
@@ -873,6 +889,7 @@ export function Settings() {
        }
      >
        <input
+          aria-label={Locale.Settings.Access.Anthropic.Endpoint.Title}
          type="text"
          value={accessStore.anthropicUrl}
          placeholder={Anthropic.ExampleEndpoint}
@@ -888,6 +905,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Anthropic.ApiKey.SubTitle}
      >
        <PasswordInput
+          aria-label={Locale.Settings.Access.Anthropic.ApiKey.Title}
          value={accessStore.anthropicApiKey}
          type="text"
          placeholder={Locale.Settings.Access.Anthropic.ApiKey.Placeholder}
@@ -903,6 +921,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Anthropic.ApiVerion.SubTitle}
      >
        <input
+          aria-label={Locale.Settings.Access.Anthropic.ApiVerion.Title}
          type="text"
          value={accessStore.anthropicApiVersion}
          placeholder={Anthropic.Vision}
@@ -924,6 +943,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Baidu.Endpoint.SubTitle}
      >
        <input
+          aria-label={Locale.Settings.Access.Baidu.Endpoint.Title}
          type="text"
          value={accessStore.baiduUrl}
          placeholder={Baidu.ExampleEndpoint}
@@ -939,6 +959,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Baidu.ApiKey.SubTitle}
      >
        <PasswordInput
+          aria-label={Locale.Settings.Access.Baidu.ApiKey.Title}
          value={accessStore.baiduApiKey}
          type="text"
          placeholder={Locale.Settings.Access.Baidu.ApiKey.Placeholder}
@@ -954,6 +975,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Baidu.SecretKey.SubTitle}
      >
        <PasswordInput
+          aria-label={Locale.Settings.Access.Baidu.SecretKey.Title}
          value={accessStore.baiduSecretKey}
          type="text"
          placeholder={Locale.Settings.Access.Baidu.SecretKey.Placeholder}
@@ -975,6 +997,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Tencent.Endpoint.SubTitle}
      >
        <input
+          aria-label={Locale.Settings.Access.Tencent.Endpoint.Title}
          type="text"
          value={accessStore.tencentUrl}
          placeholder={Tencent.ExampleEndpoint}
@@ -990,6 +1013,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Tencent.ApiKey.SubTitle}
      >
        <PasswordInput
+          aria-label={Locale.Settings.Access.Tencent.ApiKey.Title}
          value={accessStore.tencentSecretId}
          type="text"
          placeholder={Locale.Settings.Access.Tencent.ApiKey.Placeholder}
@@ -1005,6 +1029,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Tencent.SecretKey.SubTitle}
      >
        <PasswordInput
+          aria-label={Locale.Settings.Access.Tencent.SecretKey.Title}
          value={accessStore.tencentSecretKey}
          type="text"
          placeholder={Locale.Settings.Access.Tencent.SecretKey.Placeholder}
@@ -1029,6 +1054,7 @@ export function Settings() {
        }
      >
        <input
+          aria-label={Locale.Settings.Access.ByteDance.Endpoint.Title}
          type="text"
          value={accessStore.bytedanceUrl}
          placeholder={ByteDance.ExampleEndpoint}
@@ -1044,6 +1070,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.ByteDance.ApiKey.SubTitle}
      >
        <PasswordInput
+          aria-label={Locale.Settings.Access.ByteDance.ApiKey.Title}
          value={accessStore.bytedanceApiKey}
          type="text"
          placeholder={Locale.Settings.Access.ByteDance.ApiKey.Placeholder}
@@ -1068,6 +1095,7 @@ export function Settings() {
        }
      >
        <input
+          aria-label={Locale.Settings.Access.Alibaba.Endpoint.Title}
          type="text"
          value={accessStore.alibabaUrl}
          placeholder={Alibaba.ExampleEndpoint}
@@ -1083,6 +1111,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Alibaba.ApiKey.SubTitle}
      >
        <PasswordInput
+          aria-label={Locale.Settings.Access.Alibaba.ApiKey.Title}
          value={accessStore.alibabaApiKey}
          type="text"
          placeholder={Locale.Settings.Access.Alibaba.ApiKey.Placeholder}
@@ -1107,6 +1136,7 @@ export function Settings() {
        }
      >
        <input
+          aria-label={Locale.Settings.Access.Moonshot.Endpoint.Title}
          type="text"
          value={accessStore.moonshotUrl}
          placeholder={Moonshot.ExampleEndpoint}
@@ -1122,6 +1152,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Moonshot.ApiKey.SubTitle}
      >
        <PasswordInput
+          aria-label={Locale.Settings.Access.Moonshot.ApiKey.Title}
          value={accessStore.moonshotApiKey}
          type="text"
          placeholder={Locale.Settings.Access.Moonshot.ApiKey.Placeholder}
@@ -1146,6 +1177,7 @@ export function Settings() {
        }
      >
        <input
+          aria-label={Locale.Settings.Access.Stability.Endpoint.Title}
          type="text"
          value={accessStore.stabilityUrl}
          placeholder={Stability.ExampleEndpoint}
@@ -1161,6 +1193,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Stability.ApiKey.SubTitle}
      >
        <PasswordInput
+          aria-label={Locale.Settings.Access.Stability.ApiKey.Title}
          value={accessStore.stabilityApiKey}
          type="text"
          placeholder={Locale.Settings.Access.Stability.ApiKey.Placeholder}
@@ -1184,6 +1217,7 @@ export function Settings() {
        }
      >
        <input
+          aria-label={Locale.Settings.Access.Iflytek.Endpoint.Title}
          type="text"
          value={accessStore.iflytekUrl}
          placeholder={Iflytek.ExampleEndpoint}
@@ -1199,6 +1233,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Iflytek.ApiKey.SubTitle}
      >
        <PasswordInput
+          aria-label={Locale.Settings.Access.Iflytek.ApiKey.Title}
          value={accessStore.iflytekApiKey}
          type="text"
          placeholder={Locale.Settings.Access.Iflytek.ApiKey.Placeholder}
@@ -1215,6 +1250,7 @@ export function Settings() {
        subTitle={Locale.Settings.Access.Iflytek.ApiSecret.SubTitle}
      >
        <PasswordInput
+          aria-label={Locale.Settings.Access.Iflytek.ApiSecret.Title}
          value={accessStore.iflytekApiSecret}
          type="text"
          placeholder={Locale.Settings.Access.Iflytek.ApiSecret.Placeholder}
@@ -1244,6 +1280,7 @@ export function Settings() {
          <div className="window-action-button"></div>
          <div className="window-action-button">
            <IconButton
+              aria={Locale.UI.Close}
              icon={<CloseIcon />}
              onClick={() => navigate(Path.Home)}
              bordered
@@ -1267,6 +1304,8 @@ export function Settings() {
              open={showEmojiPicker}
            >
              <div
+                aria-label={Locale.Settings.Avatar}
+                tabIndex={0}
                className={styles.avatar}
                onClick={() => {
                  setShowEmojiPicker(!showEmojiPicker);
@@ -1304,6 +1343,7 @@ export function Settings() {

          <ListItem title={Locale.Settings.SendKey}>
            <Select
+              aria-label={Locale.Settings.SendKey}
              value={config.submitKey}
              onChange={(e) => {
                updateConfig(
@@ -1322,6 +1362,7 @@ export function Settings() {

          <ListItem title={Locale.Settings.Theme}>
            <Select
+              aria-label={Locale.Settings.Theme}
              value={config.theme}
              onChange={(e) => {
                updateConfig(
@@ -1339,6 +1380,7 @@ export function Settings() {

          <ListItem title={Locale.Settings.Lang.Name}>
            <Select
+              aria-label={Locale.Settings.Lang.Name}
              value={getLang()}
              onChange={(e) => {
                changeLang(e.target.value as any);
@@ -1357,6 +1399,7 @@ export function Settings() {
            subTitle={Locale.Settings.FontSize.SubTitle}
          >
            <InputRange
+              aria={Locale.Settings.FontSize.Title}
              title={`${config.fontSize ?? 14}px`}
              value={config.fontSize}
              min="12"
@@ -1376,6 +1419,7 @@ export function Settings() {
            subTitle={Locale.Settings.FontFamily.SubTitle}
          >
            <input
+              aria-label={Locale.Settings.FontFamily.Title}
              type="text"
              value={config.fontFamily}
              placeholder={Locale.Settings.FontFamily.Placeholder}
@@ -1392,6 +1436,7 @@ export function Settings() {
            subTitle={Locale.Settings.AutoGenerateTitle.SubTitle}
          >
            <input
+              aria-label={Locale.Settings.AutoGenerateTitle.Title}
              type="checkbox"
              checked={config.enableAutoGenerateTitle}
              onChange={(e) =>
@@ -1408,6 +1453,7 @@ export function Settings() {
            subTitle={Locale.Settings.SendPreviewBubble.SubTitle}
          >
            <input
+              aria-label={Locale.Settings.SendPreviewBubble.Title}
              type="checkbox"
              checked={config.sendPreviewBubble}
              onChange={(e) =>
@@ -1428,6 +1474,7 @@ export function Settings() {
            subTitle={Locale.Settings.Mask.Splash.SubTitle}
          >
            <input
+              aria-label={Locale.Settings.Mask.Splash.Title}
              type="checkbox"
              checked={!config.dontShowMaskSplashScreen}
              onChange={(e) =>
@@ -1445,6 +1492,7 @@ export function Settings() {
            subTitle={Locale.Settings.Mask.Builtin.SubTitle}
          >
            <input
+              aria-label={Locale.Settings.Mask.Builtin.Title}
              type="checkbox"
              checked={config.hideBuiltinMasks}
              onChange={(e) =>
@@ -1463,6 +1511,7 @@ export function Settings() {
            subTitle={Locale.Settings.Prompt.Disable.SubTitle}
          >
            <input
+              aria-label={Locale.Settings.Prompt.Disable.Title}
              type="checkbox"
              checked={config.disablePromptHint}
              onChange={(e) =>
@@ -1482,6 +1531,7 @@ export function Settings() {
            )}
          >
            <IconButton
+              aria={Locale.Settings.Prompt.List + Locale.Settings.Prompt.Edit}
              icon={<EditIcon />}
              text={Locale.Settings.Prompt.Edit}
              onClick={() => setShowPromptModal(true)}
@@ -1503,6 +1553,7 @@ export function Settings() {
                    subTitle={Locale.Settings.Access.Provider.SubTitle}
                  >
                    <Select
+                      aria-label={Locale.Settings.Access.Provider.Title}
                      value={accessStore.provider}
                      onChange={(e) => {
                        accessStore.update(
@@ -1567,6 +1618,7 @@ export function Settings() {
            subTitle={Locale.Settings.Access.CustomModel.SubTitle}
          >
            <input
+              aria-label={Locale.Settings.Access.CustomModel.Title}
              type="text"
              value={config.customModels}
              placeholder="model1,model2,model3"