我正在嘗試使用 React & TypeScript 制作一個 Modal 組件，它具有“單擊外部以關閉”功能；我試圖通過制作一個背景元素來實作它：一個灰色的 HTML div 元素作為背景，它有一個onClick呼叫該onClose方法的事件。
問題是當我onClick在背景元素上分配一個事件時，我得到了 linting 錯誤：Static HTML elements with event handlers require a role.
當我給它一個互動式元素的角色時，button例如，我會收到以下其他錯誤：
A control must be associated with a text label.Elements with the 'button' interactive role must be focusable.
所以我的問題是，賦予背景元素的正確角色是什么，其他相關屬性應該是什么？
PS 我對禁用 linting 規則不感興趣。
uj5u.com熱心網友回復：
我認為您的問題源于可訪問性。螢屏閱讀器等需要資訊來識別可點擊元素。
要繞過這一點，您可以將其設定為aria-hidden.
比較：https : //stackoverflow.com/a/64022904/17519505
和https://github.com/mui-org/material-ui/blob/42ce3598db2c19956d9cd852b43d0c96f61f697b/packages/mui-base/src/BackdropUnstyled/BackdropUnstyled.js#L18
（第 23 行（使用 div）、第 44 行（隱藏詠嘆調）和第 52 行（點擊此處插入）
uj5u.com熱心網友回復：
根據 w3 規范，該角色presentation似乎足以作為背景（純粹是展示性的）：https :
//www.w3.org/TR/wai-aria-1.1/#presentation
添加角色presentation應該可以解決 lint 錯誤，而無需任何額外的修改。
但是，我建議為“點擊外部”功能探索一種不同的方法。有一種方法可以通過向檔案添加單擊偵聽器并檢查單擊目標是否未包含在模態中來觀察模態之外的實際單擊。這個答案有一個合理的解決方案： Detect click outside React component。
這樣，您就可以避免向應該是純粹展示性的元素添加互動性。a11y linter 和工具會更快樂。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/368198.html
標籤：html 反应 打字稿 模态对话框 打字稿-eslint