Skip to content
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

Refactor HomePage buttons into ButtonLinks to improve accessibility #1097

Merged
merged 1 commit into from
Oct 24, 2022

Conversation

lukaw3d
Copy link
Member

@lukaw3d lukaw3d commented Oct 21, 2022

Fixes issues:

  • Keyboard navigating through these buttons would first focus on the link, and then on the button
  • Multiple buttons were marked as type="submit" without being in multiple forms
  • On a small screen "Mnemonic / Private key / Ledger" buttons would collapse into rows of left-aligned buttons, but links would fill up the whole row

@lukaw3d lukaw3d changed the title Add ButtonLink to improve accessibility of HomePage buttons Refactor HomePage buttons into ButtonLinks to improve accessibility Oct 21, 2022
@github-actions
Copy link

github-actions bot commented Oct 21, 2022

🦙 MegaLinter status: ✅ SUCCESS

Descriptor Linter Files Fixed Errors Elapsed time
✅ EDITORCONFIG editorconfig-checker 7 0 0.02s
✅ REPOSITORY checkov yes no 12.91s
✅ REPOSITORY git_diff yes no 0.0s
✅ TSX eslint 3 0 0 6.51s
✅ TYPESCRIPT eslint 4 0 0 6.16s

See errors details in artifact MegaLinter reports on CI Job page
Set VALIDATE_ALL_CODEBASE: true in mega-linter.yml to validate all sources, not only the diff

MegaLinter is graciously provided by OX Security

* - Wrapping Link around Button is bad for accessibility
*/
export const ButtonLink = (props: ButtonLinkProps) => {
return <Button as={Link} {...props} />
Copy link
Contributor

@buberdds buberdds Oct 21, 2022

Choose a reason for hiding this comment

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

This throws tons of console warnings, because props are assigned to HTML attributes. HTML markup is also wrong theme="[object Object]"

Copy link
Member Author

Choose a reason for hiding this comment

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

🤦 thanks grommet documentation https://v2.grommet.io/button#as

@buberdds
Copy link
Contributor

findByRole('link') in cypress tests

@codecov
Copy link

codecov bot commented Oct 21, 2022

Codecov Report

Merging #1097 (df65e68) into master (9b0813c) will increase coverage by 0.01%.
The diff coverage is 100.00%.

❗ Current head df65e68 differs from pull request most recent head 79bf913. Consider uploading reports for the commit 79bf913 to get more accurate results

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #1097      +/-   ##
==========================================
+ Coverage   88.75%   88.77%   +0.01%     
==========================================
  Files         102      103       +1     
  Lines        1778     1781       +3     
  Branches      411      411              
==========================================
+ Hits         1578     1581       +3     
  Misses        200      200              
Flag Coverage Δ
cypress 60.64% <100.00%> (+0.06%) ⬆️
jest 78.78% <33.33%> (-0.08%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
src/app/pages/HomePage/index.tsx 100.00% <ø> (ø)
src/app/pages/OpenWalletPage/index.tsx 100.00% <ø> (ø)
src/app/components/ButtonLink/index.tsx 100.00% <100.00%> (ø)

Copy link
Contributor

@csillag csillag left a comment

Choose a reason for hiding this comment

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

Reviewed. LGTM.

@lukaw3d lukaw3d merged commit cf54204 into master Oct 24, 2022
@lukaw3d lukaw3d deleted the lw/button-links branch October 24, 2022 19:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants