Frontend Weekly 2024-08-02

CSS font-size-adjust#

CSS のfont-size-adjustプロパティがサポートされた。 これに伴い、font-size-adjustプロパティは Baseline に追加された。

フォントは、アスペクト比によって同じ font-size であっても、大きく異なる印象を与える。 ここで、アスペクト比とは、小文字の高さをフォントサイズで割った値である。

Text using 14px Verdana font appears larger than text using Times font.

Text using 14px Times font appears smaller than text using Verdana font.

font-size-adjustプロパティは、このフォントのアスペクト比を調整するために使用される。

次のように利用する。

1
.font-a {
2
  font-size: 14px;
3
  font-family: Verdana;
4
  font-size-adjust: 0.545;
5
}
6
.font-b {
7
  font-size: 14px;
8
  font-family: Times;
9
  font-size-adjust: 0.545;
10
}

Text using 14px Verdana font appears larger than text using Times font.

Text using 14px Times font appears smaller than text using Verdana font.

CSS content with alt text#

contentプロパティを利用して画像を表示する際に、画像の代替テキストを指定できるようになった。

1
<style>
2
  .has-before-content::before {
3
    content: url("cat.jpg") / "A cute" attr(data-animal);
4
  }
5
</style>
6
<div class="has-before-content" data-animal="cat"></div>

Keyboard focusable scroll containers#

スクロールコンテナにキーボードでフォーカスするようになる。 以前でもtabindexを 0 以上に設定するか、スクロールコンテナ内にフォーカス可能な子要素がある場合、スクロールコンテナにフォーカスできたが、今後はどちらでもない場合でもフォーカスされる。

この挙動は Chrome 127 以降、徐々に展開されていく。

同意書などをスクロールコンテナ内に表示するサービスでは、開発者が十分にアクセシビリティに配慮していない場合、キーボードのみによる操作が困難であった。しかし、今後は開発者が意識しなくても、スクロールコンテナにフォーカスが当たるため、アクセシビリティが向上する。

Portable stories#

ポータブルストーリーを介することで、Story をネイティブコンポーネントとして Jest や Vitest、Playwright などで再利用が出来るようになった。

1
import { test, expect } from "vitest";
2
import { screen } from "@testing-library/react";
3
import { composeStories } from "@storybook/react";
4
import * as stories from "./Button.stories";
5

6
const { Primary, Secondary } = composeStories(stories);
7

8
test("renders primary button with default args", async () => {
9
  await Primary.play();
10
});

Vitest や Jest でポータブルストーリーを利用する方法についてドキュメントが公開されている。

https://storybook.js.org/docs/api/portable-stories/portable-stories-jest?ref=storybookblog.ghost.io

https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest?ref=storybookblog.ghost.io

Storybook にテストの責務を持たせたくない場合や、Vitest や Jest の資産を利用したい場合など、非常に便利な機能である。

New test hooks#

Jest や Vitest、Playwright、Cypress などとより互換性のあるテストの記述が可能になった。

今まではcanvasオブジェクトを通してのみ Story のテストが可能であったが、mount メソッドが追加され他のテストフレームワークと比較的近い記述が出来るようになった。

1
import { fn, expect } from "@storybook/test";
2
// ...
3
export const Disabled = {
4
  args: { disabled: true, onSelected: fn() },
5
  play: async ({ mount, args }) => {
6
    // Arrange
7
    const user = useEvent.setup();
8
    const items = await loadItems(10);
9
    const canvas = await mount(<ToolbarMenu items={items} />);
10

11
    // Act
12
    await user.click(canvas.getByRole("button"));
13

14
    // Assert
15
    expect(canvas.getAllByRole("button").length).toBe(items.length);
16
    expect(args.onSelected).not.toHaveBeenCalled();
17
  },
18
};

beforeEachやafterEachなどは、Story ファイルの meta に記述する。

1
const meta = {
2
  // ...
3
  async beforeEach() {
4
    MockDate.set("2024-02-14");
5

6
    // Reset the Date after each story
7
    return () => {
8
      MockDate.reset();
9
    };
10
  },
11
};

beforeAllやafterAllは、.storybook/preview.tsに記述する。

1
import { Preview } from "@storybook/react";
2

3
import { init } from "../project-bootstrap";
4

5
const preview: Preview = {
6
  async beforeAll() {
7
    await init();
8
  },
9
};
10

11
export default preview;

https://storybook.js.org/docs/writing-tests/interaction-testing?ref=storybookblog.ghost.io#run-code-before-the-component-gets-rendered

個人的な感想としては、確かに名前が同じフックは生えたが、利用方法にはズレがあり、テストを CSF に変換するための学習曲線は変わらずあるように思う。