fix: accessibility issues on Tree component, adjusting examples #1703
Conversation
Bug Fixes
Chore
Tests
Contributors@hportales2000, @TahimiLeonBravo, @LeandroTorresSicilia Commit-Lint commandsYou can trigger Commit-Lint actions by commenting on this PR:
|
|
@hportales2000 the styles should look like the zeplin design
|
![codeclimate[bot]](https://avatars.githubusercontent.com/in/9403?s=60&v=4){kind=small}
| /> | ||
| ); | ||
| }); | ||
| } | ||
|
|
||
| TreeChildren.propTypes = { | ||
| data: PropTypes.arrayOf( |
There was a problem hiding this comment.
Identical blocks of code found in 2 locations. Consider refactoring.
| @@ -9,15 +9,35 @@ import getNode from './helpers/getNode'; | |||
| * @category Layout | |||
| */ | |||
| export default function Tree(props) { | |||
| const { data, onExpandCollapse, onSelect, className, style, id } = props; | |||
| const { | |||
There was a problem hiding this comment.
Similar blocks of code found in 6 locations. Consider refactoring.
| export default function TreeChildren({ data, onSelect, onExpandCollapse, nodePath }) { | ||
| return data.map((props, index) => { | ||
| const key = `child-item-${index}`; | ||
| export default function TreeChildren(props) { |
There was a problem hiding this comment.
Function TreeChildren has 28 lines of code (exceeds 25 allowed). Consider refactoring.
| `}; | ||
| > div { | ||
| margin-left: ${props => |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
| props['aria-level'] > 1 | ||
| ? `-${(props['aria-level'] - 1) * 20 + props['aria-level'] - 1}px` | ||
| : '0'}; | ||
| padding-left: ${props => |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
|
Code Climate has analyzed commit 258a8d8 and detected 9 issues on this pull request. Here's the issue category breakdown:
View more on Code Climate. |
fix: #1669
Changes proposed in this PR:
adding new markup with accessibility attributes
adding new props
I have followed (at least) the PR section of the contributing guide.
@nexxtway/react-rainbow