Skip to content

(feat) O3-5299: Enhance WCAG 2.1 compliance for search components#356

Open
sanks011 wants to merge 4 commits intoopenmrs:mainfrom
sanks011:accessibility-improvements
Open

(feat) O3-5299: Enhance WCAG 2.1 compliance for search components#356
sanks011 wants to merge 4 commits intoopenmrs:mainfrom
sanks011:accessibility-improvements

Conversation

@sanks011
Copy link
Copy Markdown

@sanks011 sanks011 commented Sep 2, 2025

Requirements

  • This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
  • My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
  • My work includes tests or is validated by existing tests.

Summary

This PR significantly enhances accessibility compliance across the cohort builder's search components, implementing comprehensive WCAG 2.1 AA standards for healthcare applications.

Key Improvements:

  • ARIA Implementation: Added comprehensive ARIA labels, descriptions, and roles across all search components
  • Screen Reader Support: Implemented 25+ new translation keys for contextual screen reader announcements
  • Keyboard Navigation: Full arrow key, Enter, and Escape support with visual focus management
  • Semantic HTML: Professional fieldset/legend structure for form sections
  • Error Handling: Accessible error announcements with try/catch blocks
  • Focus Management: Enhanced visual focus indicators with strong contrast ratios

Components Enhanced:

  • SearchByConcepts: Added fieldset/legend structure, comprehensive ARIA patterns
  • SearchConcept: Implemented full keyboard navigation with visual highlighting
  • SearchByDemographics: WCAG 2.1 compliant form structure with proper labeling
  • SearchButtonSet: Enhanced with loading state announcements and error messaging
  • Global CSS: Added screen reader utility classes

Healthcare Compliance:

  • Addresses critical accessibility barriers in healthcare applications
  • Supports assistive technologies (JAWS, NVDA, VoiceOver)
  • Implements professional healthcare UI patterns
  • Ensures equitable access for users with disabilities

Screenshots

  • Visual design unchanged - all improvements are assistive technology enhancements
  • Added proper focus indicators for keyboard navigation
  • Screen reader content is properly hidden from visual display

Related Issue

Jira Ticket: https://openmrs.atlassian.net/browse/O3-5299
This is a proactive accessibility improvement addressing documented OpenMRS accessibility needs.

Other

  • All existing tests pass
  • TypeScript compilation successful
  • Follows OpenMRS conventional commit standards
  • Ready for community review and testing with assistive technologies

…uilder

- Add complete keyboard navigation with arrow keys, Enter, Escape
- Implement WCAG 2.1 AA compliant form structures and ARIA patterns
- Add professional error handling and loading state announcements
- Fix screen reader compatibility with proper sr-only classes
- Enhance focus management and visual indicators
- Remove duplicate scrollbars and redundant UI elements
- Add 25+ accessibility-focused translation keys

Addresses documented accessibility barriers identified in professional OpenMRS audits.
Ensures healthcare compliance and improves usability for users with disabilities.
@sanks011 sanks011 changed the title feat(accessibility): enhance WCAG 2.1 compliance for search components feat(accessibility) O3-5299 : enhance WCAG 2.1 compliance for search components Dec 29, 2025
@sanks011 sanks011 changed the title feat(accessibility) O3-5299 : enhance WCAG 2.1 compliance for search components feat(accessibility): O3-5299 enhance WCAG 2.1 compliance for search components Dec 29, 2025
width: 100%;
max-height: 400px;
overflow: auto;
overflow: visible;
Copy link
Copy Markdown

@RajPrakash681 RajPrakash681 Feb 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this change intentional to prevent clipping of focus indicators? If so, consider using overflow: visible only for the z-axis and keep overflow-y: auto to handle vertical scrolling.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@RajPrakash681 Good catch! You're right - changing to overflow: visible broke scrolling and wasn't actually needed.

The focus indicators are inside .conceptList (which has its own overflow-y: auto), so .search's overflow wasn't the clipping boundary anyway.

Fixed by:

  1. Reverting .search to overflow-y: auto
  2. Using inset box-shadow on .focused so focus indicators stay within the scroll container

Thanks for the review! 🙌

@RajPrakash681
Copy link
Copy Markdown

@sanks011 else nice work!

@sanks011
Copy link
Copy Markdown
Author

@sanks011 else nice work!

Thank You!

@denniskigen denniskigen changed the title feat(accessibility): O3-5299 enhance WCAG 2.1 compliance for search components (feat) O3-5299: Enhance WCAG 2.1 compliance for search components Mar 11, 2026
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.

2 participants