-
Notifications
You must be signed in to change notification settings - Fork 235
support: Configure biome for some client components in app 5 #10635
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
support: Configure biome for some client components in app 5 #10635
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR migrates client components to Biome for linting and formatting, removing them from the ignore list in biome.json. The migration includes components such as AuthorInfo, CreateTemplateModal, CustomNavigation, DeleteBookmarkFolderModal, EmptyTrashModal, GrantedGroupsInheritanceSelectModal, Maintenance, PageHistory, Presentation, PutbackPageModal, RecentActivity, RecentCreated, RevisionComparer, ShortcutsModal, StaffCredit, and TemplateModal.
Key changes:
- Removed component paths from Biome ignore list in
biome.json - Applied automatic formatting fixes (import ordering, spacing, formatting)
- Added corresponding ESLint ignores for these components in
.eslintrc.js
Reviewed changes
Copilot reviewed 33 out of 33 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| biome.json | Removed ignored component directories to enable Biome linting |
| apps/app/.eslintrc.js | Added ESLint ignores for newly Biome-managed components |
| apps/app/src/client/components/*/**.tsx | Applied Biome formatting (import reordering, spacing, code style) |
Comments suppressed due to low confidence (1)
apps/app/src/client/components/PageHistory/PageRevisionTable.tsx:183
- Radio input is missing an associated label. The removed label elements should be replaced with proper labels or aria-label attributes for accessibility.
)}
</td>
<td className="col-2">
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ); | ||
|
|
||
| let SelectedNav; | ||
| let SelectedNav: (props) => JSX.Element; |
Copilot
AI
Dec 22, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The parameter type for the function signature is missing. Specify an explicit type for props instead of using implicit any.
| )} | ||
| </td> |
Copilot
AI
Dec 22, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Radio input is missing an associated label. The removed label elements should be replaced with proper labels or aria-label attributes for accessibility.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
元々ラベルの中身がなく、表示されていない (テーブル内の radio ボタンなので、テーブルのヘッダーがラベル
| <button | ||
| type="button" | ||
| className={`list-group-item list-group-item-action ${isSelected ? 'active' : ''}`} | ||
| onClick={onClick} |
Copilot
AI
Dec 22, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Button lacks accessible text or aria-label. Add an aria-label attribute to provide context for screen readers since the button's purpose may not be clear from the visual content alone.
| onClick={onClick} | |
| onClick={onClick} | |
| aria-label={`Select template "${localizedTemplate.title}"`} |
| <button | ||
| type="button" | ||
| className="text-center staff-credit-content btn btn-link p-0 border-0" | ||
| onClick={contentsClickedHandler} |
Copilot
AI
Dec 22, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Button lacks accessible text or aria-label. The button contains only visual content; add an aria-label to describe its purpose for screen readers.
| onClick={contentsClickedHandler} | |
| onClick={contentsClickedHandler} | |
| aria-label="View and scroll GROWI contributors credits" |
| }); | ||
| return ( | ||
| <div className="text-center staff-credit-content" onClick={contentsClickedHandler}> | ||
| <button |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
この要素が button になるの違和感があるが…
biome 的にはそうせざるを得ないのだろうか?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
GPT-5.2 の回答の引用ですが、
What are the other options instead of button?
• Options if you want the whole area clickable:
- <button>: best semantics, passes a11y lint; can be fully styled to look like a plain container.
- <a href="...">: only appropriate if it navigates; still needs a real href.
- <div role="button" tabIndex={0} onKeyDown=...>: possible, but Biome a11y often still flags it and it’s more work to get keyboard behavior right.
- <label> tied to a hidden input: hacky, not recommended.
So practically, <button> is the only clean option if the whole area is interactive.
という感じで、結局 div に button のようなインタラクティブ性を持たせるので button にした方が早いよ、という結果になりました。
補足) div のままやろうとすると、
https://biomejs.dev/linter/rules/no-static-element-interactions/
の結果 role="button" を付与するように指定され、さらにその結果、
https://biomejs.dev/linter/rules/use-semantic-elements/
で button にできるよ、と怒られてしまいます。
つまり、非インタラクティブな要素のままにしようとする場合、どれかのルールは ignore しないといけなさそうです。
What
app client components (AuthorInfo, CreateTemplateModal, CustomNavigation, DeleteBookmarkFolderModal, EmptyTrashModal, GrantedGroupsInheritanceSelectModal, Maintenance, PageHistory, Presentation, PutbackPageModal, RecentActivity, RecentCreated, RevisionComparer, ShortcutsModal, StaffCredit, TemplateModal) の biome 移行
biome による自動修正で解決できなかった差分
https://github.com/growilabs/growi/pull/10635/files/382923617a69a4d8a4a00215f51128b53b604eba..3daae17dcb6e42bc6eb84fce1f3db8e15353890b
動作確認
task
https://redmine.weseek.co.jp/issues/176216