Skip to content

Conversation

protikbiswas100
Copy link
Contributor

@protikbiswas100 protikbiswas100 commented Sep 25, 2025

Description

adding accessibility checks in pipeline

Type of Change

  • New feature (non-breaking change which adds functionality)

Why

adding accessibility checks in pipeline

Resolves [Add Relevant Issue Here]

What

adding accessibility checks in pipeline

Screenshots

Add any relevant screen captures here from before or after your changes.

Testing

If you added tests that prove your changes are effective or that your feature works, add a few sentences here detailing the added test scenarios.

Optional: Describe the tests that you ran locally to verify your changes.

Changelog

Should this change be included in the release notes: indicate yes or no

Add a brief summary of the change to use in the release notes for the next release.

Microsoft Reviewers: Open in CodeFlow

@protikbiswas100 protikbiswas100 requested review from a team as code owners September 25, 2025 06:44
@protikbiswas100
Copy link
Contributor Author

/azp run

Copy link

Azure Pipelines failed to run 2 pipeline(s).

@protikbiswas100 protikbiswas100 self-assigned this Sep 25, 2025
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR adds accessibility testing capabilities to the React Native Windows CI/CD pipeline by integrating automated accessibility checks during pull request validation.

  • Adds a new accessibility testing stage that runs on PR builds
  • Implements comprehensive accessibility validation using axe-core and custom scanning
  • Integrates with React Native Gallery for real-world component testing

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.

File Description
.ado/stages.yml Adds the new accessibility testing job to the build pipeline
.ado/jobs/accessibility-tests.yml Implements the complete accessibility testing workflow with Gallery integration

Comment on lines +88 to +96
- script: |
echo "Checking PR changes for accessibility compliance..."
git diff origin/main --name-only | grep -E "\.(tsx?|jsx?)$" | head -20 | while read file; do
if [ -f "$file" ]; then
echo "Scanning $file for accessibility patterns..."
# Check for accessibility props
grep -n "accessibility\|testID\|aria-" "$file" || echo "No accessibility props found in $file"
fi
done
Copy link
Preview

Copilot AI Sep 25, 2025

Choose a reason for hiding this comment

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

This bash-style script with pipes and grep commands will fail on Windows agents. The pipeline should use PowerShell commands or cross-platform alternatives since this is targeting Windows build agents.

Suggested change
- script: |
echo "Checking PR changes for accessibility compliance..."
git diff origin/main --name-only | grep -E "\.(tsx?|jsx?)$" | head -20 | while read file; do
if [ -f "$file" ]; then
echo "Scanning $file for accessibility patterns..."
# Check for accessibility props
grep -n "accessibility\|testID\|aria-" "$file" || echo "No accessibility props found in $file"
fi
done
- powershell: |
Write-Host "Checking PR changes for accessibility compliance..."
$files = git diff origin/main --name-only | Select-String -Pattern '\.(ts|tsx|js|jsx)$' | Select-Object -First 20
foreach ($fileObj in $files) {
$file = $fileObj.ToString().Trim()
if (Test-Path $file) {
Write-Host "Scanning $file for accessibility patterns..."
$matches = Select-String -Pattern 'accessibility|testID|aria-' -Path $file -SimpleMatch
if ($matches) {
$matches | ForEach-Object { Write-Host $_ }
} else {
Write-Host "No accessibility props found in $file"
}
}
}

Copilot uses AI. Check for mistakes.

Comment on lines +124 to +125
testResultsFormat: 'JUnit'
testResultsFiles: '**/accessibility-*.xml'
Copy link
Preview

Copilot AI Sep 25, 2025

Choose a reason for hiding this comment

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

The pipeline expects JUnit XML files but the accessibility tools are configured to generate JSON files (accessibility-results.json). Either change the expected format to match the generated files or configure the tools to output XML format.

Copilot uses AI. Check for mistakes.

- script: |
echo "Installing accessibility testing tools..."
yarn add --dev @axe-core/cli axe-playwright @playwright/test
yarn add --dev accessibility-checker
Copy link
Preview

Copilot AI Sep 25, 2025

Choose a reason for hiding this comment

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

Installing dependencies during the build process is inefficient and unreliable. These dependencies should be added to package.json and installed during the standard dependency installation step.

Suggested change
yarn add --dev accessibility-checker

Copilot uses AI. Check for mistakes.

cd $(GalleryPath)
npx react-native run-windows --no-launch --no-packager --arch x64 --release
displayName: 'Build Gallery Windows App'

Copy link
Preview

Copilot AI Sep 25, 2025

Choose a reason for hiding this comment

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

The Gallery app is built with --no-packager flag but later the accessibility check tries to connect to localhost:8081, which is typically the Metro bundler port. This creates an inconsistency since the packager won't be running.

Suggested change
# Start Metro bundler (packager) in background
- script: |
echo "Starting Metro bundler..."
cd $(GalleryPath)
start "" cmd /c "npx react-native start"
timeout /t 10 /nobreak
displayName: 'Start Metro Bundler'

Copilot uses AI. Check for mistakes.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Why does it say Azure Pipelines failed to run 2 pipeline(s)?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@copilot why did Azure Pipelines failed to run

@protikbiswas100
Copy link
Contributor Author

/azp run

Copy link

Azure Pipelines failed to run 2 pipeline(s).

Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

Comment on lines +64 to +66
npx axe --chrome-options="--no-sandbox --disable-dev-shm-usage" --save accessibility-results.json --reporter json http://localhost:8081 || true

# Also run accessibility checks on any locally running RNW components
Copy link
Preview

Copilot AI Sep 26, 2025

Choose a reason for hiding this comment

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

The axe command is trying to test http://localhost:8081 but there's no evidence that a web server is started on this port. The Gallery app is launched as a native Windows executable, not a web server.

Suggested change
npx axe --chrome-options="--no-sandbox --disable-dev-shm-usage" --save accessibility-results.json --reporter json http://localhost:8081 || true
# Also run accessibility checks on any locally running RNW components
# The axe CLI cannot be used directly on the native Windows app, as it is not served on http://localhost:8081.
# To run accessibility checks, use Playwright or another tool to automate the native app UI.

Copilot uses AI. Check for mistakes.

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.

1 participant