Datatable/Tree/TreeTable: Accessibility - aria-label filter input

[kyybo]

Describe the bug

Hello,
In those 3 components (DataTable/Tree/TreeTable), you can set the 'filter' property, which will add a text field.
However, the inputs generated do not have the 'aria-label' attribute.
(https://dequeuniversity.com/rules/axe/4.7/label?application=axeAPI)

PS : Same problem observed in PrimeVue components

Reproducer

No response

PrimeReact version

9.6.0

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

Tree :

<Tree value={nodes} filter filterMode="lenient" filterPlaceholder="Lenient Filter" className="w-full md:w-30rem" />

Genered input : <input type="text" autocomplete="off" class="p-tree-filter p-inputtext p-component" placeholder="Lenient Filter" data-pc-section="input" value="">

TreeTable (or DataTable with filterDisplay="row") :

<TreeTable value={nodes} header={header} filterMode={filterMode} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name"></Column>
    <Column field="size" header="Size" filter filterPlaceholder="Filter by size"></Column>
    <Column field="type" header="Type" filter filterPlaceholder="Filter by type"></Column>
</TreeTable>

Generated input : <input class="p-inputtext p-component p-column-filter p-column-filter" placeholder="Filter by name" data-pc-name="inputtext" data-pc-section="root" value="">

DataTable filterDisplay="menu" :

Generated input : <input class="p-inputtext p-component p-column-filter p-column-filter" type="text" placeholder="Search by name" data-pc-name="inputtext" data-pc-section="root" value="">

Expected behavior

No response

[melloware]

Hmm but I thought ARIA rules that screenreaders "read the placeholder" ?

[kyybo]

I think not all screenreaders can read placeholders, but I will check

[melloware]

Let me know I am always confused by the ARIA rules about what requires aria-label and what will read a placeholder or title tooltip.

[kyybo]

All interactive elements must have an accessible name.
By default, a button's accessible name is the content between the opening and closing tags, an image's accessible name is the content of its alt attribute, and a form input's accessible name is the content of the associated element.

If none of these options are available, or if the default accessible name is not appropriate, then, we use the aria-label attribute to define the accessible name of an element.
aria-label can be used in cases where text that could label the element is not visible.

So, is placeholder can be use as an accessible name ?
In the API implementation Guide by W3C (https://www.w3.org/TR/html-aam-1.0/), the Accessible Name calculation is made that way :

1. Use aria-label or aria-labelledby
2. Otherwise use the associated label element
3. Otherwise use the title attribute
4. Otherwise use the placeholder attribute
5. If none of the above yield a usable text string there is no accessible name

So it seems that the placeholder can indeed, be used as an accessible name, but I don't know if this document guarantees that screenreader publishers must handle placeholders.

However, this page https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research is full of research on placeholder and almost all of them advice us against the use of placeholder as a label.

I'm by no means an expert in web accessibility, on the contrary, I'm gradually discovering and learning about the subject for the purposes of my work. I'm also confused by all these ARIA rules sometimes.

[kyybo]

By the way, do you use a library or anything else to perform accessibility tests on your components? If so, can I know which one?

[melloware]

By the way, do you use a library or anything else to perform accessibility tests on your components? If so, can I know which one?

I have used a bunch but one thing I will caveat is they ALL report false positives. The only REAL test is having a human with disabilities test your component or site.

See this exact example of that of Chrome reporting something that is not wrong: primefaces/primefaces#10254

But tools I have used:

WAVE: https://wave.webaim.org/

W3C Validator: https://validator.w3.org/