The button beside the caption

What changed

Under the band on the front page stand the heading “The shape of the collection” and a sentence that explains the drawing. Until now the button into the axis came under them on a line of its own at every width. On a desktop that left the right half of the sentence’s line empty and pushed the button down. From 1024px it now stands to the right, its lower edge level with the end of the sentence. Below 1024px nothing changed: the button is under the sentence, on the left, with the same space above it.

Why 1024 and not 768

The Ukrainian button is wider than the English one, and the CI runner’s font is wider than the local one. The sentence holds up to 62 characters a line. At 900px the content is about 860px wide, and the sentence, the gap and the button side by side take nearly all of it. A break there would have to be rechecked on every change of text. At 1024px there is room on both sides.

Why markup and not only styles

The button lay outside the figure, and the caption was in the figcaption, the figure’s last child. CSS alone could not put them on one line. There were two ways. The first: move the button into the figcaption. The link would then become part of the drawing’s name, and a screen reader would read “Open the timeline” as a description of the band. The second, chosen: the heading, the sentence and the button stand together in a block after the figure, and the figure names them through aria-labelledby and aria-describedby. The drawing’s name is what it was, and the link stays out of it.

What was checked

npm run verify:code passed. The front page’s browser tests passed in Chromium locally: the old one at 393px, where the order of the blocks did not change, and a new one. The new test opens both languages at 1280 and 800px and compares halves of the row and the edges of the sentence, not pixels. At 1280 the button has to be in the right half and across from the sentence; at 800, under it and in the left half. The full browser run is CI’s, after the push. The 6-in-1 set the task in a queue with three other changes to the front page and the axis.

And the credit in the footer

The same day the 6-in-1 renamed their YouTube channel. The credit beside the © in the front page’s footer now reads “ITmentor” in both languages, in place of “Навчаємося разом” and “Learning together”. The link goes to the same channel as before. The social card never carried the old name, so it was not redrawn. Earlier entries of this log mention the former name and stay as they are: they tell how things were then.

Recently added

The same day, the four sample records at the foot of the front page gave way to a row called “Recently added”. It holds the ten records added last, newest first, in the same cards the list uses. The row scrolls sideways and stops on each card, so ten cards take the height of one. No script is needed for it: the front page still runs without one.

The data keeps no date of addition. updatedAt moves with every edit, and the date of checking says when a record was checked, not when it arrived. A record’s number, though, is the next free one when its package enters the data, so the ten highest numbers are the ten last added. The date of the first commit was not used, because the build on the host may not have the whole history.

There is no large year beside the cards: across the ten newest records it would be the same number. The note about the primary source went too. It promised one only for the four chosen records, not for the whole collection (issue #10).

What was checked here

npm run verify:code passed, and the front page’s browser tests passed in Chromium. The new test takes the ten numbers from the data and looks at where the cards lead, not at what the records are called. At 320, 393 and 1280px the row scrolls and the page does not, and every card is as tall as the rest. The accessibility check of the row is clean. Run over the whole page, it found an old fault in the band: the decade links sit inside an element with the role of an image. That is the band’s to fix, and its preview is next in the queue.

Arrows instead of a scrollbar

The first version of the row had an ordinary scrollbar under the cards. The 6-in-1 looked and answered in one word: disappointing. Now there is no bar, and two round arrows at the end of the heading move the row. Each one shifts it by what is in view and stops on a card’s edge. At the start and at the end the arrow that has nowhere to go turns pale. These are scroll buttons the browser draws itself from the stylesheet (::scroll-button), so the front page still has no script. The names a screen reader gives them come from the dictionaries.

A browser that cannot draw such buttons yet still shows the bar. Without it, a mouse with no horizontal wheel would have nothing to scroll the row with. There the bar is thin and in the site’s colours. The test clicks the arrow, checks that the row stopped on a card’s edge, and that there is no bar.