Skip to content

Releases: incluud/accessible-astro-components

v5.0.1

15 Sep 18:12
6649d97

Choose a tag to compare

Features

  • layout: add hidden attribute styling to improve accessibility #125 (Mark Teekman)

Bug Fixes

  • button: refactor CSS structure so hover styles are correctly applied #125 (Mark Teekman)
  • link: refactor CSS structure so hover styles are correctly applied #125 (Mark Teekman)
  • notification: refactor CSS structure so accent variant styles are correctly applied #125 (Mark Teekman)
  • fieldset: refactor CSS to improve styling for invalid fieldsets #125 (Mark Teekman)
  • input: refactor CSS to enhance styling for invalid input states #125 (Mark Teekman)
  • textarea: refactor CSS to improve styling for invalid textarea states #125 (Mark Teekman)
  • forms: update CSS selectors for better targeting #125 (Mark Teekman)
  • notification: adjust icon positioning for improved alignment #125 (Mark Teekman)

v5.0.0

13 Sep 11:48
b03e4ef

Choose a tag to compare

Forms, Primitives & Enhanced Design System

This major release introduces essential form components, primitive elements, and a comprehensive design system to provide a solid foundation for accessible web development.

⚠️ Breaking Changes

  • components: Version 5.0.0 introduces new design system tokens and may require updates to existing implementations (Mark Teekman)
  • styles: Comprehensive style system reorganization may affect custom styling implementations (Mark Teekman)

✨ Features

  • Button: Add versatile Button component with customizable variants, sizes, and animations for improved user interaction #108 #123 (Mark Teekman)
  • Heading: Introduce Heading primitive component for versatile heading levels with responsive typography #114 #123 (Mark Teekman)
  • Link: Add Link component for internal and external navigation with accessibility features and hideIcon prop #115 #123 (Mark Teekman)
  • Forms: Introduce comprehensive Forms suite including Form, Input, Textarea, Checkbox, Radio, and Fieldset components with validation and accessibility features #94 #123 (Mark Teekman)
  • Card: Add full-height option, improved image handling, and Heading component integration #123 (Mark Teekman)
  • AccordionItem: Add Heading component integration and improved heading props for better accessibility #123 (Mark Teekman)
  • Modal: Integrate Heading component for enhanced accessibility and customizable heading properties #123 (Mark Teekman)
  • Notification: Add accent variant support and selectable root element for greater customization #123 (Mark Teekman)
  • Animations: Extend animation options to include 'nudge' animation for Badge, Button, and Link components #123 (Mark Teekman)
  • Design System: Implement comprehensive design system with animations, colors, elevation, font, forms, layout, space, and utility styles #123 (Mark Teekman)

🐛 Bug Fixes

  • Heading: Make level and size props optional for improved flexibility #123 (Mark Teekman)
  • Link: Simplify external link logic for improved clarity and maintainability #123 (Mark Teekman)
  • Tabs: Improve tab navigation accessibility by updating tabindex and aria-selected attributes #121 #123 (Mark Teekman)
  • Components: Update default heading sizes and enhance accessibility across Form and Textarea components #123 (Mark Teekman)
  • Notification: Update background color with fallback color for better compatibility #123 (Mark Teekman)

♿ Code Refactoring

  • Modal: Enhance accessibility by updating aria attributes, improving trigger element handling, and removing focus-visible outline from close button #117 #118 #123 (Mark Teekman)
  • Avatar: Enhance accessibility by updating alt text and aria-labels for better screen reader support #116 #123 (Mark Teekman)
  • Notification: Replace <aside> with <div> for correct accessibility, update ARIA role documentation, and add element prop for semantic HTML support #119 #120 #123 (Mark Teekman)
  • Card: Update default image URL since fakeimg.pl doesn't work anymore #112 #123 (Mark Teekman)
  • Form: Implement secure regex pattern validation to enhance form input security and prevent ReDoS attacks #123 (Mark Teekman)
  • SkipLink: Remove transition and focus-visible outline for improved accessibility #123 (Mark Teekman)
  • Components: Remove unused CSS styles and fallback colors for cleaner code maintenance #123 (Mark Teekman)

📚 Documentation

  • README: Expand component list with new additions and acknowledgments #123 (Mark Teekman)

🔧 Chores

  • Package: Bump version to 5.0.0 for major updates and improvements #123 (Mark Teekman)
  • Types: Add comprehensive type definitions for Button, Heading, Link, and form components #123 (Mark Teekman)

v4.1.3

31 Jul 17:37
9d4b18b

Choose a tag to compare

Code Refactoring

  • components: optimize CSS selectors using :where() for improved specificity and maintainability across components #113 (Mark Teekman)
  • components: simplify CSS selectors in Card and Modal components by removing :where() to prevent unwanted behavior #113 (Mark Teekman)

Chores

  • update package description and bump version to 4.1.3 for accessible-astro-components #113 (Mark Teekman)

v4.1.2

05 Jul 13:50
661e74a

Choose a tag to compare

Bug Fixes

  • types: update Badge component size prop documentation to use shorthand values ('sm', 'md', 'lg') #111 (Mark Teekman)
  • notification: add fallback styles for inline and block sizes to improve compatibility across browsers #111 (Mark Teekman)

Code Refactoring

  • components: flatten CSS structure for selectors and properties across Accordion, Avatar, Badge, Card, Modal, and Notification components #111 (Mark Teekman)
  • Badge: remove unnecessary flex properties from circular badge styles for cleaner CSS #111 (Mark Teekman)

Chores

Commits

  • 30ea1e5: Add Color Contrast Checker to README.md (Mark Teekman) #111

v4.1.1

03 May 12:50
2107c0d

Choose a tag to compare

