[Bug]: TimePicker is completely broken

[mochouinard]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

When you click on the TimePicker on the documentation page (or on a local install copy of the last release), the pop-up open, but no time is being displayed when selected, some items like the AM / PM move round, and number are there, but they are not the right color, and too big for the box. It just all over the place.
https://materializeweb.com/pickers.html

Current Behavior

https://materializeweb.com/pickers.html
TimePicker open but displayed data is wrong, and interaction doesn't work like it should

Expected behavior

TimePicker to popup, you select a hour and minutes and it display on the left.

Possible Solutions or Causes

No response

Steps to reproduce

1. https://materializeweb.com/pickers.html
2. Click the TimePicker

Your Environment

• Version used:
• Browser Name and version: Chrome 102 and firefox 125.0.3
• Operating System and version (desktop or mobile): Desktop Linux Ubuntu
• Additional information you want to tell us:

[iozuniga]

Work around:

     @media only screen and (max-width: 600px) {
        .timepicker-digital-display {
        width: 100%;
        }
     }
     @media only screen and (min-width: 601px) {
        .timepicker-digital-display {
        width: 40%;
        }
     }
     .timepicker-text-container input[type=text] {
     color: var(--md-sys-color-on-background);
     border-bottom: 0px!important;
     font-size: 3rem;
     padding: 0px 2px!important;
     }
     .timepicker-display-am-pm {
        right: 0rem;
     }

[gselderslaghs]

As per PR #486 I don't see any advantage on defining the input fields as buttons, since they should be accessible with keyboard input aligned to the international standards of web accessibility, the implementation should make gathering and recording the results as simple as possible.

Reducing the user input fields to buttons would reduce the exposure to the accessibility API and should be considered invalid. This affects people who rely on keyboard control.

I've also tested the timepicker functionality on Materialize v2.1.1 and am not experiencing the issue as described in your subject, as selected time is rendered correctly in the hour and minute input fields as in the base input field. I do notice some quirks in the design as margins and paddings do not align with the Material standards, specifically on the mobile version.

Regarding this mobile alignment issue I'm experiencing, I applied some quick fixes within the browser inspector and applied them to a CodePen example

[gselderslaghs]

Just came across additional issues with the Timepicker component:

• In light theme the hour/minutes fields input text is not visible to the end-user, seems like a styling issue on the font-color declaration which currently does not seem to take theme change into account
• Difficulties tabbing through the interface, what makes it a bad experience towards accessibility. This could be enhanced adjusting the input text elements to input number elements, as they can be adjusted by numeric keyboard input and with the up and down arrow key

Currently looking into fixing the styling bug with light theme, implementing additional functionality for accessibility and tabbable enhancements

[gselderslaghs]

Managed to fix the invalidity in CSS within the 601px and 734px media query match by redefining CSS declarations following the Material guidelines as mentioned in PR #502
This issue can be closed after validation

[gselderslaghs]

I have reviewed the latest merge and found out there was still a misalignment in the button text on vertical alignment
This was caused by a typo in the button component and has been addressed in PR #532, propose to close this issue when the button component fix PR has been reviewed and merged