Skip to content

Conversation

Copy link

Copilot AI commented Sep 22, 2025

This PR resolves accessibility issues that prevented screen reader users from interacting with the required "Post Type" and "Post Tags" dropdown fields on the "Ask a question" page.

Problem

Users with screen readers (such as VoiceOver on Mac) were unable to interact with the dropdown controls for selecting post types and tags, making it impossible to submit questions through assistive technology. This created a significant accessibility barrier for users with visual impairments.

Solution

Enhanced both dropdown widgets with comprehensive accessibility features:

Post Type Dropdown

  • Added aria-label="Select post type" for proper labeling
  • Added aria-required="true" to indicate required field status
  • Added aria-describedby linking to help text for context

Post Tags Dropdown

  • Added full ARIA attribute support (label, required, describedby)
  • Enhanced JavaScript with keyboard navigation mapping for all relevant keys
  • Added aria-live announcements when selections change
  • Implemented proper role and state management (role="combobox", aria-expanded)

Progressive Enhancement

  • Added CSS fallbacks ensuring native HTML select elements work when JavaScript is disabled
  • Enhanced focus indicators for better visibility across all interaction modes
  • Added <noscript> instructions for screen reader users in JavaScript-free environments

Testing

Verified functionality through browser automation testing:

  • Keyboard navigation works correctly (Tab, Arrow keys, Enter, Space)
  • Screen readers properly recognize both dropdowns as interactive form controls
  • Both enhanced JavaScript widgets and fallback native selects are accessible
  • ARIA attributes are correctly applied and functional

The solution maintains full backward compatibility while providing robust accessibility support across different assistive technologies and browsing scenarios.

Fixes #109.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copy link
Author

Copilot AI commented Sep 22, 2025

@LiNk-NY 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.

…tion page

Co-authored-by: LiNk-NY <4392950+LiNk-NY@users.noreply.github.com>
Copilot AI changed the title [WIP] Multiple choice controls on "Ask a question" page -- screen reader accessibility Fix screen reader accessibility for "Ask a question" page dropdowns Sep 22, 2025
Copilot AI requested a review from LiNk-NY September 22, 2025 13:48
Copilot finished work on behalf of LiNk-NY September 22, 2025 13:48
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.

Multiple choice controls on "Ask a question" page -- screen reader accessibility

2 participants