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

feat: Accessibility of Alert close button #18750

Merged
merged 2 commits into from Sep 12, 2019

Conversation

@MrHeer
Copy link
Contributor

commented Sep 10, 2019

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Accessibility

🔗 Related issue link

close #18736

💡 Background and solution

replace the <span> with <button> and style it accordingly

📝 Changelog

Language Changelog
🇺🇸 English ♿️ Accessibility of Alert close button
🇨🇳 Chinese ♿️ Alert 关闭按钮的可访问性

☑️ Self Check before Merge

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed
@pr-triage pr-triage bot added the PR: unreviewed label Sep 10, 2019
@netlify

This comment has been minimized.

Copy link

commented Sep 10, 2019

Deploy preview for ant-design ready!

Built with commit 88faa10

https://deploy-preview-18750--ant-design.netlify.com

@codecov

This comment has been minimized.

Copy link

commented Sep 10, 2019

Codecov Report

Merging #18750 into master will not change coverage.
The diff coverage is 100%.

Impacted file tree graph

@@           Coverage Diff           @@
##           master   #18750   +/-   ##
=======================================
  Coverage    96.9%    96.9%           
=======================================
  Files         281      281           
  Lines        7540     7540           
  Branches     2103     2058   -45     
=======================================
  Hits         7307     7307           
  Misses        231      231           
  Partials        2        2
Impacted Files Coverage Δ
components/alert/index.tsx 93.44% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c98b820...88faa10. Read the comment docs.

@yoyo837

This comment has been minimized.

Copy link
Collaborator

commented Sep 10, 2019

:focus diffs
image
image

If diffs is accepted, then this is all.

@afc163

This comment has been minimized.

Copy link
Member

commented Sep 10, 2019

It is ugly, I don't think our designer will accept this.

@afc163

This comment has been minimized.

Copy link
Member

commented Sep 10, 2019

Maybe a darker color would be ok.

@yoyo837 yoyo837 requested a review from orzyyyy Sep 10, 2019
@MrHeer

This comment has been minimized.

Copy link
Contributor Author

commented Sep 10, 2019

I didn't see any difference

Screen record from 2019-09-10 11 12 26

@orzyyyy

This comment has been minimized.

Copy link
Collaborator

commented Sep 10, 2019

test
Difference does exist, it's my carelessness.

cursor: pointer;

&:focus {

This comment has been minimized.

Copy link
@orzyyyy

orzyyyy Sep 10, 2019

Collaborator

Maybe it's better to remove :focus, it looks as before.
test2

This comment has been minimized.

Copy link
@yoyo837

yoyo837 Sep 10, 2019

Collaborator

I agree with @orzyyyy .

@MrHeer

This comment has been minimized.

Copy link
Contributor Author

commented Sep 10, 2019

I found it is different in Chrome, but it is same in Firefox.

@orzyyyy

This comment has been minimized.

Copy link
Collaborator

commented Sep 10, 2019

I prefer to use the default behavior, which matches the design and can save both trouble and your time.

Copy link
Collaborator

left a comment

remove :focus

@MrHeer

This comment has been minimized.

Copy link
Contributor Author

commented Sep 10, 2019

remove :focus

It will cause no effect in firefox

@MrHeer

This comment has been minimized.

Copy link
Contributor Author

commented Sep 10, 2019

Sorry, I am going to the interview now, and I am dealing with it later.

MrHeer added 2 commits Sep 10, 2019
replace the <span> with <button> and style it accordingly #18736
@MrHeer MrHeer force-pushed the MrHeer:alert-use-button branch from e7d8a00 to 88faa10 Sep 10, 2019
@orzyyyy orzyyyy requested a review from afc163 Sep 10, 2019
@yoyo837 yoyo837 requested review from yoyo837 and removed request for yoyo837 Sep 11, 2019
@afc163
afc163 approved these changes Sep 12, 2019
@pr-triage pr-triage bot removed the PR: unreviewed label Sep 12, 2019
@afc163 afc163 merged commit d2e76d9 into ant-design:master Sep 12, 2019
26 of 28 checks passed
26 of 28 checks passed
Header rules - ant-design No header rules processed
Details
Pages changed - ant-design 216 new files uploaded
Details
LGTM analysis: JavaScript No new or fixed alerts
Details
Mixed content - ant-design No mixed content detected
Details
Redirect rules - ant-design 18 redirect rules processed
Details
Semantic Pull Request ready to be squashed
Details
WIP Ready for review
Details
ant-design.ant-design #ant design succeeded
Details
buildsize No change
Details
ci/circleci: check_metadata Your tests passed on CircleCI!
Details
ci/circleci: compile Your tests passed on CircleCI!
Details
ci/circleci: dist Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: test_dist Your tests passed on CircleCI!
Details
ci/circleci: test_dist_15 Your tests passed on CircleCI!
Details
ci/circleci: test_dom Your tests passed on CircleCI!
Details
ci/circleci: test_dom_15 Your tests passed on CircleCI!
Details
ci/circleci: test_es Your tests passed on CircleCI!
Details
ci/circleci: test_es_15 Your tests passed on CircleCI!
Details
ci/circleci: test_lib Your tests passed on CircleCI!
Details
ci/circleci: test_lib_15 Your tests passed on CircleCI!
Details
ci/circleci: test_node Your tests passed on CircleCI!
Details
ci/circleci: test_node_15 Your tests passed on CircleCI!
Details
codecov/patch 100% of diff hit (target 96.9%)
Details
codecov/project 96.9% (+0%) compared to c98b820
Details
netlify/ant-design/deploy-preview Deploy preview ready!
Details
security/snyk - package.json (paranoidjk) No manifest changes detected
@MrHeer MrHeer deleted the MrHeer:alert-use-button branch Sep 13, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.