Skip to content

fix: issue with eslint rule for notification#6173

Open
nmerget wants to merge 14 commits intomainfrom
fix-eslint-notification-closeable
Open

fix: issue with eslint rule for notification#6173
nmerget wants to merge 14 commits intomainfrom
fix-eslint-notification-closeable

Conversation

@nmerget
Copy link
Collaborator

@nmerget nmerget commented Feb 26, 2026

Proposed changes

fix: issue with eslint rule for notification. close-button-text-required rule now only requires closeButtonText when closeable attribute is set.

Types of changes

  • Bugfix (non-breaking change that fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (improvements to existing components or architectural decisions)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation Update (if none of the other choices apply)

Further comments

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/fix-eslint-notification-closeable

@nmerget nmerget moved this from 🏗 In progress to 🎁 Ready for review in UX Engineering Team Backlog Feb 26, 2026
@changeset-bot
Copy link

changeset-bot bot commented Feb 26, 2026

🦋 Changeset detected

Latest commit: 0355066

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages
Name Type
@db-ux/core-eslint-plugin Patch
@db-ux/core-foundations Patch
@db-ux/core-components Patch
@db-ux/react-core-components Patch
@db-ux/ngx-core-components Patch
@db-ux/v-core-components Patch
@db-ux/wc-core-components Patch
@db-ux/core-stylelint Patch
@db-ux/core-migration Patch
@db-ux/agent-cli Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the 📕documentation Improvements or additions to documentation label Feb 26, 2026
Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
@michaelmkraus michaelmkraus moved this from 🎁 Ready for review to 👀 Actively In Review in UX Engineering Team Backlog Feb 26, 2026
@michaelmkraus michaelmkraus self-requested a review February 26, 2026 15:00
@michaelmkraus michaelmkraus moved this from 👀 Actively In Review to 🎶 Waiting for feedback in UX Engineering Team Backlog Feb 26, 2026
…on-closeable

# Conflicts:
#	package-lock.json
#	packages/eslint-plugin/package.json
@nmerget nmerget moved this from 🎶 Waiting for feedback to 🎁 Ready for review in UX Engineering Team Backlog Feb 27, 2026
@nmerget nmerget enabled auto-merge (squash) February 27, 2026 09:08
@mfranzke mfranzke moved this from 🎁 Ready for review to 👀 Actively In Review in UX Engineering Team Backlog Mar 2, 2026
@mfranzke mfranzke requested a review from Copilot March 2, 2026 08:57
Copy link
Contributor

Copilot AI left a 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 fixes an ESLint rule (close-button-text-required) in the custom ESLint plugin so that DBNotification only requires the closeButtonText attribute when the closeable attribute is explicitly set. Previously, the rule required closeButtonText even when closeable was absent (i.e., the close button was not shown), generating false-positive accessibility lint errors.

Changes:

  • Updated the ESLint rule implementation to gate the closeButtonText requirement on the presence of the closeable attribute for DBNotification, handling Angular, React, and Vue ASTs separately.
  • Updated test fixtures (Angular HTML, React TSX, Vue SFC) and the snapshot file to reflect the new rule behavior, and updated the unit test spec with the corrected valid/invalid cases.
  • Changed dependencies version specifiers in package.json from pinned versions to >= open-ended ranges, and updated the lockfile accordingly.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
packages/eslint-plugin/src/rules/close-button/close-button-text-required.ts Core rule logic: adds closeable attribute presence checks for all three framework AST paths before enforcing closeButtonText
packages/eslint-plugin/test/rules/close-button/close-button-text-required.spec.ts Updated unit tests: reflects that <DBNotification> without closeable is valid; <DBNotification closeable> without closeButtonText is invalid
packages/eslint-plugin/test/frameworks/angular-test.html Updated integration test fixture to use two notification variants
packages/eslint-plugin/test/frameworks/react-test.tsx Updated integration test fixture to use two notification variants
packages/eslint-plugin/test/frameworks/vue-test.vue Updated integration test fixture to use two notification variants
packages/eslint-plugin/test/frameworks/__snapshots__/frameworks.spec.ts.snap Updated snapshot: adjusted line numbers, endColumn, and removed incorrect missingContent errors
packages/eslint-plugin/package.json Changed dependencies version specifiers from pinned to >= open-ended ranges; also updated peerDependencies for eslint
package-lock.json Reflects the dependency version specifier changes and minor fsevents/esbuild lockfile updates
.changeset/fix-notification-closeable-eslint.md Adds a changeset entry for the patch fix
Comments suppressed due to low confidence (1)

packages/eslint-plugin/test/rules/close-button/close-button-text-required.spec.ts:74

  • There are no unit tests covering the closeable={false} (React) or :closeable="false" / :closeable="true" (Vue) edge cases. The spec file only tests the plain closeable (truthy) attribute case but not the bound closeable={false} case for React or the :closeable="false" and plain closeable (non-bound) attribute for Vue. Since these are specifically mentioned in inline comments in the rule implementation, they should be verified with explicit test cases to confirm the rule correctly ignores <DBNotification closeable={false}> without closeButtonText (React) and <DBNotification :closeable="false"> (Vue).
	it('should validate rule', () => {
		ruleTester.run('close-button-text-required', rule, {
			valid: [
				{
					code: '<DBNotification closeable closeButtonText="Close">Message</DBNotification>'
				},
				{
					code: '<DBNotification>Message</DBNotification>'
				},
				{
					code: '<DBDrawer closeButtonText="Close drawer">Content</DBDrawer>'
				},
				{
					code: '<DBCustomSelect mobileCloseButtonText="Close" label="Select" />'
				},
				{
					code: '<DBCustomSelect :mobileCloseButtonText="closeText" label="Select" />'
				}
			],
			invalid: [
				{
					code: '<DBNotification closeable>Message</DBNotification>',
					errors: [
						{
							messageId: 'missingCloseButtonText',
							data: {
								component: 'DBNotification',
								attribute: 'closeButtonText'
							}
						}
					]
				},
				{
					code: '<DBDrawer>Content</DBDrawer>',
					errors: [
						{
							messageId: 'missingCloseButtonText',
							data: {
								component: 'DBDrawer',
								attribute: 'closeButtonText'
							}
						}
					]
				},
				{
					code: '<DBCustomSelect label="Select" />',
					errors: [
						{
							messageId: 'missingCloseButtonText',
							data: {
								component: 'DBCustomSelect',
								attribute: 'mobileCloseButtonText'
							}
						}
					]
				}
			]
		});

@mfranzke mfranzke moved this from 👀 Actively In Review to 🎶 Waiting for feedback in UX Engineering Team Backlog Mar 2, 2026
@nmerget nmerget moved this from 🎶 Waiting for feedback to 🎁 Ready for review in UX Engineering Team Backlog Mar 3, 2026
@mfranzke mfranzke moved this from 🎁 Ready for review to 👀 Actively In Review in UX Engineering Team Backlog Mar 3, 2026
michaelmkraus
michaelmkraus previously approved these changes Mar 3, 2026
@github-project-automation github-project-automation bot moved this from 👀 Actively In Review to ⏰ready for release in UX Engineering Team Backlog Mar 3, 2026
@mfranzke mfranzke moved this from ⏰ready for release to 🎶 Waiting for feedback in UX Engineering Team Backlog Mar 3, 2026
@github-actions github-actions bot added the 🚢📀cicd Changes inside .github folder label Mar 4, 2026
@nmerget nmerget moved this from 🎶 Waiting for feedback to 🎁 Ready for review in UX Engineering Team Backlog Mar 4, 2026
@nmerget nmerget requested a review from mfranzke March 4, 2026 08:58
@michaelmkraus michaelmkraus moved this from 🎁 Ready for review to 👀 Actively In Review in UX Engineering Team Backlog Mar 4, 2026
@michaelmkraus michaelmkraus self-requested a review March 4, 2026 09:16
@michaelmkraus michaelmkraus moved this from 👀 Actively In Review to 🎶 Waiting for feedback in UX Engineering Team Backlog Mar 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🚢📀cicd Changes inside .github folder 📕documentation Improvements or additions to documentation

Projects

Status: 🎶 Waiting for feedback

Development

Successfully merging this pull request may close these issues.

4 participants