Skip to content

function/function inserted into the element button for use in accessibility #1451

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.

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

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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: 3 additions & 2 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
/react/node_modules
CHANGELOG.md
node_modules/
coverage/
*.snap.ts
48 changes: 4 additions & 44 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,47 +1,7 @@
{
"extends": ["vtex-react"],
"rules": {
"import/no-unresolved": [
"error",
{
"commonjs": true,
"amd": true,
"ignore": ["^([a-zA-Z@]+[-\\.]?)+"]
}
],
// Rules that conflict with Prettier.
// To verify conflicting rules, run:
// $ npm run prettier-conflict-check
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/camelcase": "off",
"@typescript-eslint/no-use-before-define": "off",
"@typescript-eslint/class-name-casing": "off",
"jsx-a11y/click-events-have-key-events": "off",
"jsx-a11y/mouse-events-have-key-events": "off",
"jsx-a11y/no-static-element-interactions": "off",
"jsx-a11y/no-noninteractive-element-interactions": "off",
"jsx-a11y/no-noninteractive-tabindex": "off",
"jsx-a11y/label-has-for": "off",
"jsx-a11y/label-has-associated-control": "off",
"jsx-a11y/no-onchange": "off",
"jsx-a11y/no-autofocus": "off"
},
"overrides": [
{
// Rules for autogenerated files,
// They may need to be bypass some rules.
// E.g.: EXPERIMENTAL_ needs camelcase bypass
"files": ["react/*.js"],
"rules": {
"import/default": "off"
}
}
],
"extends": "vtex",
"root": true,
"env": {
"browser": true,
"node": true,
"mocha": true,
"jest": true,
"es6": true
"node": true
}
}
}
7 changes: 1 addition & 6 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -1,6 +1 @@
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"jsxBracketSameLine": true
}
"@vtex/prettier-config"
16 changes: 10 additions & 6 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

### Added

- acessibility props in button
Copy link
Preview

Copilot AI Jul 31, 2025

Choose a reason for hiding this comment

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

The word 'acessibility' is misspelled. It should be 'accessibility'.

Suggested change
- acessibility props in button
- accessibility props in button

Copilot uses AI. Check for mistakes.


## [9.146.13] - 2024-08-20

## [9.146.12] - 2024-08-20
Expand All @@ -15,7 +19,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [9.146.10] - 2024-08-09

### Added
### Added

- Add scroll on Autocompleteinput

## [9.146.9] - 2023-06-07
Expand All @@ -28,7 +33,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [9.146.5] - 2023-05-24

### Added
### Added

- **EXPERIMENTAL_Conditions** new prop `noOptionsMessage` to handle custom empty messages for **EXPERIMENTAL_Select**

## [9.146.4] - 2023-04-25
Expand Down Expand Up @@ -71,7 +77,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

### Removed

- **EXPERIMENTAL_TableV2** `form` element from search input to avoid DOM validation errors.
- **EXPERIMENTAL_TableV2** `form` element from search input to avoid DOM validation errors.

## [9.145.0] - 2021-07-12

Expand Down Expand Up @@ -4191,10 +4197,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- **Dropdown** and **Input** prop `block`. They are always block.
- **Dropdown** and **Input** props `short` and `long`. Their widths should be defined by their parents.


[Unreleased]: https://github.com/vtex/styleguide/compare/v9.146.13...HEAD
[unreleased]: https://github.com/vtex/styleguide/compare/v9.146.13...HEAD
[9.146.1]: https://github.com/vtex/styleguide/compare/v9.146.0...v9.146.1