Code Refactoring

  • DarkMode: add children prop in TypeScript interface to prevent error for custom slot elements and enhance prop documentation #109 (Mark Teekman)
  • Card: enhance image handling by adding support for Astro Image component and improving prop documentation #107 #109 (Mark Teekman)
  • Badge: update animation types and enhance CSS utility classes for improved hover animation effects #109 (Mark Teekman)
  • Badge: clamp animation intensity and enhance CSS variables for improved animation control #109 (Mark Teekman)
  • Badge: ⚠️ breaking, changed bounce animation to bouncing to prevent Tailwind conflict

Chores

v4.1.0

14 Mar 08:57
4f20c28

Choose a tag to compare

Features

  • Badge: Add new Badge component with customizable styling and accessibility features #103 (Mark Teekman)
  • Badge: Enhance with improved styling, interactivity, and hover/focus states #103 (Mark Teekman)
  • Badge: Add pill style option and simplify pulse animation #103 (Mark Teekman)
  • Badge: Add label prop for screen reader accessibility #103 (Mark Teekman)
  • Avatar: Implement accessible Avatar component with type system, sizing options, and fallbacks #104 (Mark Teekman)
  • AvatarGroup: Add component with condensed and grid display modes #104 (Mark Teekman)
  • Notification: Update icon selector for better compatibility #103 (Mark Teekman)

Bug Fixes

Documentation

  • Types: Update TypeScript definitions for all components including Avatar and Badge #104 (Mark Teekman)
  • Types: Enhance prop documentation with notes on additional HTML attributes #106 (Mark Teekman)
  • Update README with information about new Avatar components #104 (Mark Teekman)

Code Refactoring

  • Project Structure: Reorganize components and update import paths #103 (Mark Teekman)
  • Types: Move types directory to src and update import paths #103 (Mark Teekman)
  • Accessibility: Standardize on .sr-only class for visually hidden content #103 (Mark Teekman)
  • Badge: Update to use sm/md/lg sizing system and improve accessibility documentation #104 (Mark Teekman)
  • Styling: Centralize color system and update components to use CSS variables #104 (Mark Teekman)
  • Components: Update all components to follow prop ordering convention and add rest props #104 (Mark Teekman)
  • Avatar: Encapsulate size logic in a dedicated function for improved readability #106 (Mark Teekman)
  • Avatar: Enhance image loading performance with lazy loading and improve font sizing with clamp #106 (Mark Teekman)
  • Components: Implement CodeRabbit suggestions for various improvements #104 (Mark Teekman)
  • Components: Update to improve prop typing and enhance accessibility #106 (Mark Teekman)

Chores

  • Version: Bump to 4.1.0 for new Avatar and Badge components #106 (Mark Teekman)

v4.0.3

23 Feb 15:22

Choose a tag to compare

Commits

v4.0.2

16 Feb 15:07
25d7de4

Choose a tag to compare

Bug Fixes

  • breadcrumbs: make ariaLabel prop optional and align with type definitions #100 (Mark Teekman)
  • breadcrumbsitem: improve icon alignment for custom separators #100 (Mark Teekman)
  • card: enhance component structure with proper empty states and footer handling #100 (Mark Teekman)
  • notification: use correct icon targeting in CSS #100 (Mark Teekman)
  • tabspanel: add some default spacing between tab panel content #100 (Mark Teekman)
  • tabstab: add more padding to tab buttons #100 (Mark Teekman)

Documentation

Chores

v4.0.1

12 Feb 19:35
0f25a78

Choose a tag to compare

Bug fixes

  • fix: rename SkipLinks to SkipLink in exports and bump version to 4.0.1 (@markteekman)

v4.0.0

12 Feb 18:55
5cb7dbe

Choose a tag to compare

Customizability, Robustness & Modern Web

This major release focuses on making components more robust, customizable, and performant while improving accessibility and internationalization support. We also moved the package to our new Incluud organisation as part of the effort to streamline our development processes and enhance collaboration within the community. This transition allows us to better manage contributions, improve project visibility, and ensure a more cohesive approach to future updates and features.

🎯 Key Highlights

  • Modernized CSS architecture with logical properties and modern selectors
  • Enhanced accessibility and internationalization support
  • Improved performance through better browser APIs
  • Improved TypeScript support

⚠️ Breaking Changes

  • Removed is:global() styles to prevent style creep #90
  • Simplified class names and introduced :where() for lower specificity
  • Switched to logical properties for better RTL support
  • Migrated to HSL colors with light-dark() functions
  • Reduced client-side JavaScript in favor of browser APIs
  • Renamed SkipLinks to SkipLink

🎨 Design System Updates

  • Standardized component styling with consistent tokens
  • Improved dark mode support with light-dark() color system
  • Added prefers-reduced-motion support
  • Enhanced focus states and keyboard navigation

✨ New Features

  • Added Video component with YouTube embed support
  • Universal class prop support for all components
  • Improved i18n support through customizable text props
  • Enhanced slot system for better component composition

🔄 Component Updates

Accessibility & UX

  • Accordion: Added proper heading structure support
  • Breadcrumbs: Added icon-only support with screen reader text
  • Card: Now uses <article> instead of <div>
  • SkipLink: Added translatable text support
  • Notification: Switched to semantic <aside> with ARIA live regions

Enhanced Customization

  • Accordion: Added chevron variant with configurable positioning
  • Accordion: Added open prop for an initial open state for an item
  • Breadcrumbs: Added customizable separators
  • Card: Added meta information slot
  • DarkMode: Added support for custom icons
  • Modal: Improved styling and interaction patterns
  • Notification: Added Starlight-inspired color schemes
  • Pagination: Enhanced styling options

📚 Documentation

  • New documentation site at Accessible Astro Docs #75
  • Added migration guide from v3 to v4
  • Improved component examples and usage guidelines