LPD-17368 Accessibility issue in Pagination Picker

[ilzamcmed]

Jira issue: https://liferay.atlassian.net/browse/LPD-17368

[ethib137]

We need a better name for this variable. This is the aria label for the pagination delta picker. In general our props that are used only as an aria-label, include aria label in the name. If we use this as the title (tooltip) then we could not include ariaLabel in the name. The date picker and color picker include an aria-labels prop that adds all aria labels to that object. So that's another option, but since we only have one aria-label currently that might be too much. So maybe pageDeltaPickerAriaLabel or itemsPerPagePickerTitle of it makes sense to add this to a title/tooltip then pageDeltaPickerTitle or itemsPerPagePickerTitle.

Additionally, we need to think about the default label. Maybe Items Per Page. This would result in the screen reader reading: "Items Per Page Combo box, 20 items." @marcoscv-work What do you think?

[matuzalemsteles]

We used to use ariaLabels to group all of this due to internationalization but last year we changed to using a name that could group ariaLabels and other texts, so we are using messages now.

I wouldn't add it now because it would introduce a new separate API, but I would keep it as is using labels and move it to messages in the main version.

[marcoscv-work]

Additionally, we need to think about the default label. Maybe Items Per Page. This would result in the screen reader reading: "Items Per Page Combo box, 20 items." @marcoscv-work What do you think?

Sounds much better for me "Items Per Page" for the picker, label much more help

[ethib137]

Thanks @marcoscv-work.

So the variable should probably be called itemsPerPagePickerAriaLabel and the default value should be "Items Per Page". Does that sound okay?

[ethib137]

Since we are adding a new language key in this PR, when we release this in Portal we will need to simultaneously add a new language key to language.properties and add the additional key to all usages of this component. @ilzamcmed can you create a ticket for this? @matuzalemsteles do we already have a process for making sure we apply these additional changes to portal as part of the Clay release?

[matuzalemsteles]

do we already have a process for making sure we apply these additional changes to portal as part of the Clay release?

In fact we have no process for this, when we add a new key, we make this key optional when it is inside the object to avoid a breaking change, for example when the component has already declared labels but a new key was added this would cause a build error. So this is treated as breaking change.

We normally do this but we don't update all DXP use cases due to workforce so as not to delay the release. But we can include this or we can start prioritizing the work on integrating Liferay.Language with the portal so that we only need to change in one place.

[ethib137]

Thanks @matuzalemsteles , that makes sense.

But we can include this or we can start prioritizing the work on integrating Liferay.Language with the portal so that we only need to change in one place.

I think it makes more sense to prioritize integrating Liferay.Language, like we've discussed before. Something like a ClayMessageProvider. Do you remember where we discussed this previously. I think it was on a ticket or something. I'll create a new story for this and start working on the requirements.

[matuzalemsteles]

I think it makes more sense to prioritize integrating Liferay.Language, like we've discussed before. Something like a ClayMessageProvider. Do you remember where we discussed this previously. I think it was on a ticket or something. I'll create a new story for this and start working on the requirements.

Yes, something like that. We have a ticket that discussed this but I think we need to create another one with this type of story. https://liferay.atlassian.net/browse/LPS-190534

[matuzalemsteles]

LGTM

[ethib137]

LGTM. Thanks!