feat: 一括選択のチェックボックスに可視のラベルを追加 #4149

masuP9 · 2023-12-27T07:09:38Z

Overview

<Table> のヘッダーセルにあるチェックボックスには、マシンリーダブルなラベルはあるが可視のラベルがなかったため追加。

参考: フォーム: ウェブアクセシビリティ簡易チェックリスト | アクセシビリティ | SmartHR Design System

関連チケット
https://smarthr.atlassian.net/browse/SHRUI-1066

入力する内容や、操作がラベルとして表示されている

What I did

テキストラベルを表示するスペースがセル内に無いため、マウスポインターがホバーした際、またはフォーカスした際に、「すべての行を選択」のツールチップを出した。

ヘッダーセルを固定した際に、<Table> コンポーネントの描画範囲外が描画されなくなるため、ツールチップは右側に出した。（右側の見出しセルが見えなくなるけど。。。）

その他

<ThCheckbox> は <th> でレンダリングされ、内包するコンテンツが「すべての行を選択」になるので、チェックボックスがあるカラムの名前が「すべての行を選択」になってしまう。

そのことを回避するために <th> に aria-label を付与し、内包するコンテンツを無視して「選択」というカラム名に変更した。

netlify · 2023-12-27T07:18:13Z

✅ Deploy Preview for smarthr-ui ready!

Name	Link
🔨 Latest commit	`7c373bf`
🔍 Latest deploy log	https://app.netlify.com/sites/smarthr-ui/deploys/658d140a9ec5550008aa3c94
😎 Deploy Preview	https://deploy-preview-4149--smarthr-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

pkg-pr-new · 2024-10-03T06:55:36Z

Open in Stackblitz

pnpm add https://pkg.pr.new/kufu/smarthr-ui@4149

commit: e12cd51

Qs-F · 2024-10-03T07:08:58Z

packages/smarthr-ui/src/components/Table/ThCheckbox.tsx

 }

-const CHECK_ALL_INVISIBLE_LABEL = 'すべての行を選択'
+const CHECK_ALL_INVISIBLE_LABEL = 'すべての項目を選択/解除'
+const CHECK_COLUMN_NAME = '選択'


念の為なんですが、カラム名は選択でよさそうですか？(別のところで相談した時に選択で伝わるのか？と議論になったことがあり…)

@Qs-F 別のところの議論が追えてないんですが、「選択」に自信があるわけではないです！議論のログがあれば参考にしたいっッス！（もしかしたら僕が覚えてないだけかもだけど）

@Qs-F アクセシビリティ本部でもちょっと話したんですが、「選択」で良さそう（BestではないけどBetter）となったので、一旦「選択」で行きたいです！

列としてマークアップされてるので「選択列」として理解できそうなので異論ないです。

良いと思います！ 🙏

(今更ですがすみません議論のログはないかもです…！入社前に相談させてもらった件のときに、どこかの飲み会だったかな…でmasuP9 sanの改善方法を見せたときに「選択でわかるんかな？」みたいな話になっただけなので…)

uknmr

細かいコメント入れました:pray:
あと原因はわかりませんが Firefox では可視ラベルが出なかったです。

packages/smarthr-ui/src/components/Table/ThCheckbox.tsx

uknmr · 2024-10-04T03:16:50Z

packages/smarthr-ui/src/components/Table/ThCheckbox.tsx

+          <Balloon horizontal="left" vertical="middle" className={balloonStyle}>
+            <p className="shr-p-0.5">{checkAllInvisibleLabel}</p>
+          </Balloon>


label が許可する内容は記述コンテンツなので、Ballon や p を span にするしかなさそう。

uknmr · 2024-10-04T03:54:51Z

packages/smarthr-ui/src/components/Table/ThCheckbox.tsx

