UX/design debt 3

[jorisleker]

• Consistent page loading experience. The nav menu and footer should not be visible while content is still loading. → Fix more UX/design debt #267
  • On /overview, you briefly see the page footer right below the top navigation bar whilst the content of the page is loading.
  • On /1/input the entire page is white whilst page is loading: this is how we want it to be.
• on /input allow polling-station-numbers starting with 0 (i.e. 033). Strip leading zeros before doing lookup of the polling station number in the database (002 and 02 should evaluate to 2) → Some design fixes #284
• Hints on how to submit forms with keyboard have been redesigned to better show they are keyboard shortcuts. Implement new design. → Some design fixes #284
• in input-grids, when the contents of a cell wraps over two lines, the row-height increases because the text does not fit into remaining cell height. Fix: → Some design fixes #284
  • input-grid td's should have padding:.5rem 1.5 rem (iso 1rem 1.5rem) and line-height:1.25rem (iso inherited value of 1.5rem
  • see screenshots. 1 is before fix, 2 is how it should look
    
    
• Fix space grotesk font rendering straight quotes as curly quotes #346
  • See Typewriter quotes look like ending quotation marks floriankarsten/space-grotesk#44, what do we do with this?
  • → Remove quotes from fixture polling station name #337

After #133 is fixed:

• Pressing Enter in the last input row returns focus to the first row, it should move focus to the submit button. will be fixed in Improve keyboard navigation on list data entry page #207
• Shift+Enter doesn't work (Safari on macOS). → Form component shortcuts #295
• With the tab-key I can highlight the "volgende" button and then submit by hitting the space bar. I can also highlight the navigation items on the left, but there hitting the space bar does not get me to the item I highlighted. No fix needed. Spacebar does not submit actions by default. Only ENTER does.
• Add custom checkbox component to be able to better style checkboxes and radiobuttons (ie the "confirm to accept warnings" and "recounted" questions) → Custom checkbox #292

[praseodym]

@jorisleker what do we do about the Space Grotesk font rendering straight quotes as curly quotes? There is an issue opened with the font (floriankarsten/space-grotesk#44) but it doesn't look like there's any progress made on this.

[jorisleker]

@praseodym
Just downloaded a list of all polling station from TK2023 from https://waarismijnstemlokaal.nl/data. None of them has " or ' in their name. So i'd say this is a very low priority issue. Don't think we will use quotes in h1 elements ourselves. My suggestion: don't fix.

The weird thing is, Space Grotesk actually has straight (single and double) quotes. see Google Fonts glyphs page. But it looks like the chars are flipped in the fontset. When I copy/paste these straight quotes from the screenshot below, I get these chars: ′ and ″... So a fix would be to do a replace in all text we render to the front-end, but feels way too hacky.

[jorisleker]

Woops, my bad. There are quite some polling stations with names like 't Gasthoes or BMV “De Schakel” (about 60 on 10.000 polling stations). Disregard my previous 'don't fix' suggestion. Still low prio though

[praseodym]

What about renaming our example polling stations so that we don't have quotes there? I can align it with the names from the Figma design.

[praseodym]

The weird thing is, Space Grotesk actually has straight (single and double) quotes. see Google Fonts glyphs page. But it looks like the chars are flipped in the fontset. When I copy/paste these straight quotes from the screenshot below, I get these chars: ′ and ″... So a fix would be to do a replace in all text we render to the front-end, but feels way too hacky.

Those are the Unicode prime (U+2032) and double prime (U+2033) symbols. I'm not sure why the font would have those but not proper quote glyphs.

[jorisleker]

What about renaming our example polling stations so that we don't have quotes there? I can align it with the names from the Figma design.

Hiding the issue does not make it go away 😂 But fine with me.
As long as we have an extended test set with names witn quotes

Those are the Unicode prime (U+2032) and double prime (U+2033) symbols. I'm not sure why the font would have those but not proper quote glyphs.

Ah check. Alternative would be to use Space Mono to render straight quotes, because that font has proper quotes. But that feels like an even bigger hack (and requires including an additional font).

[lkleuver]

how do we handle keyboard shortcuts?
We can add a listener to buttons for instance,
or I have something laying around that does

useKeyboard({
 "shift+enter": doSomething
 });

[praseodym]

how do we handle keyboard shortcuts? We can add a listener to buttons for instance, or I have something laying around that does

useKeyboard({
 "shift+enter": doSomething
 });

In the polling station selector we use this, I think that works fine:

abacus/frontend/app/component/form/polling_station_choice/PollingStationSelector.tsx

Lines 46 to 50 in 53afc53

	onKeyDown={(e) => {
	if (e.shiftKey && e.key === "Enter") {
	handleSubmit();
	}
	}}

[lkleuver]

this only triggers when the element has focus, is that the intention of the shortcuts below forms?

[praseodym]

this only triggers when the element has focus, is that the intention of the shortcuts below forms?

If you have an elegant way of making the shortcut work anywhere on the page that would be best. If that's not easily achievable, having it work when focus is on the text boxes is good enough for now.

[lkleuver]

This is my current implementation:
https://github.com/kiesraad/abacus/tree/design-debt-3-133/frontend/lib/ui/Button

[lkleuver]

but might want to decouple it from a button and create a component ?

[praseodym]

This is my current implementation: https://github.com/kiesraad/abacus/tree/design-debt-3-133/frontend/lib/ui/Button
but might want to decouple it from a button and create a component ?

I'm ok with keeping it there for now, but I don't really like how eventMatchesShortcut re-parses the shortcut for every keypress.

Also, the ShortcutHint component is very similar to the KeyboardKeys component that is implemented in #284.

[lkleuver]

I've added code for this:

With the tab-key I can highlight the "volgende" button and then submit by hitting the space bar. I can also highlight the navigation items on the left, but there hitting the space bar does not get me to the item I highlighted.

But spacebar doesnt normally trigger links from tags. It does now in progress list but wouldn't that make people expect it to work on other links as wel?

[lkleuver]

Shift+enter submit works, but the focusing of the next row fires first.
I think we should move the listener to a <Form .../> component

[jorisleker]

But spacebar doesnt normally trigger links from tags. It does now in progress list but wouldn't that make people expect it to work on other links as wel?

spacebar shouldn't work on links. Normal browser behavior is activate focussed action with 'enter', spacebar behaves like pagedown

[lkleuver]

@jorisleker if using "ENTER" to go through the inputs, you enter numbers press enter and reach the submit button, it is focused after pressing ENTER on the last input.
What should happen if you press ENTER with the submit button focused ?

[jorisleker]

What should happen if you press ENTER with the submit button focused ?

I think it makes sense to submit the form when you press ENTER with the submit button focussed.
The thing we wanted to prevent was submitting the form 'to early' / unexpectedly as what happens in OSV. But we have prevented that by splitting up the form in sections, and by adding the 'controleren en opslaan' page/step.

(am thinking of changing the SHIFT+ENTER keyboard shortcut to move to the totals fields instead of submitting the form section, because that's an input you always need to complete before submitting, but will put this in a separate ticket)

[jorisleker]

• Created separate issue for the space grotesk font rendering issue Fix space grotesk font rendering straight quotes as curly quotes #346
• Ticket of moving to submit button with ENTER from this list because it is addressed in Improve keyboard navigation on list data entry page #207

so this issue can be closed