[9.146.13]: https://github.com/vtex/styleguide/compare/v9.146.12...v9.146.13
[9.146.12]: https://github.com/vtex/styleguide/compare/v9.146.11...v9.146.12
[9.146.11]: https://github.com/vtex/styleguide/compare/v9.146.10...v9.146.11
Expand Down
69 changes: 42 additions & 27 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
{
"name": "@vtex/styleguide",
"version": "9.146.13",
"private": true,
"license": "UNLICENSED",
"scripts": {
"lint": "eslint react --ext js,jsx,ts,tsx",
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
"test": "node config/test.js",
"test:codemod": "jest codemod",
"type-check": "tsc --noEmit",
Expand All @@ -27,22 +29,21 @@
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"main": "./lib/index.js",
"files": [
"lib/",
"modules/",
"codemod/",
"utilities/"
],
"keywords": [
"vtex",
"styleguide"
],
"repository": {
"type": "git",
"url": "git+https://github.com/vtex/styleguide.git"
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"pre-push": "npm run prettier-conflict-check && npm run lint"
}
},
"lint-staged": {
"*.{ts,js,tsx,jsx}": [
"eslint --fix",
"prettier --write"
],
"*.{json,graphql,gql}": [
"prettier --write"
]
},
"homepage": "https://vtex.github.io/styleguide",
"devDependencies": {
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.4",
Expand All @@ -65,30 +66,32 @@
"@types/jest": "^24.0.15",
"@types/node": "^12.12.21",
"@types/prop-types": "^15.7.1",
"@vtex/prettier-config": "0.1.4",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6",
"babel-plugin-dynamic-import-node": "^1.2.0",
"copyfiles": "^1.2.0",
"css-loader": "^3.1.0",
"eslint": "^6.7.2",
"eslint-config-vtex": "^11.2.1",
"eslint": "7.12.1",
"eslint-config-vtex": "12.3.2",
"eslint-config-vtex-react": "^5.1.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-flowtype": "2",
"eslint-utils": "^1.4.1",
"file-loader": "^4.1.0",
"gh-pages": "^1.2.0",
"husky": "^1.1.3",
"husky": "4.2.3",
"jest": "^25.1.0",
"jest-dom": "^4.0.0",
"jest-resolve": "^24.8.0",
"jest-watch-typeahead": "^0.3.1",
"jscodeshift": "^0.5.0",
"lint-staged": "10.1.1",
"npm-run-all": "^4.1.3",
"object-assign": "^4.1.1",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-loader": "^3.0.0",
"prettier": "^1.19.1",
"prettier": "2.0.2",
"prettier-eslint": "^8.8.2",
"promise": "^8.0.3",
"raf": "^3.4.1",
Expand All @@ -100,19 +103,36 @@
"react-styleguidist": "^9.1.12",
"react-test-renderer": "^16.13.0",
"style-loader": "^0.23.1",
"typescript": "^3.7.3",
"typescript": "3.8.3",
"url-loader": "^2.1.0",
"watch": "^1.0.2",
"webpack": "^4.37.0"
},
"version": "9.146.13",
"main": "./lib/index.js",
"files": [
"lib/",
"modules/",
"codemod/",
"utilities/"
],
"keywords": [
"vtex",
"styleguide"
],
"repository": {
"type": "git",
"url": "git+https://github.com/vtex/styleguide.git"
},
"homepage": "https://vtex.github.io/styleguide",
"dependencies": {
"autoprefixer": "^9.6.1",
"case-sensitive-paths-webpack-plugin": "^2.2.0",
"date-fns": "^2.0.1",
"focus-visible": "^4.1.5",
"fromentries": "^1.1.0",
"react-color": "^2.17.0",
"react-datepicker": "^2.3.0",
"date-fns": "^2.0.1",
"react-docgen-displayname-handler": "^2.1.1",
"react-dropzone": "^10.2.1",
"react-icons": "^3.7.0",
Expand All @@ -137,11 +157,6 @@
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"husky": {
"hooks": {
"pre-push": "npm run prettier-conflict-check && npm run lint"
}
},
"browserslist": {
"production": [
">0.2%",
Expand Down
14 changes: 12 additions & 2 deletions react/components/Button/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,8 @@ class Button extends Component {

return (
<Element
role={this.props.role}
aria-label={this.props.ariaLabel}
id={this.props.id}
data-testid={this.props.testId}
autoFocus={iconOnly ? undefined : this.props.autoFocus}
Expand All @@ -241,7 +243,8 @@ class Button extends Component {
// Button-mode exclusive props
type={href ? undefined : this.props.type}
// Link-mode exclusive props
{...(href && linkModeProps)}>
{...(href && linkModeProps)}
>
{isLoading ? (
<Fragment>
<span className="vtex-button__spinner-container top-0 left-0 w-100 h-100 absolute flex justify-center items-center">
Expand All @@ -258,7 +261,8 @@ class Button extends Component {
style={{
paddingTop: '.25em',
paddingBottom: '.32em',
}}>
}}
>
{children}
</div>
)}
Expand All @@ -281,6 +285,8 @@ Button.defaultProps = {
isLastOfGroup: false,
isActiveOfGroup: false,
tabIndex: 0,
ariaLabel: 'button',
Copy link
Preview

Copilot AI Jul 31, 2025

Choose a reason for hiding this comment

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

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.

Suggested change
ariaLabel: 'button',
// ariaLabel default removed to enforce explicit definition when necessary

Copilot uses AI. Check for mistakes.

role: 'button',
}

Button.propTypes = {
Expand Down Expand Up @@ -379,6 +385,10 @@ Button.propTypes = {
noUpperCase: PropTypes.bool,
/** Disables label wrapping */
noWrap: PropTypes.bool,
/** Aria label description */
ariaLabel: PropTypes.string,
/** Role definition*/
Copy link
Preview

Copilot AI Jul 31, 2025

Choose a reason for hiding this comment

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

Missing space before the closing comment delimiter. It should be '/** Role definition */'.

Suggested change
/** Role definition*/
/** Role definition */

Copilot uses AI. Check for mistakes.

role: PropTypes.string,
}

export default withForwardedRef(Button)
4 changes: 3 additions & 1 deletion react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@
"@types/react": "^16.8.23",
"@types/react-dom": "^16.9.0",
"@types/recharts": "^1.8.0",
"recharts": "^2.0.0-beta.1"
"recharts": "^2.0.0-beta.1",
"vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime",
"vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.styleguide"
},
"peerDependencies": {
"react": "^16.8.0",
Expand Down
5 changes: 3 additions & 2 deletions react/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@
"skipLibCheck": true,
"strict": false,
"typeRoots": ["node_modules/@types"],
"target": "esnext",
"target": "es2017",
"declaration": true,
"moduleResolution": "node"
"moduleResolution": "node",
"module": "esnext"
},
"typeAcquisition": {
"enable": false
Expand Down
8 changes: 8 additions & 0 deletions react/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2173,6 +2173,14 @@ vtex-tachyons@^2.10.0:
resolved "https://registry.yarnpkg.com/vtex-tachyons/-/vtex-tachyons-2.10.0.tgz#d72363dcd77d0960cb23efc82e0e8d168714f153"
integrity sha512-WWEOR4iyrMQ2fzp+EActa5ZLaYSMdPk2yxP8XQRhg+q+QnbFH2EKGayjkea4okXRDE7KTKQZdLF3GlB/HaXOow==

"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime":
version "8.135.1"
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime#357ddee2f9249db4209de73b26c43997a5ca4422"

"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.styleguide":
version "9.146.13"
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.styleguide#f4ccbc54621bf5114ddd115b6032ae320f2eba55"

warning@^4.0.0, warning@^4.0.2, warning@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
Expand Down
Loading