Complex issue spike example

[Spark450]

Spike: data card functionality and layout investigation

Purpose and scope

Purpose:

Investigate the functionality and layout of data cards, focusing on interactive elements, responsiveness, and accessibility. Aesthetic considerations are set aside for this spike.

In scope:

• Data card layout exploration.
• Experimentation with variable numbers of items per row.
• Inclusion of interactive and non-interactive elements in the "Heading" section.
• Implementation of selected and unselected states with differential background treatments (e.g., darker blue in heading, lighter blue in the rest of the card).
• Inclusion of images within the cards.
• Application of variable content alignment as outlined in the documentation.
• Ensuring responsive views for desktop, tablet, and mobile that match the design intent outlined in the docs.
• Stacking of card content into a single column where appropriate.
• Incorporation of full-width buttons in the correct order.
• Ensuring keyboard operability of the data card as per the accessibility documentation.
• Testing screen reader experiences (VoiceOver and NVDA) to identify any unusual behaviors.

Out of scope:

• Aesthetic enhancements beyond what is necessary to test functionality and layout.
• Any styling considerations not related to layout or interactivity.

Acceptance criteria

Criterion 1: data card layout and interactivity

Description:

• Successfully create data cards that display variable numbers of items per row.
• Include both interactive (e.g., buttons, links) and non-interactive elements in the "Heading" section.
• Implement visual differentiation between selected and unselected states using background treatments.
• Integrate images into the data cards effectively.
• Apply content alignment variations as specified in the documentation.
• Arrange card content in a single-column stack where design dictates.
• Ensure buttons are full-width and placed in the correct sequence.

Criterion 2: responsive design implementation

Description:

• The data cards should be fully responsive, adjusting layouts seamlessly across desktop, tablet, and mobile views.
• The responsive behaviour should match the design intentions outlined in the provided documentation.

Criterion 3: accessibility compliance

Description:

• Ensure the data cards are fully operable via keyboard navigation in line with the accessibility documentation.
• Conduct testing using screen readers (VoiceOver and NVDA) to detect and document any unusual behaviors or issues.

Risks and assumptions

Risks:

• Potential challenges in achieving full keyboard operability and screen reader compatibility.
• Possible discrepancies between documented design intentions and practical implementation constraints.
• Unanticipated behaviour in responsive layouts across different devices and screen sizes.

Assumptions:

• All necessary documentation for design intent, content alignment, and accessibility guidelines is available and up to date.
• Screen readers (VoiceOver and NVDA) are properly set up and accessible to be used for testing.

---

Spike Outcome

Background

Context:

This spike builds upon our ongoing efforts to deliver the fully featured Workspace pattern. This pattern is especially useful in displaying tabular data in smaller spaces (sub-sections of screens or on smaller screens). Previous related work includes:

• Data table
• Workspace pattern

Dependencies:

• This work relies on having a clear understanding of how the "data table" component will function.

Approach

Methodology:

1. Layout Prototyping:
   • Developed HTML and CSS prototypes to experiment with different numbers of items per row using CSS Grid and Flexbox.
2. Interactive Elements Integration:
   • Added interactive elements like buttons and links in the heading section to test functionality.
3. State Management:
   • Created CSS classes to represent selected and unselected states with different background colors.
4. Image Handling:
   • Tested inclusion of images of various sizes and aspect ratios within the cards.
5. Content Alignment:
   • Applied text and element alignment properties to match the design specifications.
6. Responsive Testing:
   • Used responsive design mode in browsers and Polypane to test layouts across screen sizes.
7. Accessibility Verification:
   • Ensured keyboard navigation using the arrow and tab keys and screen reader compatibility.
   • Performed testing with VoiceOver on macOS and NVDA on Windows.
8. Documentation Review:
   • Cross-referenced findings with the design and accessibility documentation to ensure compliance.

Tools and Technologies:

• Languages & Frameworks: HTML5, CSS3 (Flexbox, Grid), JavaScript
• Testing Tools: Chrome DevTools, Firefox Developer Tools
• Accessibility Tools: VoiceOver (macOS), NVDA (Windows), aXe Accessibility Engine

Findings

Results:

• Variable Items Per Row:
  • Successfully displayed 1 to 4 data cards per row without layout issues.
• Interactive Heading Elements:
  • Interactive elements functioned correctly, but required ARIA roles for screen reader identification.
• Selected and Unselected States:
  • Visual differences were clear, but color contrast needed adjustment to meet accessibility standards.
• Image Inclusion:
  • Images displayed correctly when aspect ratios were consistent.
• Content Alignment:
  • Achieved the desired alignment using Flexbox properties; some adjustments needed for vertical centring.
• Responsive Views:
  • Layouts adjusted appropriately across devices, matching the design intent.
• Content Stacking:
  • On mobile views, content stacked into a single column seamlessly.
• Full-Width Buttons:
  • Implemented buttons in the correct order with full-width styling; no overflow issues detected.
• Keyboard Operability:
  • All interactive elements were accessible via keyboard navigation.
• Screen Reader Experience:
  • Screen readers read all content; however, labelling needed improvement for clarity.

What Worked:

• CSS Grid and Flexbox provided the necessary flexibility for dynamic layouts.
• Container queries effectively handled responsive design requirements.
• Keyboard navigation functions as defined in the design guidelines.

What Didn't Work:

• Inconsistent image sizes disrupted the layout; needed image size guidelines.
• Initial colour choices for selected states did not meet contrast ratios for accessibility; design needs to be adjusted.
• Some interactive elements lacked proper ARIA labels, leading to confusion during screen reader testing.

Recommendations

Proposed Solutions:

• Standardize Images:
  • Implement image cropping or use placeholder images to maintain consistent dimensions.
• Enhance Accessibility:
  • Adjust color schemes to meet contrast requirements.
  • Add descriptive ARIA labels and roles to interactive elements where screen reader experience is confusing.
• Improve Documentation:
  • Update design guidelines to give clearer guidelines for where to place interactive elements in the card layout.
• Conduct User Testing:
  • Perform usability tests with a diverse group of users, including those who rely on assistive technologies.

Implementation Plan:

1. Update Component Code:
   • Refactor data card code to incorporate standardized image handling and improved accessibility features.
2. Design Review:
   • Collaborate with the design team to adjust color palettes and confirm alignment specifications.
3. Accessibility Audit:
   • Conduct a thorough accessibility audit using automated tools and manual testing.

References and Attachments

Documentation:

• Data Card Design Specifications
• WCAG 2.1 AA Guidelines
• Spike Prototype Repository
• Accessibility Testing Report