Skip to content

1047330: Fixed chart accessibility, b-unit, leak issues. - #44

Open
Yokesh-SF4393 wants to merge 1 commit into
mainfrom
1047330-charts
Open

1047330: Fixed chart accessibility, b-unit, leak issues.#44
Yokesh-SF4393 wants to merge 1 commit into
mainfrom
1047330-charts

Conversation

@Yokesh-SF4393

Copy link
Copy Markdown
Collaborator

Bug description

Need to fix the accessibility issue - aria role issues, tooltip narrator issue, rectangle/path focus issues, release b-unit test cases failures, memory leak issues.

Root cause

  1. Sample author typo. [AccessibilityRole="count"] was set on in [Annotation.razor] thinking [count] was a WAI-ARIA role for a numeric counter. [count] is not a valid WAI-ARIA 1.2 role. The component validator (added in the prior audit round) correctly rejected it at page render with ArgumentException.
  2. The SvgRect and SvgPath Razor templates hardcoded tabindex="@tabindex" and role="img" attributes unconditionally — even when the node was decorative (AriaHidden="true" or no AccessibilityText). Default TabIndex = "" still rendered as tabindex="", which most browsers treat as focusable. Combined with role="img" and no aria-label, screen readers announced an "unlabeled image".
  3. The chart's tooltip element is created by svgbase.Tooltip.appendTo() in chart.js. That library creates a plain
    with no ARIA attributes. WCAG 2.1 SC 4.1.3 (Status Messages) and the WAI-ARIA Authoring Practices both require that dynamic tooltip content have role="status" (or role="alert") + aria-live so screen readers announce updates.

Solution description

  1. Fix invalid ARIA role on Annotation page; page now renders
  2. Fix invalid ARIA role on ChartBasics page; page now renders
  3. Decorative rectangles/paths no longer appear as unlabeled focusable images - SvgRect.razor + SvgPath.razor: omit tabindex / role="img" on decorative SVG nodes
  4. chart.js: helper sets role="status" + aria-live="polite" + aria-atomic="true" on tooltip elements (init-time + on-hover + MutationObserver)

Code Studio usage(Mandatory)

  • Code Studio used in this PR/MR?

    • Yes
    • No
  • If Yes: Primary use (choose one)

    • Generate new code
    • Refactor/improve existing code
    • Tests
    • Bug fix / debugging help
    • Docs / comments
    • Review assistance (explanations/summaries)
    • Other:
  • Outcome

    • Saved time
    • Neutral
    • Cost time
  • If “Cost time” explain in short (1 or 2 lines):

Impact assessment

  • Low - Affects a single feature with minimal user impact
  • Medium - Affects multiple features or has moderate user impact
  • High - Critical functionality or significant user impact

Reason for not identifying earlier

This was recently identified by testing the with MS audit and AI agents. Now identified and fixed.

Areas tested against this fix

Breaking changes

  • Yes (Tag breaking-issue)
  • No

If yes, provide breaking commit details link and migration guidance.

Regression testing

  • Verified fix doesn't reintroduce previous bugs
  • Checked edge cases and error scenarios

Action taken to prevent recurrence

  • Added/updated unit tests
  • Other (specify): _________________
  • NA

Automation status

  • BUnit (provide PR link: _________________)
  • Playwight (provide PR link: _________________)
  • NA

Cross-platform verification

  • Blazor Server
  • Blazor WASM
  • NA

Related issues

Is this issue present in EJ2 or other components?

  • Resolved in EJ2 (PR link: _________________)
  • Created task for EJ2 (Task link: _________________)
  • Needs attention in other components (tag needs-attention-coreteam)
  • NA

Output screenshots

Post the output screenshots if a UI is affected or added due to this bug.

API changes

  • New API added (API Review task link: _________________)
  • Existing API renamed/modified (API Review task link: _________________)
  • No API changes

Performance verification

  • Verified no memory leaks introduced
  • Verified no performance degradation
  • Not applicable

Reviewer Checklist

  • Reviewed the provided Code Studio usages related information.
  • Code changes follow component guidelines
  • All provided information reviewed and verified
  • Solution addresses the root cause effectively

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.

3 participants