Skip to content

fix(core/dropdown-button): accessibility consistency in dropdown-button #2585

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.

Sign up for GitHub

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

Closed
GayatriK2002 wants to merge 6 commits into from
Closed

fix(core/dropdown-button): accessibility consistency in dropdown-button #2585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
27e316c
fix for space/enter in dropdown examples
GayatriK2002 Jun 7, 2026
82e7cee
updated preview example's css for extra width issue
GayatriK2002 Jun 9, 2026
c70be6d
Merge branch 'main' into fix-4336/dropdown-accessibility-update
GayatriK2002 Jun 10, 2026
3430d46
added patch in vue wrapper for symbol() issue
GayatriK2002 Jun 11, 2026
aa779c4
Merge branch 'main' into fix-4336/dropdown-accessibility-update
GayatriK2002 Jun 18, 2026
c0e7d35
Merge branch 'main' into fix-4336/dropdown-accessibility-update
GayatriK2002 Jul 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
"visual-regression": "dotenv -- turbo run visual-regression",
"test": "dotenv -- turbo run test --concurrency=1",
"test.setup": "dotenv -- turbo run test.setup --concurrency=1",
"prepare": "pnpm disable-telemetry",
"prepare": "pnpm disable-telemetry && patch-package --patch-dir patches --patch-content-hash",
"postinstall": "patch-package --patch-dir patches --patch-content-hash",
"disable-telemetry": "turbo telemetry disable",
"ci:version": "pnpm changeset version && pnpm i --lockfile-only",
"ci:publish": "pnpm changeset publish",
Expand All @@ -50,6 +51,8 @@
"eslint": "catalog:",
"eslint-config-prettier": "^8.10.0",
"execa": "^5.1.1",
"patch-package": "^8.0.1",
"postinstall-postinstall": "^2.1.0",
"prettier": "^2.8.8",
"prettier-plugin-organize-imports": "^3.2.4",
"tsx": "^4.16.2",
Expand Down
1 change: 1 addition & 0 deletions packages/angular-standalone-test-app/src/preview-examples/dropdown-button-icon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
.dropdown-button {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
position: relative;
max-width: 20rem;
Expand Down
1 change: 1 addition & 0 deletions packages/angular-test-app/src/preview-examples/dropdown-button-icon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
.dropdown-button {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
position: relative;
max-width: 20rem;
Expand Down
2 changes: 1 addition & 1 deletion packages/angular/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"declarationDir": "dist",
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"lib": ["dom", "es2017"],
"lib": ["dom", "es2020"],

@coderabbitai coderabbitai Bot Jun 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

In TypeScript, what are the runtime implications of setting "compilerOptions.lib": ["dom","es2020"] while keeping "compilerOptions.target": "es2015", and what polyfill strategy is recommended for published libraries?

💡 Result:

In TypeScript, the "lib" and "target" compiler options serve distinct, non-overlapping roles [1][2]. The "target" option determines the ECMAScript version to which your TypeScript code is transpiled (e.g., downleveling arrow functions to standard functions) [3][4]. Conversely, "lib" specifies which type definitions are included in the compilation, which dictates which global JavaScript APIs (like "document" or "Promise") are available for the compiler to recognize during type-checking [1][4]. Setting "compilerOptions.lib" to ["dom", "es2020"] while keeping "compilerOptions.target" at "es2015" creates a mismatch between what the compiler recognizes and what it emits [2][5]. Specifically: 1. Runtime Implications: The compiler will permit the use of ES2020 APIs (e.g., BigInt, String.prototype.matchAll) and DOM APIs because they are defined in "lib" [1][2][6]. However, because "target" is set to "es2015", TypeScript will not automatically downlevel ES2020 syntax (if any were used) or provide polyfills for these features [3][5]. Your code will run in an ES2015-compatible environment, but it will throw runtime errors if it attempts to call an ES2020 API that does not exist natively in the target environment without accompanying polyfills [2][6]. 2. Polyfill Strategy for Published Libraries: It is highly recommended that library authors avoid bundling polyfills directly in their packages [7]. Bundling polyfills can lead to namespace pollution (if global polyfills are used) and significantly bloat bundle sizes for consumers who may already provide their own polyfills [8][7]. Recommended practices include: - Document Requirements: Clearly document the minimum runtime environment requirements (e.g., browsers supporting ES2020, or Node.js versions) in the library's README [8][7]. - Use "Pure" Polyfills: If necessary, use tools like @babel/plugin-transform-runtime, which injects "pure" polyfills (imported as modules) that do not pollute the global scope [9][7]. - Rely on Peer Dependencies: Alternatively, instruct users to provide necessary polyfills themselves, a standard pattern for many large libraries [7]. - Keep "lib" and "target" Synced: Unless you have specific reasons to decouple them (e.g., advanced polyfill management), it is best practice to keep "lib" and "target" roughly in sync to ensure your code's type-checked features match your runtime capabilities [5].

Citations:

🏁 Script executed:

# First, let's find and read the tsconfig.json file in question
fd -t f "tsconfig.json" packages/angular

# Read the specific file with context around lines 19 and 32
if [ -f "packages/angular/tsconfig.json" ]; then
  echo "=== Full tsconfig.json content ==="
  cat -n packages/angular/tsconfig.json
fi

Repository: siemens/ix

Length of output: 1582

🏁 Script executed:

# Check for ng-packagr configuration
fd -t f "ng-packagr.json|package.json" packages/angular | head -5

# Read the package.json to understand the library setup
if [ -f "packages/angular/package.json" ]; then
  echo "=== packages/angular/package.json ==="
  cat packages/angular/package.json
fi

# Check for any README or documentation about requirements
fd -t f "README.md" packages/angular

Repository: siemens/ix

Length of output: 1676

🏁 Script executed:

# Read the README
if [ -f "packages/angular/README.md" ]; then
  echo "=== packages/angular/README.md ==="
  cat packages/angular/README.md
fi

# Check the main ng-package.json
if [ -f "packages/angular/ng-package.json" ]; then
  echo -e "\n=== packages/angular/ng-package.json ==="
  cat packages/angular/ng-package.json
fi

Repository: siemens/ix

Length of output: 621

Align lib and target configuration or explicitly document runtime ES2020+ requirement.

The lib: ["dom", "es2020"] on line 19 with target: "es2015" on line 32 creates a mismatch where the compiler permits ES2020 APIs during type-checking but only transpiles to ES2015 syntax. While the library's peer dependency on @angular/core >=20.0.0 implies ES2020+ runtime support, this alignment gap should be resolved to prevent accidental API usage that could fail in edge cases and to make runtime requirements explicit. Either sync lib and target to "es2020" or add explicit documentation of the minimum runtime environment (ES2020+ support required due to Angular 20.0.0+ peer dependency).

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/angular/tsconfig.json` at line 19, The `lib` configuration on line
19 is set to ["dom", "es2020"] while the `target` configuration on line 32 is
set to "es2015", creating a mismatch where ES2020 APIs are permitted during
type-checking but the code is only transpiled to ES2015. Either update both
`lib` and `target` to consistently use "es2020" since the Angular 20.0.0+ peer
dependency requires ES2020+ runtime support, or if keeping the current
transpilation target, update the `lib` to ["dom", "es2015"] and add explicit
documentation in a README or contributing guide clearly stating that the library
requires an ES2020+ runtime environment due to its Angular 20.0.0+ peer
dependency.

Source: Coding guidelines

"module": "es2015",
"moduleResolution": "bundler",
"noImplicitAny": true,
Expand Down
1 change: 1 addition & 0 deletions packages/html-test-app/src/preview-examples/dropdown-button-icon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
.dropdown-button {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
position: relative;
max-width: 20rem;
Expand Down
2 changes: 1 addition & 1 deletion packages/nextjs-test-app/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"compilerOptions": {
"target": "ES2017",
"target": "ES2020",
"lib": [
"dom",
"dom.iterable",
Expand Down
1 change: 1 addition & 0 deletions packages/react-test-app/src/preview-examples/dropdown-button-icon.scoped.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
.dropdown-button {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
position: relative;
max-width: 20rem;
Expand Down
1 change: 1 addition & 0 deletions packages/vue-test-app/src/preview-examples/dropdown-button-icon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
.dropdown-button {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
position: relative;
max-width: 20rem;
Expand Down
2 changes: 1 addition & 1 deletion packages/vue-test-app/src/preview-examples/dropdown-button-icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<script setup lang="ts">
import { iconCheckboxes } from '@siemens/ix-icons/icons';
import { IxDropdownButton } from '@siemens/ix-vue';
import { IxDropdownButton, IxDropdownItem } from '@siemens/ix-vue';
</script>

<style scoped src="./dropdown-button-icon.css"></style>
Expand Down
2 changes: 1 addition & 1 deletion packages/vue-test-app/src/preview-examples/dropdown-button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<script setup lang="ts">
import { iconCheckboxes } from '@siemens/ix-icons/icons';
import { IxDropdownButton } from '@siemens/ix-vue';
import { IxDropdownButton, IxDropdownItem } from '@siemens/ix-vue';
</script>

<style scoped src="./dropdown-button.css"></style>
Expand Down
4 changes: 2 additions & 2 deletions packages/vue/src/vue-component-lib/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const ARIA_PROP_PREFIX = 'aria';
* and then check if it is not undefined for Vue >= 3.1.0.
* See https://github.com/vuejs/vue-next/issues/3889
*/
const EMPTY_PROP = Symbol();
const EMPTY_PROP = {};
const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };

interface NavManager<T = any> {
Expand Down Expand Up @@ -185,7 +185,7 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
if (
// eslint-disable-next-line no-prototype-builtins
(props.hasOwnProperty(key) && value !== EMPTY_PROP) ||
key.startsWith(ARIA_PROP_PREFIX)
(key.startsWith(ARIA_PROP_PREFIX) && value !== EMPTY_PROP)
) {
propsToAdd[key] = value;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/vue/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"lib": ["dom", "es2020"],
"module": "es2015",
"moduleResolution": "bundler",
"target": "es2017",
"target": "es2020",
"skipLibCheck": true
}
}
28 changes: 28 additions & 0 deletions patches/@stencil__vue-output-target.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
diff --git a/dist/runtime.cjs.js b/dist/runtime.cjs.js
index 0000000..0000000 100644
--- a/dist/runtime.cjs.js
+++ b/dist/runtime.cjs.js
@@ -114,7 +114,7 @@ exports.createSsrApp = createSsrApp;
* you to check if the key exists for Vue <3.1.0
* and then check if it is not undefined for Vue >= 3.1.0.
* See https://github.com/vuejs/vue-next/issues/3889
*/
-const EMPTY_PROP = Symbol();
+const EMPTY_PROP = {};
const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
const getComponentClasses = (classes) => {
return classes?.split(' ') || [];
diff --git a/dist/runtime.js b/dist/runtime.js
index 0000000..0000000 100644
--- a/dist/runtime.js
+++ b/dist/runtime.js
@@ -114,7 +114,7 @@ export { createSsrApp };
* you to check if the key exists for Vue <3.1.0
* and then check if it is not undefined for Vue >= 3.1.0.
* See https://github.com/vuejs/vue-next/issues/3889
*/
-const EMPTY_PROP = Symbol();
+const EMPTY_PROP = {};
const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
const getComponentClasses = (classes) => {
return classes?.split(' ') || [];
Loading
Loading