PickList: Accessibility

[ZeroBrushV2]

Describe the bug

1. Using the picklist PrimeFaces will generate together with the picklist this HTML:

<div id="j_idt318:pickList_ariaRegion" class="ui-helper-hidden-accessible" role="region" aria-live="polite" aria-atomic="true"></div>

This is very useful for accessibility, but it's missing the aria-label that will allow the screen reader to identify it and read it.

---

Using the filter feature PrimeFaces will generate this HTML:
<input id="j_idt318:pojoPickList_source_filter" name="j_idt318:pojoPickList_source_filter" type="text" autocomplete="off" class="ui-picklist-filter ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ui-source-filter-input" aria-label="Filter" tabindex="0">

There are two problems with this:
2. The aria-label will be the same for sourceList and destinationList, as you can immagine for the user could be a bit confusing
3. The filter has a aria-label but there isn't the possibility to add a label or placeholder to it

Reproducer

You can check it out using the showcase for PickList

Expected behavior

1. The HTML generated for the element with role=region should include aria-label (as per ARIA standard):
   <div id="j_idt318:pickList_ariaRegion" class="ui-helper-hidden-accessible" role="region" aria-live="polite" aria-atomic="true" aria-label="MYPICKLISTREGIONDESCRIPTION"></div>

The aria-label could be implemented in different ways:

• Insert using a param on <p:pickList> like "description" or "roleAriaLabel".
• Insert using f:facet like <f:facet name="description">MYPICKLISTREGIONDESCRIPTION</f:facet>

---

2. Add two params to the <p:pickList> like sourceFilterLabel and destinationFilterLabel that will generate a label above it like this:

<div class="ui-picklist-filter-container">
  <label for="j_idt318:pojoPickList_source_filter">Available Countries Filter</label>
  <input
    id="j_idt318:pojoPickList_source_filter"
    name="j_idt318:pojoPickList_source_filter"
    type="text"
    autocomplete="off"
    class="ui-picklist-filter ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ui-source-filter-input"
    aria-label="Filter"
    tabindex="0"/>
<span class="ui-icon ui-icon-search"></span>
</div>

Furthermore should be able to:

• Must have a label for source and destination list. So the params will be sourceFilterLabel and destinationFilterLabel
• In case one of the "filterLabels" is not present the label can follow the rules of point 1, have as the default Source List Filter and Destination List Filter in the .properties

---

3. And add another param called "filterPlaceholder" that will generate the input for the filter with the specified placeholder:

<div class="ui-picklist-filter-container">
  <input
    id="j_idt318:pojoPickList_source_filter"
    name="j_idt318:pojoPickList_source_filter"
    type="text"
    autocomplete="off"
    class="ui-picklist-filter ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ui-source-filter-input"
    aria-label="Filter"
    tabindex="0"/ placeholder="MYCUSTOMPLACEHOLDER">
<span class="ui-icon ui-icon-search"></span>
</div>

As before the default can be insert in the .properties and must have a label for source and another for destination

PrimeFaces edition

Community

PrimeFaces version

12.0.0

Theme

No response

JSF implementation

MyFaces

JSF version

2.3

Java version

1.8

Browser(s)

No response

[melloware]

I think..

sourceFilterPlaceholder and targetFilterPlaceHolder will do the job.

[ZeroBrushV2]

@melloware could you please elaborate more.
Those params are intended for just the point number 3 right?

[melloware]

I will have a PR up shortly for you to review. I think I have them all fixed.

[melloware]

OK so just a question on aria-region right now it looks like its used for the item you have clicked on. Say on the showcase I click on "Afghanistan" it would render...

<div id="j_id_8z:pojoPickList_ariaRegion" class="ui-helper-hidden-accessible" 
role="region" aria-live="polite" aria-atomic="true">Afghanistan</div>

What is the purpose of that Region it looks like its is intended to read the "focused" item in the Picklist? Then shouldn't the aria-label just be the focused element like...

<div id="j_id_8z:pojoPickList_ariaRegion" class="ui-helper-hidden-accessible" 
role="region" aria-live="polite" aria-atomic="true" aria-label="Afghanistan">Afghanistan</div>

???

[ZeroBrushV2]

OK so just a question on aria-region right now it looks like its used for the item you have clicked on. Say on the showcase I click on "Afghanistan" it would render...

<div id="j_id_8z:pojoPickList_ariaRegion" class="ui-helper-hidden-accessible" 
role="region" aria-live="polite" aria-atomic="true">Afghanistan</div>

What is the purpose of that Region it looks like its is intended to read the "focused" item in the Picklist? Then shouldn't the aria-label just be the focused element like...

<div id="j_id_8z:pojoPickList_ariaRegion" class="ui-helper-hidden-accessible" 
role="region" aria-live="polite" aria-atomic="true" aria-label="Afghanistan">Afghanistan</div>

???

Yup, that should be the right answer, unfortunately I first misunderstood what was used for, but reading the ARIA specification it says that helps the user to scroll through the items, so your interpretation is correct, the aria-label should have the same content of the element, example aria-label="Afghanistan">Afghanistan</div>