(fix): Update props of OpenmrsDatePicker

NethmiRodrigo commented 3 months ago

Requirements

[x] 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 commented 3 months ago

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

github-actions[bot] commented 3 months ago

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 commented 3 months ago

@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 commented 3 months ago

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

ibacher commented 3 months ago

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.

openmrs / openmrs-esm-form-engine-lib