Calendar: the Next button draws its chevron before the word; it belongs after it #902

New issue

Closed

opened 2026-10-12 18:18:57 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-10-12 18:18:57 +00:00

Owner

In every calendar view, the Next button of the period group (#858) draws its chevron before the word: › Next. It should come after it, Next ›, so the arrow points the way the button goes and mirrors ‹ Previous on the other side of the group.

Where

templates/applications/calendar.html:170:

<a … data-step="next">{% icon "chevron-right" %}<span class="…btn-label…">{% translate "Next" %}</span></a>

The icon comes first in the markup. Previous (:168) is right as it is, with the chevron before the word.

What to do

Put {% icon "chevron-right" %} after the label span on the Next button.
Right-to-left languages: the order follows the markup, so Next › is drawn as ‹ Next mirrored, but the chevron glyphs themselves must flip, as the breadcrumb already does with data-rtl-flip (cotton/crumb.html). Add data-rtl-flip to both chevrons if they do not flip yet.
With labels off (#859, chevrons alone), nothing changes visually. The label stays sr-only and the accessible name still comes from aria-label.

Done when

In month, week, day and agenda views, with labels shown, the button reads Next › in a left-to-right language, with the chevron pointing the right way in a right-to-left one.
A test checks that, inside [data-step="next"], the label comes before svg[data-icon="chevron-right"].

Checked against main at 75f31208b.

In every calendar view, the *Next* button of the period group (#858) draws its chevron **before** the word: `› Next`. It should come **after** it, `Next ›`, so the arrow points the way the button goes and mirrors `‹ Previous` on the other side of the group. ## Where `templates/applications/calendar.html:170`: ```django <a … data-step="next">{% icon "chevron-right" %}<span class="…btn-label…">{% translate "Next" %}</span></a> ``` The icon comes first in the markup. *Previous* (`:168`) is right as it is, with the chevron before the word. ## What to do - Put `{% icon "chevron-right" %}` after the label span on the *Next* button. - Right-to-left languages: the order follows the markup, so `Next ›` is drawn as `‹ Next` mirrored, but the chevron glyphs themselves must flip, as the breadcrumb already does with `data-rtl-flip` (`cotton/crumb.html`). Add `data-rtl-flip` to both chevrons if they do not flip yet. - With labels off (#859, chevrons alone), nothing changes visually. The label stays `sr-only` and the accessible name still comes from `aria-label`. ## Done when - In month, week, day and agenda views, with labels shown, the button reads `Next ›` in a left-to-right language, with the chevron pointing the right way in a right-to-left one. - A test checks that, inside `[data-step="next"]`, the label comes before `svg[data-icon="chevron-right"]`. Checked against `main` at `75f31208b`.

tiagoagueda added the

bug

interface

labels

2026-10-12 18:19:02 +00:00

tiagoagueda commented

2026-10-13 08:34:13 +00:00

Author

Owner