Repository: ionic-team/ionic-framework
File: core/src/components/datetime/datetime.tsx (TypeScript)

Code before:
              }}
              part="month-year-button"
              disabled={disabled}
              aria-label={this.showMonthAndYear ? 'Hide year picker' : 'Show year picker'}
              onClick={() => this.toggleMonthAndYearView()}
            >
              <span id="toggle-wrapper">
                {getMonthAndYear(this.locale, this.workingParts)}
                <ion-icon
                  aria-hidden="true"
                  icon={this.showMonthAndYear ? expandedIcon : collapsedIcon}
                  lazy={false}
                  flipRtl={true}
                ></ion-icon>
              </span>
              {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
            </button>
          </div>

          <div class="calendar-next-prev">
            <ion-buttons>
              <ion-button
                aria-label="Previous month"
                disabled={prevMonthDisabled}
                onClick={() => this.prevMonth()}
                part="prev-next-buttons prev-button"
              >
                <ion-icon
                  dir={hostDir}
                  aria-hidden="true"
                  slot="icon-only"
                  icon={chevronBack}
                  lazy={false}
                  flipRtl
                ></ion-icon>
              </ion-button>
              <ion-button
                aria-label="Next month"
                disabled={nextMonthDisabled}
                onClick={() => this.nextMonth()}
                part="prev-next-buttons next-button"
              >
                <ion-icon
                  dir={hostDir}
                  aria-hidden="true"
                  slot="icon-only"
                  icon={chevronForward}
                  lazy={false}
                  flipRtl
                ></ion-icon>
              </ion-button>

Review comment (refactor):
I'm torn on the `prev-next-buttons` naming because usually we just name it a shared name like in the components that have helper text & error text we call them `supporting-text`:

```html
<div class="helper-text" part="supporting-text helper-text">{helperText}</div>
<div class="error-text" part="supporting-text error-text">{errorText}</div>
```

I would think we would do something similar here like:

```suggestion
                part="navigation-button previous-button"
```

I spelled out `previous` because using full words improves readability and makes translations easier.


Code after:
                'ion-activatable': true,
                'ion-focusable': true,
              }}
              part="month-year-button"
              disabled={disabled}
              aria-label={this.showMonthAndYear ? 'Hide year picker' : 'Show year picker'}
              onClick={() => this.toggleMonthAndYearView()}
            >
              <span id="toggle-wrapper">
                {getMonthAndYear(this.locale, this.workingParts)}
                <ion-icon
                  aria-hidden="true"
                  icon={this.showMonthAndYear ? expandedIcon : collapsedIcon}
                  lazy={false}
                  flipRtl={true}
                ></ion-icon>
              </span>
              {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
            </button>
          </div>

          <div class="calendar-next-prev">
            <ion-buttons>
              <ion-button
                aria-label="Previous month"
                disabled={prevMonthDisabled}
                onClick={() => this.prevMonth()}
                part="navigation-button previous-button"
              >
                <ion-icon
                  dir={hostDir}
                  aria-hidden="true"
                  slot="icon-only"
                  icon={chevronBack}
                  lazy={false}
                  flipRtl
                ></ion-icon>
              </ion-button>
              <ion-button
                aria-label="Next month"
                disabled={nextMonthDisabled}
                onClick={() => this.nextMonth()}
                part="navigation-button next-button"
              >
                <ion-icon
                  dir={hostDir}
                  aria-hidden="true"
                  slot="icon-only"
                  icon={chevronForward}
                  lazy={false}
                  flipRtl