TabView: allow aria-label attribute for scrollable buttons

[kyybo]

Describe the feature you would like to see added

Hello !
Is it possible to allow the aria-label attribute on the buttons (previous and next) on each side of the tab headers when you have a scrollable TabView? These generated buttons don't seem to be customizable.

Is your feature request related to a problem?

No response

Describe the solution you'd like

Maybe we could have a scrollableOptions attribute for the TabView component and the properties of these buttons would be used as an object in it (a bit like the virtualScrollerOptions attribute in the DataTable component).

Describe alternatives you have considered

No response

Additional context

No response

[kyybo]

In fact, there are many buttons (or divs with the attribute role='button' or form element), which are generated by components, that do not have an 'aria-label' attribute.
For example :

• in the DataTable component: the filter button generated by the property filterDisplay='menu' (1)
• in the DataTable component : the paginator dropdown to select the number of lines to display ('RowsPerPageDropdown') (2)
• in the MultiSelect component : the button to close the selection list (3)
• in the MultiSelect component : there is a 'p-hidden-accessible' div which is generated with an input element in it, but this element has no aria-label attribute (4)
• ect.

(1)

(2)

(3)

(4)

All these small elements generate accessibility errors.

I know that the accessibility part of PrimeReact is under development and that there is a lot of work to do and things to think about. But I just wanted to know if you are aware of these small defects.

[melloware]

Yep I have seen these myself when I run Lighthouse on my app.

[melloware]

OK here is what I did in my PR. I reuse the same ARIA labels from PrimeLocale that I use in Paginator buttons.

See: https://github.com/primefaces/primelocale/blob/main/en.json

Locale: https://primefaces.org/primereact/locale/

I am using the nextPageLabel and previousPageLabel

"aria": {
            "trueLabel": "True",
            "falseLabel": "False",
            "nullLabel": "Not Selected",
            "pageLabel": "Page",
            "firstPageLabel": "First Page",
            "lastPageLabel": "Last Page",
            "nextPageLabel": "Next Page",
            "previousPageLabel": "Previous Page"
      }

[melloware]

@kyybo Can you open separate issue for Datatable Aria label I will fix those too.

[kyybo]

@melloware Alright I'll do it. Thank you !