Skip to content

Feat/pool distribution bar a11y#379

Closed
Devadakene wants to merge 2 commits into
AnchorNet-Org:mainfrom
Devadakene:feat/pool-distribution-bar-a11y
Closed

Feat/pool distribution bar a11y#379
Devadakene wants to merge 2 commits into
AnchorNet-Org:mainfrom
Devadakene:feat/pool-distribution-bar-a11y

Conversation

@Devadakene

Copy link
Copy Markdown
Contributor

Closes #143
Description
This PR enhances the accessibility and interactivity of the PoolDistributionBar component by making each legend entry focusable and visually highlighting the corresponding SVG segment on hover or focus.

Changes
Accessibility Upgrade: Wrapped the static legend items (

  • ) with keyboard-focusable elements styled to blend in seamlessly.
    Visual Feedback: Added a stateful highlightedAsset hook to detect which legend entry is hovered/focused.
    Segment Highlighting: SVG elements now visually dim (opacity reduces to 0.4) when another asset is active, keeping the highlighted segment fully visible.
    DOM Metadata: Added data-highlighted="true"|"false" attributes to the SVG elements to aid testing and potential CSS target hook.
    Coverage & Tests: Extended
    PoolDistributionBar.test.tsx
    with test assertions checking:
    Button elements exist in the legend for focusability.
    Hovering or focusing legend entries correctly updates the visual representation (opacity, custom attributes).
    Verification
    Ran the vitest test suite successfully:

    bash

    bun run vitest run src/components/PoolDistributionBar.test.tsx
    Result: All tests passed.

  • @Jagadeeshftw

    Copy link
    Copy Markdown
    Contributor

    Thanks for this — after resolving the merge, this ends up fully redundant with main: both the api.ts timeout/AbortSignal composition and the PoolDistributionBar hover-highlight accessibility feature already landed via #380 (that branch carried this same content). Zero net diff left, so closing as already covered rather than merging a duplicate.

    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.

    Add a keyboard-focusable legend that highlights its segment in PoolDistributionBar

    2 participants