Improve accessibility for price fields of the type select by adding the price field label to the placeholder.

[alifrumin]

Overview

Due to limitations in Select2, screen readers don't read the labels of Select2 fields. As a stopgap, this adds the price field label to the placeholder text for price fields of the type select. The placeholder text is read by the screenreader.

Before

When using a price field of the type select on an event registration or contribution form the placeholder text was "- select -".

For example if the price field label was "Shirt Size" the place holder would be "- select -".

After

When using a price field of the type select on an event registration or contribution form the placeholder text is "- select $priceFieldLabel -".

For example if the price field label is "Shirt Size" the place holder would be "- select Shirt Size -".

Comments

Continues work outlined in #17675

[civibot]

(Standard links)

• If this is your first pull-request for CiviCRM, please browse CONTRIBUTING.md for information about the development and testing processes.
• If you are reviewing this pull-request, you may wish to consult the test sites and the Review Standards (long template, short template).

[eileenmcnaughton]

Looks good - just added merge ready in case @colemanw or @mlutfy have thoughts on the translation side

[mlutfy]

Unfortunately it does make assumptions about how strings are concatenated. In French and most languages, it would look bad to have "sélectionner Taille de chandail" (incorrect capitalization and grammar).

Edit: maybe we can translate as "- Sélectionner : Taille de chandail -"

However, accessiblity is important, so I maybe minor bad grammar might be acceptable.

What about #20825 ?

[seamuslee001]

@mlutfy I think your reference was meant to be #20926

[mlutfy]

No i really meant the select2 upgrade :)
Doesn't it have better accessibility?

But I guess it might take a while, so maybe not a good fix.

[aydun]

Edit: maybe we can translate as "- Sélectionner : Taille de chandail -"
However, accessiblity is important, so I maybe minor bad grammar might be acceptable.

Anything to help screenreaders is good! Maybe we can accept some dodgy grammar in translation if it communicates usefully.

[shaneonabike]

Disclosure: I'm not someone who has visual impairments so I can only comment and would prioritize the needs of those who are commenting and have this accessibility need

In my experience with design/integration usually the text simply displays what the action is. So in this case it would be Shirt sizes rather than Select Shirt Sizes.

I did a simple test with a Screen Reader on a Civi form and it does indicate that it is a "Menu". So for example, if it were Shirt Sizes then it indicated "Shirt Sizes combobox push button to open menu"

[mlutfy]

@alifrumin Any thoughts on displaying just the field label, without "select -"?

[alifrumin]

That seems like a reasonable solution to me. @agh1 any thoughts?

Should we then update the place holder text for custom field selects as well (#17675)?

[agh1]

@mlutfy I'm with @alifrumin in that the - select Shirt Size - problem of capitalization is the same for all custom fields and it would be reasonable to standardize in a way that sidesteps it. I don't have any real opposition to dropping the "select" but we really should be consistent throughout CiviCRM. I'm sorry I missed this in all the prior work.

This PR, as it stands, resolves that by bringing price fields in line with everything else. I'd suggest that the best approach would be to merge it as-is and then engage more people in the much larger question--and task--of updating all select boxes to be consistently something better.

Besides the obvious consideration that there are a lot of - select Something - placeholders throughout the code, making it a fair amount of work to change it all, there's also the question of what to do with certain placeholders that need to indicate that the blank field is actually any option rather than no option.

I'd also suggest that select boxes for price fields seem relatively less common than either select boxes for other fields or other input types for price fields. I don't think that many people will be impacted by the change on this PR, so it is much lower in impact than a potential later one that changes how nearly every drop-down everywhere works.

[mlutfy]

OK - makes sense.

I did a quick test on the demo site, it looks like this in French:

(I created a 'fruit' field with apples and oranges)

I still think it looks weird, but accessibility over design, and folks can override the translation if not happy. As @agh1 mentions, CiviCRM is already behaving like that in other places, so I'm late to the party :)

Thank you @alifrumin !