Add accessibility labels to Networking page Submit button and input fields#637
Closed
Add accessibility labels to Networking page Submit button and input fields#637
Conversation
Contributor
Author
|
@anupriya13 👋 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. |
Contributor
|
@copilot fix it on New Arch code FABRIC only not in Paper |
Copilot
AI
changed the title
[WIP] [React Native Gallery -> Networking]: The name property of a focusable element must not be null.
Add accessibility labels to Networking page Submit button and input fields
Aug 26, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The Submit button and TextInput components in the Networking example page were missing
accessibilityLabelproperties, causing screen readers to report "The name property of a focusable element must not be null." This violated MAS 4.1.2 accessibility requirements and prevented users with visual impairments from understanding the purpose of these interactive elements.Changes Made
Added
accessibilityLabelproperties to the following components inPostChatCompletionExample:accessibilityLabel="Submit API request"to clearly identify the button's purposeaccessibilityLabel="API key input field"to help users understand this is for entering their OpenAI API keyaccessibilityLabel="Question input field"to identify this as the prompt input areaThe changes were applied to both architecture versions:
src/examples/NetworkExamplePage.tsxNewArch/src/examples/NetworkExamplePage.tsxCode examples in the string literals were also updated to match the component changes.
Impact
Screen readers will now properly announce the purpose of each interactive element, improving accessibility for users with visual impairments and ensuring compliance with accessibility standards.
Fixes #583.
💡 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.
Microsoft Reviewers: Open in CodeFlow