feat(button): improve accessibility #IX-3930

[alexkaduk]

It should be applied after there is ix version with these changes
https://github.com/siemens/ix/pull/2399/changes

[gemini-code-assist]

Summary of Changes

Hello @alexkaduk, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request primarily focuses on enhancing the accessibility of interactive UI elements, specifically buttons and icons, across the application. It achieves this by strategically adding aria-label attributes to provide clearer context for assistive technologies and by updating core Siemens IX component libraries to their latest versions, which likely include their own accessibility improvements. The changes also involve expanding localization support for these new accessible labels.

Highlights

• Dependency Updates: Upgraded @siemens/ix and @siemens/ix-react core component libraries to version 4.3.0.
• Accessibility Enhancements: Introduced aria-label attributes to various IxIconButton components to provide clearer context for assistive technologies, particularly in quick action dropdowns and incident lists.
• Localization Expansion: Added new translation keys for actions such as 'More actions', 'Duplicate', 'Cut', 'Copy', 'Paste', 'Open incident in new window', and 'Upload' to support the newly added accessibility labels.
• Code Cleanup: Removed redundant aria-label attributes from IxButton components where the button's visible text already provided sufficient descriptive context.

Changelog

• apps/react-starter/package.json
  • Updated @siemens/ix and @siemens/ix-react dependencies to version 4.3.0.
• apps/react-starter/src/locales/en/translation.json
  • Added new translation keys for quick actions (more-actions, duplicate, cut, copy, paste), incident actions (open-external), and a general upload action.
• apps/react-starter/src/pages/devices/components/ag-grid-table/quick-actions-cell-renderer.tsx
  • Added aria-label attributes to IxIconButton components within quick action dropdowns, utilizing new translation keys.
• apps/react-starter/src/pages/devices/components/modal/add-device-modal.tsx
  • Removed redundant aria-label attributes from IxButton components in the add device modal.
  • Reordered import statements for consistency.
• apps/react-starter/src/pages/devices/index.tsx
  • Removed a redundant aria-label attribute from the 'add device' IxButton.
• apps/react-starter/src/pages/overview/components/incidents/overview/incident-list/index.tsx
  • Added the useTranslation hook to the MobileItem component.
  • Added aria-label attributes to IxIconButton components for opening incidents externally and for the upload action.
• pnpm-lock.yaml
  • Updated dependency resolutions and integrity hashes for @siemens/ix and @siemens/ix-react.
  • Updated @stencil/core to 4.43.0.
  • Updated @stencil/react-output-target to 1.4.1.
  • Updated html-dom-parser to 5.1.8.
  • Updated html-react-parser to 5.2.17.
  • Updated htmlparser2 to 10.1.0.
  • Updated inline-style-parser to 0.2.7.
  • Updated style-to-js to 1.1.21.
  • Updated style-to-object to 1.0.14.
  • Added entities@7.0.1.

Activity

• No human activity (comments, reviews, progress updates) has been recorded for this pull request since its creation.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request improves accessibility across the application by adding appropriate aria-label attributes to icon buttons and removing redundant ones from buttons that already have text content. The changes are well-executed and follow accessibility best practices. I've found one minor issue with a typo in a translation key, which I've detailed in a specific comment. Overall, this is a solid contribution to making the app more accessible.