Skip to content

Fix NVDA screen reader grouping announcement for Query Insights controls #449

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tnaum-ms merged 10 commits into from
Jan 19, 2026
Merged

Fix NVDA screen reader grouping announcement for Query Insights controls #449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
93d1db6
Initial plan
Copilot Jan 14, 2026
fe1a686
Fix NVDA grouping label announcement for like/dislike buttons
Copilot Jan 14, 2026
2565f13
Merge branch 'next' into copilot/fix-nvda-grouping-label
tnaum-ms Jan 14, 2026
5d4f5bc
Merge branch 'next' into copilot/fix-nvda-grouping-label
tnaum-ms Jan 19, 2026
8d70fd7
Add ARIA grouping to Query Plan Summary and Performance Rating
Copilot Jan 19, 2026
4abe6b0
Merge branch 'next' into copilot/fix-nvda-grouping-label
tnaum-ms Jan 19, 2026
f0a4c8e
fix: prettier-fix
tnaum-ms Jan 19, 2026
67a79c0
fix: improve accessibility by updating ARIA attributes in Performance…
tnaum-ms Jan 19, 2026
4496805
fix: enhance accessibility by adding ARIA roles and labels in QueryPl…
tnaum-ms Jan 19, 2026
2c748be
Merge branch 'next' into copilot/fix-nvda-grouping-label
tnaum-ms Jan 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 26 additions & 19 deletions ...ebviews/documentdb/collectionView/components/queryInsightsTab/components/FeedbackCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,26 +16,33 @@ export interface FeedbackCardProps {
export const FeedbackCard = ({ onFeedback }: FeedbackCardProps): JSX.Element => {
return (
<Card>
<Text size={400} weight="semibold" style={{ display: 'block', marginBottom: '12px' }}>
{l10n.t('How would you rate Query Insights?')}
</Text>
<div style={{ display: 'flex', gap: '8px' }}>
<Button
appearance="subtle"
size="small"
icon={<ThumbLikeRegular />}
onClick={() => onFeedback('positive')}
<div role="group" aria-labelledby="query-insights-rating-label">
<Text
id="query-insights-rating-label"
size={400}
weight="semibold"
style={{ display: 'block', marginBottom: '12px' }}
>
{l10n.t('I like it')}
</Button>
<Button
appearance="subtle"
size="small"
icon={<ThumbDislikeRegular />}
onClick={() => onFeedback('negative')}
>
{l10n.t('It could be better')}
</Button>
{l10n.t('How would you rate Query Insights?')}
</Text>
<div style={{ display: 'flex', gap: '8px' }}>
<Button
appearance="subtle"
size="small"
icon={<ThumbLikeRegular />}
onClick={() => onFeedback('positive')}
>
{l10n.t('I like it')}
</Button>
<Button
appearance="subtle"
size="small"
icon={<ThumbDislikeRegular />}
onClick={() => onFeedback('negative')}
>
{l10n.t('It could be better')}
</Button>
</div>
</div>
</Card>
);
Expand Down
27 changes: 23 additions & 4 deletions ...llectionView/components/queryInsightsTab/components/queryPlanSummary/QueryPlanSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,11 @@ export const QueryPlanSummary: React.FC<QueryPlanSummaryProps> = ({
return (
<Card className="planSection">
<div
role="group"
aria-labelledby="query-plan-summary-label"
style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}
>
<Text size={400} weight="semibold">
<Text id="query-plan-summary-label" size={400} weight="semibold">
{l10n.t('Query Plan Summary')}
</Text>
{stage2Data && (
Expand Down Expand Up @@ -150,6 +152,8 @@ export const QueryPlanSummary: React.FC<QueryPlanSummaryProps> = ({
return (
<div
key={shard.shardName}
role="group"
aria-labelledby={`shard-${shard.shardName}-label`}
style={{
backgroundColor: tokens.colorNeutralBackground1,
borderRadius: '6px',
Expand All @@ -165,6 +169,7 @@ export const QueryPlanSummary: React.FC<QueryPlanSummaryProps> = ({
{/* Shard Summary (always visible) */}
<div style={{ padding: '12px' }}>
<Text
id={`shard-${shard.shardName}-label`}
weight="semibold"
size={300}
style={{ display: 'block', marginBottom: '8px' }}
Expand Down Expand Up @@ -292,6 +297,8 @@ export const QueryPlanSummary: React.FC<QueryPlanSummaryProps> = ({
) : (
/* Non-sharded query view */
<div
role="group"
aria-labelledby="your-cluster-label"
style={{
backgroundColor: tokens.colorNeutralBackground1,
borderRadius: '6px',
Expand All @@ -300,11 +307,23 @@ export const QueryPlanSummary: React.FC<QueryPlanSummaryProps> = ({
>
{/* Summary (always visible from Stage 1) */}
<div style={{ padding: '12px' }}>
<Text weight="semibold" size={400} style={{ display: 'block', marginBottom: '8px' }}>
<Text
id="your-cluster-label"
weight="semibold"
size={400}
style={{ display: 'block', marginBottom: '8px' }}
>
{l10n.t('Your Cluster')}
</Text>
{/* Stage flow with badges */}
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '8px' }}>
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '6px',
marginBottom: '8px',
}}
>
{[...stage1Data.stages].reverse().map((stage, index) => {
// Check if this stage has failed (from extended stage info)
const stageIndex = [...stage1Data.stages].length - 1 - index; // Original index before reverse
Expand All @@ -326,7 +345,7 @@ export const QueryPlanSummary: React.FC<QueryPlanSummaryProps> = ({
</React.Fragment>
);
})}
</div>{' '}
</div>
{/* Metrics - show skeleton until Stage 2 data is available */}
{(!stage2Data || stage2Loading) && (
<Skeleton>
Expand Down
3 changes: 3 additions & 0 deletions ...nView/components/queryInsightsTab/components/summaryCard/custom/PerformanceRatingCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,13 +114,16 @@ export const PerformanceRatingCell: React.FC<PerformanceRatingCellProps> = ({
customContent = (
<CollapseRelaxed visible={visible}>
<div
role="group"
aria-label={label}
className="efficiencyIndicator"
style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', columnGap: '8px', rowGap: '8px' }}
>
{/* First row, first column: dot */}
<div
className="efficiencyDot"
style={{ backgroundColor: getRatingColor(rating), alignSelf: 'center' }}
aria-hidden="true"
/>
{/* First row, second column: rating text */}
<Text weight="semibold" style={{ alignSelf: 'center' }}>
Expand Down