Column resize grip: aria-label on role="presentation" is discarded (axe: aria-prohibited-attr, aria-valid-attr-value)

[s-asoft]

Version

@svar-ui/react-grid@2.7.2 (reached via @svar-ui/react-gantt@2.7.1)

What happens

The column resize grip is rendered with both role="presentation" and an aria-label:

// dist/index.es.js
n.resize && h && !e._hidden ? (
  <div
    className="wx-... wx-grip"
    role="presentation"
    aria-label="Resize column"
    ref={Z}
    onClick={(k) => k.stopPropagation()}
  >
    <div />
  </div>
) : null

role="presentation" removes the element's semantics, which means the aria-label on it is discarded — the name never reaches assistive technology. So the intent of that aria-label isn't achieved, and the combination is prohibited by ARIA.

axe-core 4.13 reports the same element under two rules:

• aria-prohibited-attr — "ARIA attribute is not allowed: aria-label"
• aria-valid-attr-value

Selector, from the report: div[data-header-id=":text"] > .wx-grip[role="presentation"][aria-label="Resize column"]

Why it looks like a real bug rather than a lint nit

The aria-label is clearly deliberate — someone wanted the grip named. As written it does nothing, so a screen-reader user gets no indication the column is resizable.

There's also a second-order question: the grip carries an onClick handler and is a functional control, but presentation marks it as decoration.

Suggested fixes

Either would resolve both rules:

1. Drop the aria-label and keep role="presentation", if the grip is meant to be decoration and resizing is available another way. Simplest, and honest about the current behaviour.
2. Give it a role that permits a name, if it is meant to be an operable control — e.g. role="separator" with aria-orientation="vertical", or a real <button>. That's the route that actually makes the existing aria-label work, and would let keyboard users resize.

How it was found

Running axe-core against rendered Storybook stories in a downstream app; it accounts for ~15 of the violations in our suite, all from this one element across the grids a Gantt renders.

Happy to test a patch. Noting your package.json points bugs at https://forum.svar.dev — filing here since GitHub issues are enabled, and glad to move it if the forum is preferred.

[MariyaDemy]

Good day @s-asoft ,

We appreciate how detailed the report you provided. It sound reasonable for me so I have passed it to our development team. We will let you know about the updates.

As for the future bug reports or suggestions, you can choose yourself where to post it: here or at forum, we will watch both channels. Thank you one more time.