PhongPham
c65cc97a33
✨ MAJOR FEATURES: • Auto-zoom intelligence với smart bounds fitting • Enhanced 3D GPS markers với pulsing effects • Professional route display với 6-layer rendering • Status-based parking icons với availability indicators • Production-ready build optimizations 🗺️ AUTO-ZOOM FEATURES: • Smart bounds fitting cho GPS + selected parking • Adaptive padding (50px) cho visual balance • Max zoom control (level 16) để tránh quá gần • Dynamic centering khi không có selection 🎨 ENHANCED VISUALS: • 3D GPS marker với multi-layer pulse effects • Advanced parking icons với status colors • Selection highlighting với animation • Dimming system cho non-selected items 🛣️ ROUTE SYSTEM: • OpenRouteService API integration • Multi-layer route rendering (glow, shadow, main, animated) • Real-time distance & duration calculation • Visual route info trong popup 📱 PRODUCTION READY: • SSR safe với dynamic imports • Build errors resolved • Global deployment via Vercel • Optimized performance 🌍 DEPLOYMENT: • Vercel: https://whatever-ctk2auuxr-phong12hexdockworks-projects.vercel.app • Bundle size: 22.8 kB optimized • Global CDN distribution • HTTPS enabled 💾 VERSION CONTROL: • MapView-v2.0.tsx backup created • MAPVIEW_VERSIONS.md documentation • Full version history tracking
2.8 KiB
jsx-a11y/no-interactive-element-to-noninteractive-role
💼 This rule is enabled in the following configs: ☑️ recommended, 🔒 strict.
Interactive HTML elements indicate controls in the user interface. Interactive elements include <a href>, <button>, <input>, <select>, <textarea>.
Non-interactive HTML elements and non-interactive ARIA roles indicate content and containers in the user interface. Non-interactive elements include <main>, <area>, <h1> (,<h2>, etc), <img>, <li>, <ul> and <ol>.
WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element. Non-interactive ARIA roles include article, banner, complementary, img, listitem, main, region and tooltip.
How do I resolve this error?
Case: The element should be a container, like an article
Wrap your interactive element in a <div> with the desired role.
<div role="article">
<button>Save</button>
</div>
Case: The element should be content, like an image
Put the content inside your interactive element.
<div
role="button"
onClick={() => {}}
onKeyPress={() => {}}
tabIndex="0">
<div role="img" aria-label="Save" />
</div>
Rule options
The recommended options for this rule allow the tr element to be given a role of presentation (or its semantic equivalent none). Under normal circumstances, an element with an interactive role should not be semantically neutralized with presentation (or none).
Options are provided as an object keyed by HTML element name; the value is an array of interactive roles that are allowed on the specified element.
{
'no-interactive-element-to-noninteractive-role': [
'error',
{
tr: ['none', 'presentation'],
},
]
}
Under the recommended options, the following code is valid. It would be invalid under the strict rules.
<tr role="presentation" />