function/function inserted into the element button for use in accessibility #1451
Conversation
…bility applications and automated testing
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hello @gabriel291-silva , could you describe better how your modification works as well as prints demonstrating its effect? |
gabriel291-silva
changed the title
|
### Description: Function inserted into the button element for accessibility purposes. For this improvement in the code, I simply added a role and an aria-label so that it could be validated with accessibility software. I will add a screenshot of the before and after, along with a link to the product page. The button being tested is the arrow for the reviews at the bottom of the page.antes :
before after workspace de test: https://fixstyleguide--hmartus.myvtex.com/ginger-tea-with-honey-2-2lb-1kg-/p |
There was a problem hiding this comment.
Pull Request Overview
This pull request adds accessibility props to the Button component and includes various configuration updates to improve development workflows. While the PR title mentions accessibility, most changes are development configuration updates with minimal accessibility improvements.
- Adds
roleandaria-labelprops to the Button component for better accessibility support - Updates development dependencies and configuration (ESLint, Prettier, TypeScript)
- Reorganizes package.json structure and adds Git hooks for code quality
Reviewed Changes
Copilot reviewed 8 out of 10 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| react/components/Button/index.js | Adds accessibility props (role, aria-label) to Button component |
| react/tsconfig.json | Updates TypeScript target and adds module configuration |
| react/package.json | Adds VTEX typings dependencies |
| package.json | Major reorganization with updated dependencies and Git hooks |
| CHANGELOG.md | Documents accessibility props addition |
| .prettierrc | Simplifies Prettier config to use VTEX preset |
| .eslintrc | Simplifies ESLint config to use VTEX preset |
| .eslintignore | Updates ignore patterns |
| @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. | |||
|
|
|||
| ## [Unreleased] | |||
|
|
|||
| ### Added | |||
|
|
|||
| - acessibility props in button | |||
There was a problem hiding this comment.
The word 'acessibility' is misspelled. It should be 'accessibility'.
| - acessibility props in button | |
| - accessibility props in button |
Copilot uses AI. Check for mistakes.
| @@ -379,6 +385,10 @@ Button.propTypes = { | |||
| noUpperCase: PropTypes.bool, | |||
| /** Disables label wrapping */ | |||
| noWrap: PropTypes.bool, | |||
| /** Aria label description */ | |||
| ariaLabel: PropTypes.string, | |||
| /** Role definition*/ | |||
There was a problem hiding this comment.
Missing space before the closing comment delimiter. It should be '/** Role definition */'.
| /** Role definition*/ | |
| /** Role definition */ |
Copilot uses AI. Check for mistakes.
| @@ -281,6 +285,8 @@ Button.defaultProps = { | |||
| isLastOfGroup: false, | |||
| isActiveOfGroup: false, | |||
| tabIndex: 0, | |||
| ariaLabel: 'button', | |||
There was a problem hiding this comment.
The default aria-label value 'button' is not descriptive and may not provide meaningful information to screen readers. Consider using a more descriptive default or making this prop required when the button doesn't have visible text content.
| ariaLabel: 'button', | |
| // ariaLabel default removed to enforce explicit definition when necessary |
Copilot uses AI. Check for mistakes.
…bility applications and automated testing
What is the purpose of this pull request?
I inserted a definition in the component, this modification is for accessibility app
What problem is this solving?
acessibility problems