+      // 位置はセルの真ん中(50%)+checkboxの幅の半分(8px)+outlineの幅(4px)+Balloonの矢印の幅(5px), sr-onlyで隠す
+      'shr-absolute shr-left-[calc(50%+(theme(fontSize.base)/2)+4px+5px)] shr-sr-only',
+      // labelの中の要素に hover or focus-visible がある時のスタイル。shr-absoluteはshr-not-sr-onlyのpositionをabsoluteに上書きしている
+      'group-has-[:hover,:focus-visible]/label:shr-not-sr-only group-has-[:hover,:focus-visible]/label:shr-absolute group-has-[:hover,:focus-visible]/label:shr-whitespace-nowrap',


group-has-[] が Firefox で機能していませんでした。group-[:has()] で回避はできそうです。

Suggested change

'group-has-[:hover,:focus-visible]/label:shr-not-sr-only group-has-[:hover,:focus-visible]/label:shr-absolute group-has-[:hover,:focus-visible]/label:shr-whitespace-nowrap',

'group-[:has(:hover,:focus-visible)]/label:shr-not-sr-only group-[:has(:hover,:focus-visible)]/label:shr-absolute group-[:has(:hover,:focus-visible)]/label:shr-whitespace-nowrap',

@uknmr 今の記載の方法でもFirefoxでも動いてると思うんだけど、ちょっと気づいたのは他のStoryからTableのStoryに遷移してきたタイミングだと、機能してないかも 😭 （再読み込みすると動く）

謎ですね。Storybook 環境起因の可能性ありそうなので、棄却してプロダクトで問題出たら別途起票します!

AtsushiM · 2024-10-04T04:32:28Z

packages/smarthr-ui/src/components/Table/ThCheckbox.tsx

+    const checkAllInvisibleLabel =
+      decorators?.checkAllInvisibleLabel?.(CHECK_ALL_INVISIBLE_LABEL) || CHECK_ALL_INVISIBLE_LABEL
+    const checkColumnName = decorators?.checkColumnName?.(CHECK_COLUMN_NAME) || CHECK_COLUMN_NAME


さすがに判定が多い & decoratorの中身の処理が確定していないのでmemo化したいかも。

const decoratedTexts = useMemo(() => { let checkAllInvisibleLabel = CHECK_ALL_INVISIBLE_LABEL let checkColumnName = CHECK_COLUMN_NAME if (decorators) { if (decorators.checkAllInvisibleLabel) { checkAllInvisibleLabel = decorators.checkAllInvisibleLabel(CHECK_ALL_INVISIBLE_LABEL) } if (decorators.checkColumnName) { checkColumnName = decorators.checkColumnName(CHECK_COLUMN_NAME) } } return { checkAllInvisibleLabel, checkColumnName, } }, [decorators])

@AtsushiM memo化しましたが、それぞれ別にmemo化しました〜。まとめるメリットとかあったら教えて下さいまし〜。

一つにまとめるメリットは 更新時の判定が一度で済む ことです。
特に今回のdecoratorsを見ているものの場合、一度目以降の判定で再生成されることは稀だと思われるため、判定回数が1/2になる、というメリットはあるかなぁという感じです。
まぁ分けてあっても微々たる差しかないと思いますので分離されていても特に問題ではないと思います！

あとは decoratorsで生成したテキスト という概念を一つにまとめられるので、もっとdecoratorsが増えるとまとめたほうが良い気がしています。
まぁ今回は２つですし....

uknmr

LGTM!

uknmr · 2024-10-09T05:51:23Z

packages/smarthr-ui/src/components/Table/ThCheckbox.tsx

+    const checkAllInvisibleLabel = useMemo(() => {
+      if (decorators && decorators.checkAllInvisibleLabel) {
+        return decorators.checkAllInvisibleLabel(CHECK_ALL_INVISIBLE_LABEL)
+      }
+
+      return CHECK_ALL_INVISIBLE_LABEL
+    }, [decorators])


imo: こんな感じで書けそう（lint の関係で書けなかったらごめんなさい）

Suggested change

const checkAllInvisibleLabel = useMemo(() => {

if (decorators && decorators.checkAllInvisibleLabel) {

return decorators.checkAllInvisibleLabel(CHECK_ALL_INVISIBLE_LABEL)

}

return CHECK_ALL_INVISIBLE_LABEL

}, [decorators])

