feat: Add vocalization of dropdown item count

[BenjaminEmiliani]

Tested and validated on iOS 26.4 - iPhone 17. Behaviour is almost identical to what is observed on mac Voice Over.

[cypress]

spartacus    Run #52562

Run Properties:   Passed #52562  •  5c3d28501d ℹ️: Merge 8f59b0532d203e5543bb914f6a5cc4c8fa41c7fa into 1b95711df69929ab3dba4aedf184...

Project	spartacus
Branch Review	fix/CXSPA-12456-vocalize_list_item_count
Run status	Passed #52562
Run duration	04m 15s
Commit	5c3d28501d ℹ️: Merge 8f59b0532d203e5543bb914f6a5cc4c8fa41c7fa into 1b95711df69929ab3dba4aedf184...
Committer	Benjamin Emiliani
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	3
Pending	0
Skipped	0
Passing	101
View all changes introduced in this branch ↗︎

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build.
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build.
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build.
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

[Pucek9]

Please add a new method and move this logic into it, and call it in the constructor.
It will allow overraidabilty

[BenjaminEmiliani]

Done

[Pucek9]

Imo woth to separate into another method:

  protected createItemCountSpan() {
    const itemCountSpan = this.renderer.createElement('span');
    this.renderer.addClass(itemCountSpan, 'cx-ng-select-count');
    this.renderer.addClass(itemCountSpan, 'cx-visually-hidden');
    this.renderer.setAttribute(itemCountSpan, ARIA_HIDDEN, 'true');
    this.renderer.appendChild(this.elementRef.nativeElement, itemCountSpan);
    const countId =
      (this.elementRef.nativeElement.id || 'ng-select') + '-count';
    this.renderer.setAttribute(itemCountSpan, 'id', countId);
    const inputCombobox =
      this.elementRef.nativeElement.querySelector('[role="combobox"]');
    if (inputCombobox) {
      this.renderer.setAttribute(inputCombobox, 'aria-describedby', countId);
    }
    this.destroyRef.onDestroy(() => itemCountSpan.remove());
    return itemCountSpan;
  }

[BenjaminEmiliani]

Done

[Pucek9]

Then we can simplify

Suggested change

	let itemCountSpan = this.elementRef.nativeElement.querySelector(
	'.cx-ng-select-count'
	);
	const itemCountSpan = this.elementRef.nativeElement.querySelector(
	'.cx-ng-select-count'
	) ?? createItemCountSpan();

[BenjaminEmiliani]

done

[Pucek9]

ngSelectDropdownOptionsList

@uroslates I can see you introduced it year ago and Ben would like to continue this semantic.
Is it some new customary to include the library name in the translation key? Is there a reason for that?

Suggested change

	"ngSelectDropdownCount": "{{count}} option available",
	"ngSelectDropdownCount_other": "{{count}} options available"
	"dropdownCount": "{{count}} option available",
	"dropdownCount_other": "{{count}} options available"

[BenjaminEmiliani]

The only reason I can think of is clarity

[BenjaminEmiliani]

Renamed to dropdownItemCount

[uroslates]

Yes the reason was clarity because at that time the lib did not support customisation for these kind of customization. Later they introduced the config for controlling this. I think its good that you've renamed it.

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build.
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

[Pucek9]

Would prefer ratcher

Suggested change

	this.vocalizeItemCount();
	if (this.featureConfigService.isEnabled('a11yVocalizeDropdownItemCount')) {
	this.vocalizeItemCount();
	}

what do you think?

[BenjaminEmiliani]

I agree - Done