121 lines
27 KiB
CSV
121 lines
27 KiB
CSV
No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
|
|
1,Navigation,Smooth Scroll,Web,Anchor links should scroll smoothly to target section,Use scroll-behavior: smooth on html element,Jump directly without transition,html { scroll-behavior: smooth; },<a href='#section'> without CSS,High
|
|
2,Navigation,Sticky Navigation,Web,Fixed nav should not obscure content,Add padding-top to body equal to nav height,Let nav overlap first section content,pt-20 (if nav is h-20),No padding compensation,Medium
|
|
3,Navigation,Active State,All,Current page/section should be visually indicated,Highlight active nav item with color/underline,No visual feedback on current location,text-primary border-b-2,All links same style,Medium
|
|
4,Navigation,Back Button,Mobile,Users expect back to work predictably,Preserve navigation history properly,Break browser/app back button behavior,history.pushState(),location.replace(),High
|
|
5,Navigation,Deep Linking,All,URLs should reflect current state for sharing,Update URL on state/view changes,Static URLs for dynamic content,Use query params or hash,Single URL for all states,Medium
|
|
6,Navigation,Breadcrumbs,Web,Show user location in site hierarchy,Use for sites with 3+ levels of depth,Use for flat single-level sites,Home > Category > Product,Only on deep nested pages,Low
|
|
7,Animation,Excessive Motion,All,Too many animations cause distraction and motion sickness,Animate 1-2 key elements per view maximum,Animate everything that moves,Single hero animation,animate-bounce on 5+ elements,High
|
|
8,Animation,Duration Timing,All,Motion duration depends on distance complexity platform and user context,Use shared motion tokens and test that feedback stays responsive,Present 150-300ms or any cutoff as a universal requirement,transition-colors duration-200,One duration copied to every transition,Medium
|
|
9,Animation,Reduced Motion,All,Respect user's motion preferences,Check prefers-reduced-motion media query,Ignore accessibility motion settings,@media (prefers-reduced-motion: reduce),No motion query check,High
|
|
10,Animation,Loading States,All,Show feedback during async operations,Use skeleton screens or spinners,Leave UI frozen with no feedback,animate-pulse skeleton,Blank screen while loading,High
|
|
11,Animation,Hover vs Tap,All,Hover effects don't work on touch devices,Use click/tap for primary interactions,Rely only on hover for important actions,onClick handler,onMouseEnter only,High
|
|
12,Animation,Continuous Animation,All,Infinite animations are distracting,Use for loading indicators only,Use for decorative elements,animate-spin on loader,animate-bounce on icons,Medium
|
|
13,Animation,Transform Performance,Web,Some CSS properties trigger expensive repaints,Use transform and opacity for animations,Animate width/height/top/left properties,transform: translateY(),top: 10px animation,Medium
|
|
14,Animation,Easing Functions,All,Easing should match how an element changes speed and purpose,Use deceleration when arriving acceleration when leaving and linear for constant-rate progress,Reject linear easing even for steady rotation or progress,ease-out for entry; linear for spinner,ease-in-out for every motion,Low
|
|
15,Layout,Z-Index Management,Web,Stacking context conflicts cause hidden elements,Define z-index scale system (10 20 30 50),Use arbitrary large z-index values,z-10 z-20 z-50,z-[9999],High
|
|
16,Layout,Overflow Hidden,Web,Hidden overflow can clip important content,Test all content fits within containers,Blindly apply overflow-hidden,overflow-auto with scroll,overflow-hidden truncating content,Medium
|
|
17,Layout,Fixed Positioning,Web,Fixed elements can overlap or be inaccessible,Account for safe areas and other fixed elements,Stack multiple fixed elements carelessly,Fixed nav + fixed bottom with gap,Multiple overlapping fixed elements,Medium
|
|
18,Layout,Stacking Context,Web,New stacking contexts reset z-index,Understand what creates new stacking context,Expect z-index to work across contexts,Parent with z-index isolates children,z-index: 9999 not working,Medium
|
|
19,Layout,Content Jumping,Web,Images badges validation text and skeleton replacements can shift nearby content when they update,Reserve appropriate space or keep async states in a stable content-driven container,Insert compact text or media without a layout strategy,aspect-ratio for media; stable count slot for badges,Badge insertion pushes toolbar actions,High
|
|
20,Layout,Viewport Units,Web,100vh can be problematic on mobile browsers,Use dvh or account for mobile browser chrome,Use 100vh for full-screen mobile layouts,min-h-dvh or min-h-screen,h-screen on mobile,Medium
|
|
21,Layout,Container Width,Web,Content too wide is hard to read,Limit max-width for text content (65-75ch),Let text span full viewport width,max-w-prose or max-w-3xl,Full width paragraphs,Medium
|
|
22,Touch,Touch Target Size,Mobile,Touch target guidance depends on platform and web context,Use 44pt on iOS and 48dp on Android; for web use the separate WCAG Target Size rule,Treat one unit or minimum as universal across platforms,iOS 44pt; Android 48dp; Web 24 CSS px plus WCAG exceptions,w-6 h-6 buttons,High
|
|
23,Touch,Touch Spacing,Mobile,Adjacent touch targets need adequate spacing,Minimum 8px gap between touch targets,Tightly packed clickable elements,gap-2 between buttons,gap-0 or gap-1,Medium
|
|
24,Touch,Gesture Conflicts,Mobile,Custom gestures can conflict with system,Avoid horizontal swipe on main content,Override system gestures,Vertical scroll primary,Horizontal swipe carousel only,Medium
|
|
25,Touch,Tap Delay,Mobile,300ms tap delay feels laggy,Use touch-action CSS or fastclick,Default mobile tap handling,touch-action: manipulation,No touch optimization,Medium
|
|
26,Touch,Pull to Refresh,Mobile,Accidental refresh is frustrating,Disable where not needed,Enable by default everywhere,overscroll-behavior: contain,Default overscroll,Low
|
|
27,Touch,Haptic Feedback,Mobile,Tactile feedback improves interaction feel,Use for confirmations and important actions,Overuse vibration feedback,navigator.vibrate(10),Vibrate on every tap,Low
|
|
28,Interaction,Focus States,All,"Keyboard focus, including controls inside a modal, needs a visible indicator","Use a visible focus ring on every interactive control, including modal controls",Remove focus outline without replacement,focus:ring-2 focus:ring-blue-500,outline-none without alternative,High
|
|
29,Interaction,Hover States,Web,Visual feedback on interactive elements,Change cursor and add subtle visual change,No hover feedback on clickable elements,hover:bg-gray-100 cursor-pointer,No hover style,Medium
|
|
30,Interaction,Active States,All,Show immediate feedback on press/click,Add pressed/active state visual change,No feedback during interaction,active:scale-95,No active state,Medium
|
|
31,Interaction,Disabled States,All,Clearly indicate non-interactive elements,Reduce opacity and change cursor,Confuse disabled with normal state,opacity-50 cursor-not-allowed,Same style as enabled,Medium
|
|
32,Interaction,Loading Buttons,All,Prevent double submission during async actions,Disable button and show loading state,Allow multiple clicks during processing,disabled={loading} spinner,Button clickable while loading,High
|
|
33,Interaction,Error Feedback,All,Users need to know when something fails,Show clear error messages near problem,Silent failures with no feedback,Red border + error message,No indication of error,High
|
|
34,Interaction,Success Feedback,All,Confirm successful actions to users,Show success message or visual change,No confirmation of completed action,Toast notification or checkmark,Action completes silently,Medium
|
|
35,Interaction,Confirmation Dialogs,All,Prevent accidental destructive actions,Confirm before delete/irreversible actions,Delete without confirmation,Are you sure modal,Direct delete on click,High
|
|
36,Accessibility,Color Contrast,All,Text must be readable against background,Minimum 4.5:1 ratio for normal text,Low contrast text,#333 on white (7:1),#999 on white (2.8:1),High
|
|
37,Accessibility,Color Only,All,Don't convey information by color alone,Use icons/text in addition to color,Red/green only for error/success,Red text + error icon,Red border only for error,High
|
|
38,Accessibility,Alt Text,All,Images need text alternatives,Descriptive alt text for meaningful images,Empty or missing alt attributes,alt='Dog playing in park',alt='' for content images,High
|
|
39,Accessibility,Heading Hierarchy,Web,Screen readers use headings for navigation,Use sequential heading levels h1-h6,Skip heading levels or misuse for styling,h1 then h2 then h3,h1 then h4,Medium
|
|
40,Accessibility,ARIA Labels,All,Interactive elements need accessible names,Add aria-label for icon-only buttons,Icon buttons without labels,aria-label='Close menu',<button><Icon/></button>,High
|
|
41,Accessibility,Keyboard Navigation,Web,Web users need complete keyboard navigation with visible focus on every operable control,Keep tab order aligned with visual order and test every action without a pointer,Keyboard traps or illogical tab order,tabIndex for custom order,Unreachable elements,High
|
|
42,Accessibility,Screen Reader,All,Content should make sense when read aloud,Use semantic HTML and ARIA properly,Div soup with no semantics,<nav> <main> <article>,<div> for everything,Medium
|
|
43,Accessibility,Form Labels,All,Inputs must have associated labels,Use label with for attribute or wrap input,Placeholder-only inputs,<label for='email'>,placeholder='Email' only,High
|
|
44,Accessibility,Error Messages,All,Error messages must be announced,Use aria-live or role=alert for errors,Visual-only error indication,role='alert',Red border only,High
|
|
45,Accessibility,Skip Links,Web,Allow keyboard users to skip navigation,Provide skip to main content link,No skip link on nav-heavy pages,Skip to main content link,100 tabs to reach content,Medium
|
|
46,Performance,Image Optimization,All,Large images slow page load,Use appropriate size and format (WebP),Unoptimized full-size images,srcset with multiple sizes,4000px image for 400px display,High
|
|
47,Performance,Lazy Loading,All,Load content as needed,Lazy load below-fold images and content,Load everything upfront,loading='lazy',All images eager load,Medium
|
|
48,Performance,Code Splitting,Web,Large bundles slow initial load,Split code by route/feature,Single large bundle,dynamic import(),All code in main bundle,Medium
|
|
49,Performance,Caching,Web,Repeat visits should be fast,Set appropriate cache headers,No caching strategy,Cache-Control headers,Every request hits server,Medium
|
|
50,Performance,Font Loading,Web,Web fonts can block rendering,Use font-display swap or optional,Invisible text during font load,font-display: swap,FOIT (Flash of Invisible Text),Medium
|
|
51,Performance,Third Party Scripts,Web,External scripts can block rendering,Load non-critical scripts async/defer,Synchronous third-party scripts,async or defer attribute,<script src='...'> in head,Medium
|
|
52,Performance,Bundle Size,Web,Large JavaScript slows interaction,Monitor and minimize bundle size,Ignore bundle size growth,Bundle analyzer,No size monitoring,Medium
|
|
53,Performance,Render Blocking,Web,CSS/JS can block first paint,Inline critical CSS defer non-critical,Large blocking CSS files,Critical CSS inline,All CSS in head,Medium
|
|
54,Forms,Input Labels,All,Every input needs a visible label,Always show label above or beside input,Placeholder as only label,<label>Email</label><input>,placeholder='Email' only,High
|
|
55,Forms,Error Placement,All,Each invalid field needs an inline error connected to that field,Show a specific error below the input and reference it with aria-describedby,Show only a top-level error without identifying each invalid field,"<input aria-describedby=""email-error""><p id=""email-error"">Enter an email address</p>",Red border or summary only,High
|
|
56,Forms,Inline Validation,All,Validate as user types or on blur,Validate on blur for most fields,Validate only on submit,onBlur validation,Submit-only validation,Medium
|
|
57,Forms,Input Types,All,Use appropriate input types,Use email tel number url etc,Text input for everything,type='email',type='text' for email,Medium
|
|
58,Forms,Autofill Support,Web,Help browsers autofill correctly,Use autocomplete attribute properly,Block or ignore autofill,autocomplete='email',autocomplete='off' everywhere,Medium
|
|
59,Forms,Required Indicators,All,Mark required fields clearly,Use asterisk or (required) text,No indication of required fields,* required indicator,Guess which are required,Medium
|
|
60,Forms,Password Visibility,All,Let users see password while typing,Toggle to show/hide password,No visibility toggle,Show/hide password button,Password always hidden,Medium
|
|
61,Forms,Submit Feedback,All,Confirm form submission status,Show loading then success/error state,No feedback after submit,Loading -> Success message,Button click with no response,High
|
|
62,Forms,Input Affordance,All,Inputs should look interactive,Use distinct input styling,Inputs that look like plain text,Border/background on inputs,Borderless inputs,Medium
|
|
63,Forms,Mobile Keyboards,Mobile,Show appropriate keyboard for input type,Use inputmode attribute,Default keyboard for all inputs,inputmode='numeric',Text keyboard for numbers,Medium
|
|
64,Responsive,Mobile First,Web,Design for mobile then enhance for larger,Start with mobile styles then add breakpoints,Desktop-first causing mobile issues,Default mobile + md: lg: xl:,Desktop default + max-width queries,Medium
|
|
65,Responsive,Breakpoint Testing,Web,Test at all common screen sizes,Test at 320 375 414 768 1024 1440,Only test on your device,Multiple device testing,Single device development,Medium
|
|
66,Responsive,Touch Friendly,Web,Mobile layouts need touch-sized targets,Increase touch targets on mobile,Same tiny buttons on mobile,Larger buttons on mobile,Desktop-sized targets on mobile,High
|
|
67,Responsive,Readable Font Size,All,Text must be readable on all devices,Minimum 16px body text on mobile,Tiny text on mobile,text-base or larger,text-xs for body text,High
|
|
68,Responsive,Viewport Meta,Web,Set viewport for mobile devices,Use width=device-width initial-scale=1,Missing or incorrect viewport,<meta name='viewport'...>,No viewport meta tag,High
|
|
69,Responsive,Horizontal Scroll,Web,Avoid horizontal scrolling,Ensure content fits viewport width,Content wider than viewport,max-w-full overflow-x-hidden,Horizontal scrollbar on mobile,High
|
|
70,Responsive,Image Scaling,Web,Images should scale with container,Use max-width: 100% on images,Fixed width images overflow,max-w-full h-auto,width='800' fixed,Medium
|
|
71,Responsive,Table Handling,Web,Tables can overflow on mobile,Use horizontal scroll or card layout,Wide tables breaking layout,overflow-x-auto wrapper,Table overflows viewport,Medium
|
|
72,Typography,Line Height,All,Adequate line height improves readability,Use 1.5-1.75 for body text,Cramped or excessive line height,leading-relaxed (1.625),leading-none (1),Medium
|
|
73,Typography,Line Length,Web,Long lines are hard to read,Limit to 65-75 characters per line,Full-width text on large screens,max-w-prose,Full viewport width text,Medium
|
|
74,Typography,Font Size Scale,All,Consistent type hierarchy aids scanning,Use consistent modular scale,Random font sizes,Type scale (12 14 16 18 24 32),Arbitrary sizes,Medium
|
|
75,Typography,Font Loading,Web,Fonts should load without layout shift,Reserve space with fallback font,Layout shift when fonts load,font-display: swap + similar fallback,No fallback font,Medium
|
|
76,Typography,Contrast Readability,All,Body text needs good contrast,Use darker text on light backgrounds,Gray text on gray background,text-gray-900 on white,text-gray-400 on gray-100,High
|
|
77,Typography,Heading Clarity,All,Headings should stand out from body,Clear size/weight difference,Headings similar to body text,Bold + larger size,Same size as body,Medium
|
|
78,Feedback,Loading Indicators,All,Loading feedback should match the expected wait and avoid flashing for near-instant work,Follow platform and component guidance; preserve layout focus and accessible busy status,Apply one timing threshold to every operation or leave long waits unexplained,Stable skeleton or progress with aria-busy,Flickering spinner or frozen UI,High
|
|
79,Feedback,Empty States,All,Guide users when no content exists,Show helpful message and action,Blank empty screens,No items yet. Create one!,Empty white space,Medium
|
|
80,Feedback,Error Recovery,All,Help users recover from errors,Provide clear next steps,Error without recovery path,Try again button + help link,Error message only,Medium
|
|
81,Feedback,Progress Indicators,All,Show progress for multi-step processes,Step indicators or progress bar,No indication of progress,Step 2 of 4 indicator,No step information,Medium
|
|
82,Feedback,Toast Notifications,All,Transient messages for non-critical info,Auto-dismiss after 3-5 seconds,Toasts that never disappear,Auto-dismiss toast,Persistent toast,Medium
|
|
83,Feedback,Confirmation Messages,All,Confirm successful actions,Brief success message,Silent success,Saved successfully toast,No confirmation,Medium
|
|
84,Content,Truncation,All,Handle long content gracefully,Truncate with ellipsis and expand option,Overflow or broken layout,line-clamp-2 with expand,Overflow or cut off,Medium
|
|
85,Content,Date Formatting,All,Use locale-appropriate date formats,Use relative or locale-aware dates,Ambiguous date formats,2 hours ago or locale format,01/02/03,Low
|
|
86,Content,Number Formatting,All,Format large numbers for readability,Use thousand separators or abbreviations,Long unformatted numbers,"1.2K or 1,234",1234567,Low
|
|
87,Content,Placeholder Content,All,Show realistic placeholders during dev,Use realistic sample data,Lorem ipsum everywhere,Real sample content,Lorem ipsum,Low
|
|
88,Onboarding,User Freedom,All,Users should be able to skip tutorials,Provide Skip and Back buttons,Force linear unskippable tour,Skip Tutorial button,Locked overlay until finished,Medium
|
|
89,Search,Autocomplete,Web,Help users find results faster,Show predictions as user types,Require full type and enter,Debounced fetch + dropdown,No suggestions,Medium
|
|
90,Search,No Results,Web,Dead ends frustrate users,Show 'No results' with suggestions,Blank screen or '0 results',Try searching for X instead,No results found.,Medium
|
|
91,Data Entry,Bulk Actions,Web,Editing one by one is tedious,Allow multi-select and bulk edit,Single row actions only,Checkbox column + Action bar,Repeated actions per row,Low
|
|
92,AI Interaction,Disclaimer,All,Users need to know they talk to AI,Clearly label AI generated content,Present AI as human,AI Assistant label,Fake human name without label,High
|
|
93,AI Interaction,Streaming,All,Waiting for full text is slow,Stream text response token by token,Show loading spinner for 10s+,Typewriter effect,Spinner until 100% complete,Medium
|
|
94,Spatial UI,Gaze Hover,VisionOS,Elements should respond to eye tracking before pinch,Scale/highlight element on look,Static element until pinch,hoverEffect(),onTap only,High
|
|
95,Spatial UI,Depth Layering,VisionOS,UI needs Z-depth to separate content from environment,Use glass material and z-offset,Flat opaque panels blocking view,.glassBackgroundEffect(),bg-white,Medium
|
|
96,Sustainability,Auto-Play Video,Web,Autoplaying media consumes data and creates motion barriers,Prefer click-to-play; provide pause and captions; stop off-screen and honor reduced motion,Auto-play high-resolution loops without pause or captions,"<video controls preload=""none""><track kind=""captions"" /></video>",autoplay loop,Medium
|
|
97,Sustainability,Asset Weight,Web,Heavy 3D/Image assets increase carbon footprint,Compress and lazy load 3D models,Load 50MB textures,Draco compression,Raw .obj files,Medium
|
|
98,AI Interaction,Feedback Loop,All,AI needs user feedback to improve,Thumps up/down or 'Regenerate',Static output only,Feedback component,Read-only text,Low
|
|
99,Accessibility,Motion Sensitivity,All,Parallax/Scroll-jacking causes nausea,Honor prefers-reduced-motion and present the final readable state without parallax or scroll-jacking,Force scroll effects,@media (prefers-reduced-motion),ScrollTrigger.create(),High
|
|
100,Accessibility,Focus Not Obscured (Minimum),Web,WCAG 2.2 AA requires keyboard focus to remain at least partially visible,Offset sticky UI with scroll-padding and dismiss or move persistent overlays,Let headers footers banners or chat widgets fully cover focus,scroll-padding-top: var(--header-height),fixed overlay covers :focus,High
|
|
101,Accessibility,Focus Not Obscured (Enhanced),Web,WCAG 2.2 AAA requires keyboard focus to remain fully visible,Keep the entire focused component unobscured by author-created content,Present this enhanced AAA criterion as an AA requirement or allow persistent UI to hide any part of focus,close persistent overlay before focus moves behind it,sticky footer covers half the focused button,Medium
|
|
102,Accessibility,Focus Appearance,Web,WCAG 2.2 AAA defines minimum area and contrast for focus indicators,Use an indicator at least as large as a 2 CSS px perimeter with 3:1 state contrast,Present this enhanced AAA criterion as an AA requirement or use a thin low-contrast outline,outline: 2px solid currentColor; outline-offset: 2px,box-shadow: 0 0 1px low-contrast,Medium
|
|
103,Accessibility,Dragging Movements,All,WCAG 2.2 AA requires a single-pointer alternative for author-controlled drag operations,Add buttons menus or tap-to-move controls and retain keyboard operation,Make dragging the only way to reorder resize or select,Move up and Move down buttons beside drag handle,drag handle only,High
|
|
104,Accessibility,Target Size (Minimum),Web,WCAG 2.2 AA requires 24 CSS px pointer targets or an applicable exception,Use at least 24 by 24 CSS px or verify spacing equivalent inline user-agent or essential exceptions,Assume native 44pt or 48dp guidance defines web conformance,min-width: 24px; min-height: 24px,tiny adjacent icon buttons,High
|
|
105,Accessibility,Consistent Help,All,WCAG 2.2 A requires repeated help mechanisms to stay in the same relative order,Keep contact self-help and automated help in consistent locations,Move help controls to different locations on each page,shared header help menu,page-specific help placement,Medium
|
|
106,Forms,Redundant Entry,All,WCAG 2.2 A avoids requiring the same information twice in one process,Auto-populate prior values or let users select previously entered information,Ask users to retype the same address or account data without necessity,reuse confirmed shipping address,repeat full address form,Medium
|
|
107,Security / Accessibility,Accessible Authentication (Minimum),All,WCAG 2.2 AA says authentication must not depend only on a cognitive function test unless an exception applies,Allow password managers and paste; offer passkeys OAuth or another non-cognitive method,Block paste or require manual OTP transcription with no alternative,"autocomplete=""current-password"" and paste allowed",onpaste preventDefault,Critical
|
|
108,Animation,Auto-Rotating Content Controls,All,Auto-rotating content needs user control,Provide previous next and play/pause; stop on focus or hover and when reduced motion is requested,Auto-advance slides without a stop control,"button aria-label=""Pause carousel""",timer-only carousel,High
|
|
109,Forms / Accessibility,Focusable Error Summary,Web,An error summary for failed validation complements inline field errors and must be easy to find by keyboard and screen reader users,Place it at the top of the form; move focus to its heading or container after failed submit; link each item to its invalid field; retain inline errors,Replace inline errors with a visual-only summary or move focus on every blur,"<div role=""alert"" tabindex=""-1"" aria-labelledby=""error-title""><h2 id=""error-title"">There is a problem</h2><a href=""#email"">Enter an email address</a></div>",Toast only with no field links or focus target,High
|
|
110,Typography,Heading Line Balance,Web,Short multi-line headings may use balanced wrapping as a progressive visual heuristic,Bound the measure and test natural-wrap fallback across widths fonts and locales,Promise an exact final line or insert blanket nonbreaking spaces or hardcoded br tags,.hero-title { max-inline-size: 20ch; text-wrap: balance; },Heading copy rewritten with forced last-line breaks,Medium
|
|
111,Layout,Long Token Wrapping,Web,URLs identifiers and user content must not force horizontal overflow,Use overflow-wrap anywhere and let flex or grid text children shrink,Apply word-break break-all to all prose,.token { min-inline-size: 0; overflow-wrap: anywhere; },.token { white-space: nowrap; },High
|
|
112,Accessibility,Text Reflow and Spacing,Web,Text must remain available at narrow widths zoom and user spacing overrides,Use fluid sizes content-driven height and unitless line height,Clip text in fixed-width or fixed-height boxes,".copy { inline-size: min(100%, 65ch); height: auto; line-height: 1.5; }",.copy { width: 900px; height: 40px; overflow: hidden; },Critical
|
|
113,Content,Essential Text Truncation,All,Headings actions errors safety text and distinguishing names need complete access,Wrap stack resize or provide a visible full-detail path,Clamp essential meaning only to make cards uniform,Action label wraps or opens full details,Primary action shown only as an unexplained ellipsis,Critical
|
|
114,Content,Compact Label Semantics,All,Badges communicate state while chips or tags represent values or actions,Choose static or interactive markup from the label's meaning and ownership,Make every pill clickable or encode status with color alone,<span class='status'>Pending</span>,<div class='pill' onclick='toggle()'>Pending</div>,High
|
|
115,Layout,Chip Collection Reflow,All,Filter chips and editable value collections must preserve labels when space or text size changes,Wrap the collection or use an operable +n disclosure for hidden overflow values,Force all chips into one clipped row or hide overflow values,<div class='chip-list'>{chips}</div> with flex-wrap,<div class='chip-list' style='height:32px;overflow:hidden'>,High
|
|
116,Content,Compact Label Overflow,All,A badge chip or pill label should stay whole on one line when practical and disclose unavoidable truncation,Bound only unpredictable values; use nowrap with a shrinkable label; expose full text to keyboard pointer and touch users,Let one compact label wrap to a second line or use a hover-only tooltip,Flexible label with min-width 0 and an operable full-value disclosure,Fixed-width badge wraps to second line or clips with title-only recovery,High
|
|
117,Accessibility,Compact Control Semantics,Web,Interactive chips need a native role accessible name state keyboard operation and visible focus,Prefer a button and expose pressed or selected state that matches the visible label,Use a clickable div or reveal the only action on hover,<button aria-pressed='true'>Open now</button>,<div class='selected' onclick='toggle()'>Open now</div>,Critical
|
|
118,Accessibility,Contextual Live Badge Updates,Web,Async badge and count changes should announce a meaningful contextual status without moving focus,Use one appropriate atomic status message such as 3 items in cart,Announce a bare number or make every badge a competing live region,<span role='status' aria-atomic='true'>3 items in cart</span>,<span aria-live='polite'>3</span>,High
|
|
119,Animation,Cancellable State Transitions,Web,Rapid compact-control changes can interrupt an in-flight transition,Cancel or replace prior motion; set the final semantic state directly and handle cancellation cleanup,Depend on animationend or transitionend for required state correctness,previous?.cancel(); setSelected(next),Enable the chip only inside transitionend,High
|