Controls order and HTML structure

[michaelwarren1106]

Love the alpha release!

I was taking a look at the docs page and poking around to see if I can use this component to create my datepicker that i'll need pretty soon, and I found something I'd like to ask about.

Currently the controls at the top are hardcoded into left and right with the month & year select being left, and the next/prev month being right.

As currently coded if I wanted to make a picker like:

I wouldnt really be able to, even with the css parts, because each of the controls elements isnt its own container inside the flexbox container of top-controls. I could reverse the order visually to put the arrows on the left and the month/year select on the right, but I cant put the selects in the middle of the arrows.

Would you be open to a PR that changes that internal style so that all the children of top-controls are separate (removing the stylistic concept of right and left controls)? Additionally, could we potentially order the controls like my desired screenshot above by default (prev arrow, month select, year select, next arrow)? I think that would definitely help the configurability of this component because I think that a lot of folks will end up styling the calendar like my screenshot above, so having the default arrangement of those elements would save lots of styling on the consumer's side.

Thoughts?

[claviska]

This is a good point, and +1 for using a flex container to group all "top controls." Aside from reversing, this would also allow users to specify arbitrary positions via order.

[michaelwarren1106]

Ya, i was checking the code out again, and I think each of the controls, when separated probably becomes a css part/css vars also, so that you can individually style all the controls however you want?

[break-stuff]

I think this is a great idea! I like the flexibility this would provide.

[break-stuff]

It looks like there may be some accessibility issues with rearranging the order with flex.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#the_order_property_and_accessibility

[claviska]

From https://developer.mozilla.org/en-US/docs/Web/CSS/order

If the visual (css) order is important, then screen reader users will not have access to the correct reading order.

Does the visual order matter for these options? For example, if you’re tabbing through the control and can reach every one of them, does it matter which one is first or last?

[break-stuff]

It may be a bit disorienting, but might not be the end of the world.

[michaelwarren1106]

i doubt the order truly matters. and also, my reason for splitting these controls up is to change the default order of the controls to: prev month, month select, year select, next month.

i’m fairly confident that with that as the default order of the controls, there will be very little reason to change the order with flex ordering. imo that default order makes a ton of sense.

[break-stuff]

I was planning on refactoring the controls to be similar to the design above. This original design was based on Chome's date picker implementation.

[michaelwarren1106]

hey hey, bumping this (and the other) thread! Would you be open to accepting PRs for these features/redesigns?

[break-stuff]

Yes, please! Sorry for the delay. Life has been crazy busy.