const checkAllInvisibleLabel = useMemo(

() => decorators?.checkAllInvisibleLabel?.(CHECK_ALL_INVISIBLE_LABEL) || CHECK_ALL_INVISIBLE_LABEL,

[decorators]

)

AtsuhiMが言う通り、判定多いので、その辺分かりやすい方が良いかなって思ったので今の判定で行きます！

smarthr-ui 全体で見ると、decorator がそもそも分かりにくくて “翻訳のお決まりのやつ” 感があるので、他にならってもいいかも?
FilterDropdown や SortDropdown は多くて参考になりそうでした。
https://github.com/kufu/smarthr-ui/blob/34eee9bb4f5048c7dfdd9c7ad29117d9ad066804/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx#L84C37-L103C4

smarthr-ui/packages/smarthr-ui/src/components/Dropdown/SortDropdown/useSortDropdown.ts

Lines 25 to 42 in 34eee9b

const sortFieldLabel = useMemo(

() => decorators?.sortFieldLabel?.(SORT_FIELD_LABEL) || SORT_FIELD_LABEL,

[decorators],

)

const sortOrderLabel = useMemo(

() => decorators?.sortOrderLabel?.(SORT_ORDER_LABEL) || SORT_ORDER_LABEL,

[decorators],

)

const ascLabel = useMemo(() => decorators?.ascLabel?.(ASC_LABEL) || ASC_LABEL, [decorators])

const descLabel = useMemo(() => decorators?.descLabel?.(DESC_LABEL) || DESC_LABEL, [decorators])

const applyButtonLabel = useMemo(

() => decorators?.applyButtonLabel?.(APPLY_BUTTON_TEXT) || APPLY_BUTTON_TEXT,

[decorators],

)

const cancelButtonLabel = useMemo(

() => decorators?.cancelButtonLabel?.(CANCEL_BUTTON_TEXT) || CANCEL_BUTTON_TEXT,

[decorators],

)

@uknmr @masuP9
個人的には↑レベルでdecoratosが多いと更新判定のdecoratorsのチェックも馬鹿にならんのでuseMemoを一つにまとめるのもありかなぁ〜と思います

masuP9 force-pushed the feat/table-header-input-label branch from 52bf4f7 to 28909fe Compare December 28, 2023 05:37

masuP9 changed the title ~~Feat/table header input label~~ feat: 一括選択のチェックボックスに可視のラベルを追加 Dec 28, 2023

masuP9 force-pushed the feat/table-header-input-label branch 2 times, most recently from 1664c1a to 7c373bf Compare December 28, 2023 06:22

masuP9 force-pushed the feat/table-header-input-label branch 2 times, most recently from 46ec2c2 to 776d1fd Compare May 9, 2024 08:52

masuP9 force-pushed the feat/table-header-input-label branch from 776d1fd to 2026c04 Compare October 3, 2024 06:54

masuP9 marked this pull request as ready for review October 3, 2024 07:02

masuP9 requested a review from a team as a code owner October 3, 2024 07:02

masuP9 requested review from AtsushiM, atzzCokeK, daiHash, uknmr and Qs-F and removed request for a team October 3, 2024 07:02

Qs-F reviewed Oct 3, 2024

View reviewed changes

uknmr reviewed Oct 3, 2024

View reviewed changes

packages/smarthr-ui/src/components/Table/ThCheckbox.tsx Outdated Show resolved Hide resolved

packages/smarthr-ui/src/components/Table/ThCheckbox.tsx Outdated Show resolved Hide resolved

packages/smarthr-ui/src/components/Table/ThCheckbox.tsx Outdated Show resolved Hide resolved

uknmr reviewed Oct 3, 2024

View reviewed changes

packages/smarthr-ui/src/components/Table/ThCheckbox.tsx Outdated Show resolved Hide resolved

masuP9 force-pushed the feat/table-header-input-label branch from 2026c04 to befa615 Compare October 3, 2024 11:29

uknmr reviewed Oct 4, 2024

View reviewed changes

