No button labels as in jqueryUI datepicker about jquery-ui-month-picker

[KidSysco]

labels or the title attribute is already in there. By putting text in the button instead of an icon, it ends up breaking the UI producing a button that cannot be read. This could be fixed with some alternative styling but in order to include this sort of a change, more work should be done to handle that for the developer using the plugin. I would be willing to look at that as a pull request if anyone were to make an attempt. Arrows going back and forth are universal so the text is not needed unless it is on mouse over, which is already there. I do not think I will include this change unless an argument can be presented why.

My justification would be that the JQueryUI datepicker has the text in the button markup.

See line 1671 of datepicker.js to confirm this behavior. https://github.com/jquery/jquery-ui/blob/master/ui/datepicker.js

Since this is supposed to by a month picker consistent with jquery-ui I think that behavior should be as consistent as possible.

[KidSysco]

Interesting observation! I cannot imagine why they do it, probably something to do with accessibility. The reason we are not seeing the same affect is due to how we are using a jQuery UI button (line 246) and they are manually building a link with some styles (ui-icon) in it that have set the text to use a negative indentation of -999999px so that the text will not appear.

When we use the jquery UI button to make the button instead, the UI button library should handle everything we need, even for accessibility features.

For this project, we did not feel that there would be any troubles using the button widget. However, for the jQuery UI team, their widgets must be totally independent of one another because they can be broken apart and used individually. We have thrown checks into this plugin to ensure that jQuery, jQuery UI, the button(), and datepicker() widgets are loaded (line 206) as they are requirements for this plugin to work.

With all that said, do you still see any need for this? If so, we can continue to discuss. We really appreciate your input!

Yes, I would say we still need this - We discovered this issue because our style team chose to omit the icon on the datepicker, and use the text links instead of the icons (So our theme doesn't use the -999999px indentation)

I think the text should be available for that use case, since it is available in datepicker. I would guess the stylesheet should be updated with the -9999999px indentation in addition to whats in the pull request, for consistency. I was unaware that indent rule was in the jqueryUI base themes , as I was using our in house stylesheet when doing testing.

[KidSysco]

OK so it seems like this is for folks who do not want to use the icon at all.

I looked up the docs and it says this about prevText for the datepicker....

"The text to display for the previous month link. With the standard ThemeRoller styling, this value is replaced by an icon."

But if this is the case, then IMO, they should have included a configuration option that would simply remove the icons and let the text shine through. I would call it UseButtons : false or something like that.

But they chose to leave this up to the theme. Kinda strange to me but OK.

Before we take off and create a pull request for this let me ask you another question about it...

Should there really be a nextText prop for this purpose?

prevYear: "Previous Year",
nextYear: "Next Year",
nextText: "Next",
prevText: "Prev",

As you can see, the prevYear and nextYear is really the text to be used here. That is what we use for the title on mouse over. So I would think we could just use the same text for both.

What do you think?

Good question - I don't know if there's a right answer.

If we go with the jQuery UI implementation, then nextYear and prevYear should be sufficient - However, the text "Previous Year" is quite long - It's useful for tooltip and 508 screen reader stuff, but is too large for the button space where something more succinct is needed.

While I would like to keep it in line with JQueryUI's implementation - I think in this case having a separate label which can provide that shorter text is useful while still allowing a more detailed label for 508/tooltip.

[KidSysco]

OK, I see your point.

You are quite convincing!

If you can get it to work, I will merge it.

I have not updated this project to use grunt. I am just using qUnit on this one and all unit testing has been done on jsfiddle so far.

I know that is a bit of a pain, so i can do the unit testing on it if you adjust your pull request as discussed.

Let m know and thanks again for your input!

Pull request should have the relevant changes now. I also moved the 5 years button labels to i18n