[Solved] Changing aria-label on splitter splitbar

[Miljana]

So request is to change splitbar aria-label so that '50' (or whatever percent) is removed from aria-label. I have tried changing it through splitterBarAttributes. With this setup, NVDA still reads 50 Test separator.

<kendo-splitter 
  orientation="vertical" 
  max="1000">
  <kendo-splitter-pane
    max="500"
    [splitterBarAttributes]="{ 'aria-label': 'Test' }"
  >
    <app-my-component></app-my-component>
  </kendo-splitter-pane>
  <kendo-splitter-pane
      min="500"
      [splitterBarAttributes]="{ 'aria-label': 'Test' }"
  >
    <app-my-component></app-my-component>
  </kendo-splitter-pane>
</kendo-splitter>

[Martin Bechev]

Hi Miljana,

The "50" comes from the ARIA specification's default value for aria-valuenow.

The splitter bar component has role="separator" which, according to the ARIA spec, implicitly has:

aria-valuemin = 0
aria-valuemax = 100
aria-valuenow = 50 (the default midpoint)

Since the splitter-bar is focusable, NVDA reads it as an interactive range widget and announces the implicit default value of 50. 

We intentionally do not set aria-valuenow, due to the complex layout the Splitter can have. aria-valuenow can get ambiguous (it's indeterminate what the value should be in case of more complex splitter configurations). More details can be found here:

https://www.telerik.com/kendo-angular-ui/components/layout/splitter/accessibility#wai-aria-support

Since the aria-valuenow is announced for elements with role="separator", but should be removed, the option is to reset the role property to a button on none:

 ngAfterViewInit(): void {
    this.removeAriaValueNow();
  }

  private removeAriaValueNow(): void {
      const splitBars = document.querySelectorAll(".k-splitbar");

      splitBars.forEach((bar) => {
        bar.setAttribute("role", "button");
      });
  }

You can continue using the splitterBarAttributes property and set the aria-valuenow to a value that would be meaningful to you. But in case no value should be announced, follow the aforementioned approach.

Regards,
Martin Bechev
Progress Telerik