Card

Card is available in three fundamental formats:

• Default: Card initial state is the default appearance when no interactions have occurred. It remains unchanged and unaltered until interacted with.
• Expandable: Allows users to toggle between a collapsed and expanded view of additional content within the card.
• Selectable: Shows that users can interact with or select the content or elements enclosed within the card.

Selectable and expandable are available in four states:

• Default: Card default state is its initial appearance before any user interaction takes place.
• Hovered: It occurs when the user hovers the cursor over the card without clicking on it.
• Focused: This state refers to the card when it is selected or active, typically through keyboard navigation, usually via the “Tab” key.
• Disabled: This state shows the card when it is not interactive, indicating that the element cannot be interacted with under the current conditions.

The appearance of cards typically includes a rectangular shape with rounded corners, containing a combination of images, text, and possibly interactive elements such as buttons or icons.

• Image: It is a visual element that adds context or enhances the content displayed within the card.
• Featured Icon: Visually indicates the type of card.
• Card Title: It is the main heading or label that provides a brief description or title for the content within the card.
• Description: Provides a text description of the card.
• Custom Component (e.g., Avatar): Refers to a specialized UI element integrated within the card layout to provide unique functionality or display tailored content.
• Tags: Are small visual elements used to convey specific information or status related to the content.
• Rating: Typically represents the user or community's assessment or evaluation of the content displayed within the card.
• Actions: Includes interactive elements like ghost or tertiary buttons for user engagement.
• Container: The area that holds all the elements.

Accordions, as interactive web components, must be designed with accessibility in mind to ensure they are usable by everyone, including those with disabilities. Here are key accessibility attributes and practices to consider when implementing accordions:

Key Accessibility Attributes and Practices:

ARIA Attributes:
Use ARIA (Accessible Rich Internet Applications) attributes to enhance accessibility:
- role="button": Applied to each accordion header to indicate that it is interactive.
- aria-expanded: This attribute should be set to "true" or "false" depending on whether the accordion section is open or closed, respectively.
- aria-controls: Connects the accordion header to the content it expands, aiding screen readers in understanding the relationship.
- aria-disabled: Used if any accordion header is not interactive.

Keyboard Navigation:
- Accordions should be fully navigable using keyboard shortcuts. Users should be able to tab to each accordion header and use keys like Enter or Space to expand and collapse sections.

Focus Management:
- Ensure that when an accordion panel is opened, focus is managed appropriately, often by moving focus to the content inside or keeping it on the header.
- Focus indicators (like outlines or borders around the active element) should be clear and distinct to aid those navigating by keyboard.

Screen Reader Support:
- The content of each accordion header should be clear and informative enough for screen reader users to understand the purpose of the collapsible content.

Visual Design: Ensure that all text within the accordion, including headers and content, has sufficient color contrast ratios as per WCAG (Web Content Accessibility Guidelines) to aid users with visual impairments. And make sure interactive elements like icons or buttons are also easily visible and distinguishable.