AtsushiM reviewed Oct 4, 2024

View reviewed changes

masuP9 added 3 commits October 9, 2024 14:29

feat: ThCheckboxのラベルを可視にする

570a2a7

feat: ThCheckboxのラベルが表の読み上げに影響しないようにThのアクセシビリティネームを上書き

d46b88b

feat: decorator を Memo 化

e12cd51

masuP9 force-pushed the feat/table-header-input-label branch from befa615 to e12cd51 Compare October 9, 2024 05:29

uknmr approved these changes Oct 9, 2024

View reviewed changes

masuP9 merged commit cfd9fb8 into master Oct 17, 2024
31 checks passed

masuP9 deleted the feat/table-header-input-label branch October 17, 2024 01:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 一括選択のチェックボックスに可視のラベルを追加 #4149

feat: 一括選択のチェックボックスに可視のラベルを追加 #4149

masuP9 commented Dec 27, 2023 •

edited by daiHash

Loading

netlify bot commented Dec 27, 2023 •

edited

Loading

pkg-pr-new bot commented Oct 3, 2024 •

edited

Loading

Qs-F Oct 3, 2024

masuP9 Oct 3, 2024

masuP9 Oct 4, 2024

uknmr Oct 4, 2024

Qs-F Oct 4, 2024

Qs-F Oct 4, 2024

uknmr left a comment

uknmr Oct 4, 2024

uknmr Oct 4, 2024

masuP9 Oct 7, 2024

uknmr Oct 7, 2024

AtsushiM Oct 4, 2024

masuP9 Oct 9, 2024

AtsushiM Oct 15, 2024

AtsushiM Oct 15, 2024

uknmr left a comment

uknmr Oct 9, 2024

masuP9 Oct 9, 2024

uknmr Oct 9, 2024

AtsushiM Oct 15, 2024

	'group-has-[:hover,:focus-visible]/label:shr-not-sr-only group-has-[:hover,:focus-visible]/label:shr-absolute group-has-[:hover,:focus-visible]/label:shr-whitespace-nowrap',
	'group-[:has(:hover,:focus-visible)]/label:shr-not-sr-only group-[:has(:hover,:focus-visible)]/label:shr-absolute group-[:has(:hover,:focus-visible)]/label:shr-whitespace-nowrap',

	const sortFieldLabel = useMemo(
	() => decorators?.sortFieldLabel?.(SORT_FIELD_LABEL) \|\| SORT_FIELD_LABEL,
	[decorators],
	)
	const sortOrderLabel = useMemo(
	() => decorators?.sortOrderLabel?.(SORT_ORDER_LABEL) \|\| SORT_ORDER_LABEL,
	[decorators],
	)
	const ascLabel = useMemo(() => decorators?.ascLabel?.(ASC_LABEL) \|\| ASC_LABEL, [decorators])
	const descLabel = useMemo(() => decorators?.descLabel?.(DESC_LABEL) \|\| DESC_LABEL, [decorators])
	const applyButtonLabel = useMemo(
	() => decorators?.applyButtonLabel?.(APPLY_BUTTON_TEXT) \|\| APPLY_BUTTON_TEXT,
	[decorators],
	)
	const cancelButtonLabel = useMemo(
	() => decorators?.cancelButtonLabel?.(CANCEL_BUTTON_TEXT) \|\| CANCEL_BUTTON_TEXT,
	[decorators],
	)

feat: 一括選択のチェックボックスに可視のラベルを追加 #4149

feat: 一括選択のチェックボックスに可視のラベルを追加 #4149

Conversation

masuP9 commented Dec 27, 2023 • edited by daiHash Loading

Overview

What I did

その他

netlify bot commented Dec 27, 2023 • edited Loading

✅ Deploy Preview for smarthr-ui ready!

pkg-pr-new bot commented Oct 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

uknmr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

uknmr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

masuP9 commented Dec 27, 2023 •

edited by daiHash

Loading

netlify bot commented Dec 27, 2023 •

edited

Loading

pkg-pr-new bot commented Oct 3, 2024 •

edited

Loading