feat- 活跃告警列表顶部工具栏新增 “显示触发时值” 开关，打开后可展示触发时值。 - #2237

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== locate file =="
git ls-files | rg '^src/pages/alertCurEvent/pages/List/index\.tsx$' || true

echo "== relevant lines =="
if [ -f src/pages/alertCurEvent/pages/List/index.tsx ]; then
  nl -ba src/pages/alertCurEvent/pages/List/index.tsx | sed -n '360,440p'
fi

echo "== imports and SWITCH deps =="
nl -ba src/pages/alertCurEvent/pages/List/index.tsx | sed -n '1,80p'
rg -n "from 'antd'|from \"antd\"|import .*Switch|SHOW_TRIGGER_VALUE_CACHE_KEY|showTriggerValue" src/pages/alertCurEvent/pages/List/index.tsx

Repository: n9e/fe

Length of output: 268

🌐 Web query:

React aria-label inaccessible name verification assistive technology aria-label switch antd Switch accessibility

💡 Result:

The "inaccessible name" issue in React and the use of aria-label with components like Ant Design's Switch are governed by established web accessibility (WCAG) standards. Accessible Name Requirements Assistive technologies, such as screen readers, identify interactive elements by their "accessible name." When an element is interactive (e.g., a switch or button), it must have a clear, descriptive name [1][2]. The "inaccessible name" error typically occurs when an element lacks this identifier [1][3]. Best Practices for Naming 1. Native Labels First: Always prefer native HTML labels (like for inputs) [1][3]. 2. Visible Text: If a control has visible text (e.g., a "Save" button), the accessible name should ideally match or include that text [4]. WCAG 2.1 Success Criterion 2.5.3 (Label in Name) mandates that if visible text exists, the accessible name must contain it [4]. 3. aria-labelledby: Use this attribute to reference existing visible text on the page [5][2]. This is preferred over aria-label because it supports automatic translation if the page text is translated [5]. 4. aria-label: Use this only as a fallback when no visible text exists (e.g., icon-only buttons) [5][2][3]. It is not automatically translated by browser tools, which can cause accessibility gaps for non-English speakers [5]. Ant Design (antd) Switch Accessibility The antd Switch component is designed to toggle between two states [6][7]. Because it is a custom interactive component, you must ensure it has an accessible name [1]. - If the Switch has no visible label, you should provide an accessible name via the aria-label attribute [1][2]. - While the antd Switch API (as seen in its source code and documentation) does not explicitly expose an aria-label prop in its public type definitions, you can pass it through via HTML attribute passthrough (standard React behavior for native attributes) or by wrapping it in a labeled structure [8][6][7]. Troubleshooting "Missing Display Name" The "Component definition is missing display name" error you may be encountering while working with custom components or wrappers is a linting warning, not a functional accessibility error [9][10]. It occurs when ESLint cannot automatically infer the name of a component (common with React.forwardRef or anonymous arrow functions) [9][11][12]. You can resolve this by: - Setting the displayName property explicitly: MyComponent.displayName = 'MyComponent'; [10][11][12] - Using a named function instead of an anonymous arrow function [11][13]. Verification To verify your accessibility implementation: - Use Browser DevTools to inspect the "Accessibility" tree and check the "computed name" of your element [3]. - Test with screen readers (e.g., NVDA, VoiceOver) to ensure the component is announced correctly [3]. - Ensure your implementation does not violate the "Label in Name" rule if visible text is present [4]. Sources: [1][4][5][2][3][8][14][6][7][15][9][10][11][12][13]

Citations:

• 1: https://reactspectrum.blob.core.windows.net/reactspectrum/33946eb4d799eceb12c57205c900db1629430340/docs/react-aria/accessibility.html
• 2: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label
• 3: https://www.levelaccess.com/blog/aria-labels-and-accessible-names-a-developers-guide/
• 4: https://rocketvalidator.com/accessibility-validation/axe/4.11/label-content-name-mismatch
• 5: https://devencyclopedia.com/blog/aria-in-react-accessibility
• 6: https://ant-design.antgroup.com/components/switch
• 7: https://ant.design/components/switch.md
• 8: https://github.com/ant-design/ant-design/blob/master/components/switch/index.tsx
• 9: https://stackoverflow.com/questions/52992932/component-definition-is-missing-display-name-react-display-name
• 10: https://bobbyhadz.com/blog/react-component-is-missing-display-name
• 11: https://stackoverflow.com/questions/71877298/how-to-fix-the-component-definition-is-missing-display-name-error
• 12: https://www.eslint-react.xyz/docs/rules/no-missing-component-display-name
• 13: https://stackoverflow.com/questions/67992894/component-definition-is-missing-display-name-for-forwardref
• 14: https://ant.design/components/switch/?locale=en-US
• 15: https://ant.design/components/switch/?amp=1

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== relevant content =="
awk 'NR>=360 && NR<=440 { printf "%5d: %s\n", NR, $0 }' src/pages/alertCurEvent/pages/List/index.tsx

echo "== imports and related usages =="
awk 'NR>=1 && NR<=120 { printf "%5d: %s\n", NR, $0 }' src/pages/alertCurEvent/pages/List/index.tsx

echo "== Switch usage and cache key =="
rg -n "from ['\"]antd['\"]|import .*Switch|SHOW_TRIGGER_VALUE_CACHE_KEY|showTriggerValue|aria-|label" src/pages/alertCurEvent/pages/List/index.tsx

Repository: n9e/fe

Length of output: 11802