Skip to content

feat: About this market modal#623

Merged
greatest0fallt1me merged 1 commit into
Predictify-org:mainfrom
AdEmOnD07:feature/about-market
Jul 25, 2026
Merged

feat: About this market modal#623
greatest0fallt1me merged 1 commit into
Predictify-org:mainfrom
AdEmOnD07:feature/about-market

Conversation

@AdEmOnD07

Copy link
Copy Markdown
Contributor

Implements accessible 'About this market' educational modal detailing resolution criteria and oracle parameters for the GrantFox FWC26 campaign.

What Changed

  • Created new Client Component AboutMarketModal detailing the prediction market's question, oracle source, target resolution date, and Yes/No outcome criteria.
  • Updated MarketHero to support rendering this modal trigger in its Actions row.
  • Updated the market page Server Component to pass the modal into the hero component.
  • Fixed a compilation error in components/ui/dialog.tsx where useRef was referenced without prefixing React..
  • Registered AboutMarketModal in the internal accessibility board (app/a11y-audit/page.tsx), the documentation board (docs/a11y-status.md), and the accessibility manifest (app/data/a11y-manifest.json).

Accessibility

  • Screen reader announcements: Uses explicit labels (aria-labelledby/aria-describedby) and comprehensive hidden sr-only descriptions for screen readers.
  • Keyboard trapping and return: Implements DialogContentWithFocusReturn to ensure focus is restored to the trigger button when the modal closes.
  • Color contrast: Meets WCAG 2.1 AA text contrast requirements in both light and dark modes.

Test Output

Added unit and integration test suites:

  • PASS app/components/tests/AboutMarketModal.test.tsx
  • PASS app/markets/[id]/tests/hero.test.tsx
  • PASS app/tests/a11y-manifest.test.js

Closes #362

Pull Request

Description

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update
  • Performance improvement
  • Refactoring (no functional changes)
  • Style/UI changes
  • Test updates
  • CI/CD changes
  • Security improvements

Related Issues

Closes #[issue-number]
Related to #[issue-number]

Changes Made

Files Modified

  • [List specific files and changes made]
  • [Include file paths and line numbers if relevant]

Key Changes

  • [Describe the main changes and their impact]
  • [Include any architectural decisions made]

Testing

  • Unit tests added/updated
  • Integration tests added/updated
  • Manual testing completed
  • Cross-browser testing (if applicable)
  • Mobile responsiveness tested (if applicable)
  • Accessibility testing completed
  • Performance testing (if applicable)

Test Coverage

  • New code is covered by tests
  • Existing tests still pass
  • Test coverage meets project standards

Screenshots/Videos

Minimum screenshots for UI/design PRs

  • Desktop default state
  • Mobile default state
  • One stressed state: error, empty, loading, success, validation, open menu, or open modal
  • Focus-visible screenshot for the primary interactive element (required when focus behavior changed)
  • Open overlay screenshot for modal, drawer, popover, select, or date picker (required when applicable)
  • Quick actions closed and open states (required for toolbar, FAB, or bottom-sheet action changes)
  • Keyboard-open mobile screenshot and desktop sticky state (required for sticky action panel changes)

Before

After

Pre-submission Checklist

Code Quality

  • Code follows project style guidelines
  • Self-review completed
  • Code is self-documenting
  • No console errors or warnings
  • No linting errors
  • No TypeScript errors (if applicable)

Functionality

  • All tests pass
  • Feature works as expected
  • No breaking changes introduced
  • Performance impact assessed

Documentation

  • README updated (if applicable)
  • Code comments added where necessary
  • API documentation updated (if applicable)
  • Changelog updated (if applicable)

Security & Accessibility

  • Security considerations addressed
  • Accessibility standards met
  • No sensitive data exposed
  • Input validation implemented

Breaking Changes

Breaking Changes:

  • [List any breaking changes]

Migration Steps:

  • [Provide steps for users to migrate]

Additional Notes

Dependencies

  • No new dependencies added
  • Dependencies updated (list changes)
  • Security vulnerabilities addressed

Performance Impact

  • No performance impact
  • Performance improved
  • Performance impact documented

Browser/Device Support

  • Tested on Chrome
  • Tested on Firefox
  • Tested on Safari
  • Tested on Edge
  • Tested on mobile devices

Labels

  • feature - for new features
  • bugfix - for bug fixes
  • documentation - for documentation changes
  • enhancement - for improvements
  • breaking-change - for breaking changes
  • frontend - for frontend changes
  • backend - for backend changes
  • ui/ux - for design changes

Reviewers

  • Frontend team review
  • Backend team review (if applicable)
  • Design team review (if applicable)
  • Security review (if applicable)

Note: Please ensure all checkboxes are completed before submitting this PR. This helps maintain code quality and speeds up the review process.

Implements accessible 'About this market' educational modal detailing resolution criteria and oracle parameters for the GrantFox FWC26 campaign.

## What Changed

- Created new Client Component `AboutMarketModal` detailing the prediction market's question, oracle source, target resolution date, and Yes/No outcome criteria.
- Updated `MarketHero` to support rendering this modal trigger in its Actions row.
- Updated the market page Server Component to pass the modal into the hero component.
- Fixed a compilation error in `components/ui/dialog.tsx` where `useRef` was referenced without prefixing `React.`.
- Registered `AboutMarketModal` in the internal accessibility board (`app/a11y-audit/page.tsx`), the documentation board (`docs/a11y-status.md`), and the accessibility manifest (`app/data/a11y-manifest.json`).

## Accessibility

- Screen reader announcements: Uses explicit labels (`aria-labelledby`/`aria-describedby`) and comprehensive hidden `sr-only` descriptions for screen readers.
- Keyboard trapping and return: Implements `DialogContentWithFocusReturn` to ensure focus is restored to the trigger button when the modal closes.
- Color contrast: Meets WCAG 2.1 AA text contrast requirements in both light and dark modes.

## Test Output

Added unit and integration test suites:
- PASS app/components/__tests__/AboutMarketModal.test.tsx
- PASS app/markets/[id]/__tests__/hero.test.tsx
- PASS app/__tests__/a11y-manifest.test.js

Closes Predictify-org#362
@vercel

vercel Bot commented Jul 25, 2026

Copy link
Copy Markdown

@AdEmOnD07 is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Jul 25, 2026

Copy link
Copy Markdown

@AdEmOnD07 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@greatest0fallt1me
greatest0fallt1me merged commit 4cae329 into Predictify-org:main Jul 25, 2026
1 check failed
@greatest0fallt1me

Copy link
Copy Markdown
Contributor

LGTM — solid tests too. Merged 🌟

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add accessible 'About this market' modal

2 participants