Conversation
🦋 Changeset detectedLatest commit: 0355066 The changes in this PR will be included in the next version bump. This PR includes changesets to release 10 packages
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 |
Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
packages/eslint-plugin/src/rules/close-button/close-button-text-required.ts
Outdated
Show resolved
Hide resolved
packages/eslint-plugin/src/rules/close-button/close-button-text-required.ts
Outdated
Show resolved
Hide resolved
…on-closeable # Conflicts: # package-lock.json # packages/eslint-plugin/package.json
There was a problem hiding this comment.
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
closeButtonTextrequirement on the presence of thecloseableattribute forDBNotification, 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
dependenciesversion specifiers inpackage.jsonfrom 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 plaincloseable(truthy) attribute case but not the boundcloseable={false}case for React or the:closeable="false"and plaincloseable(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}>withoutcloseButtonText(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'
}
}
]
}
]
});
packages/eslint-plugin/src/rules/close-button/close-button-text-required.ts
Outdated
Show resolved
Hide resolved
packages/eslint-plugin/src/rules/close-button/close-button-text-required.ts
Outdated
Show resolved
Hide resolved
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…e' into fix-eslint-notification-closeable
packages/eslint-plugin/src/rules/close-button/close-button-text-required.ts
Outdated
Show resolved
Hide resolved
# Conflicts: # package-lock.json
Proposed changes
fix: issue with eslint rule for notification.
close-button-text-requiredrule now only requirescloseButtonTextwhencloseableattribute is set.Types of changes
Further comments
🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/fix-eslint-notification-closeable