(fix): Update props of OpenmrsDatePicker

[NethmiRodrigo]

Requirements

• This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
• My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
• My work includes tests or is validated by existing tests.

Summary

This PR updates the props of OpenmrsDatePicker following the latest updates to it in #1041. This fixes the issue of the label disappearing.

Screenshots

Related Issue

Other

Temporarily required questions are marked with an asterisk conditionally added to the label (it won't have the usual styling of required as other questions have)

[NethmiRodrigo]

Not quite sure why the builds are failing because of the updated yarn.lock. I bumped up the openmrs framework

[github-actions]

Size Change: -212 B (-0.02%)

Total Size: 1.01 MB

ℹ️ View Unchanged

Filename	Size	Change
dist/184.js	11.2 kB	0 B
dist/195.js	76.6 kB	+4 B (+0.01%)
dist/225.js	2.57 kB	0 B
dist/29.js	163 kB	-47 B (-0.03%)
dist/300.js	709 B	0 B
dist/327.js	1.84 kB	0 B
dist/335.js	967 B	0 B
dist/353.js	3.02 kB	0 B
dist/41.js	3.36 kB	0 B
dist/422.js	6.79 kB	0 B
dist/474.js	116 kB	0 B
dist/491.js	9.18 kB	0 B
dist/540.js	2.63 kB	0 B
dist/55.js	756 B	0 B
dist/635.js	14.3 kB	0 B
dist/70.js	482 B	0 B
dist/776.js	3.2 kB	0 B
dist/800.js	245 kB	-127 B (-0.05%)
dist/99.js	690 B	0 B
dist/993.js	3.09 kB	0 B
dist/main.js	343 kB	-42 B (-0.01%)
dist/openmrs-form-engine-lib.js	3.72 kB	0 B

_{compressed-size-action}

[samuelmale]

@NethmiRodrigo The failing tests related to "date" are likely due to the change from a Carbon-powered date picker to an OpenMRS date picker powered by React Aria. You need to update the Jest query selectors for date components.

[denniskigen]

@ibacher is textbox the correct ARIA role for accessing the DatePicker input?

[ibacher]

the correct ARIA role for accessing the DatePicker input?

I think the issue here is that while there is an input element, it's actually hidden. This is one the DOM looks like:

<div class="cds--date-picker-container">
  <div id="react-aria2069207481-:r3:" aria-labelledby="react-aria2069207481-:r3:" role="group" class="eXcUhF5ZpNWZ3OlKhXUMXg==" data-rac="">
    <div id="react-aria2069207481-:r2:" role="presentation" class="cds--date-picker-input__wrapper uII7FeucLrFs-Af8g8kCyw== T+6T96TC3kCxfOH65T1-Ew==" data-rac="">
      <div role="spinbutton" aria-valuenow="6" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="12" id="react-aria2069207481-:rd:" aria-label="month" data-placeholder="true" contenteditable="true" spellcheck="false" autocapitalize="none" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="y0UkqiHZyhSMYufjZCjTIg==" data-rac="" data-type="month">mm</div>
      <div aria-hidden="true" class="y0UkqiHZyhSMYufjZCjTIg==" data-rac="" data-readonly="true" data-type="literal">/</div>
      <div role="spinbutton" aria-valuenow="24" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="30" id="react-aria2069207481-:rh:" aria-label="day" data-placeholder="true" contenteditable="true" spellcheck="false" autocapitalize="none" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="y0UkqiHZyhSMYufjZCjTIg==" data-rac="" data-type="day">dd</div>
      <div aria-hidden="true" class="y0UkqiHZyhSMYufjZCjTIg==" data-rac="" data-readonly="true" data-type="literal">/</div>
      <div role="spinbutton" aria-valuenow="2024" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="9999" id="react-aria2069207481-:rl:" aria-label="year" data-placeholder="true" contenteditable="true" spellcheck="false" autocapitalize="none" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="y0UkqiHZyhSMYufjZCjTIg==" data-rac="" data-type="year">yyyy</div>
    </div>
    <input type="text" hidden="" class="react-aria-Input" data-rac="" value="" title="">
    <button id="react-aria2069207481-:r0:" type="button" aria-label="Calendar" aria-labelledby="react-aria2069207481-:r0: react-aria2069207481-:r3:" aria-haspopup="dialog" aria-expanded="false" class="X1NNzzez9EnBY5O3ILWxNw== DET4S1DSDZaVLvmh-S1Rxg==" data-rac="">
      <svg class="omrs-icon lm0xPurkbjQWJuek8DdMqA==" height="16" width="16" viewBox="0 0 16 16" style="--omrs-icon-fill: currentColor;">
        <use xlink:href="#omrs-icon-calendar"></use>
      </svg>
    </button>
  </div>
</div>

IIRC, the testing-library makes an effort to avoid any hidden elements.