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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Wrap List in `ul` for accessibility #15890

Merged
merged 5 commits into from Apr 23, 2019

Conversation

Projects
None yet
4 participants
@zombieJ
Copy link
Member

commented Apr 5, 2019

馃 This is a ...

  • New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Branch merge
  • Other (about what?)

馃懟 What's the background?

close #15884

馃挕 Solution

Wrap List.Item under ul.

馃摑 Changelog

Wrap List.Item under ul to enhance accessibility.

鈽戯笍 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

zombieJ added some commits Apr 5, 2019

@codecov

This comment has been minimized.

Copy link

commented Apr 5, 2019

Codecov Report

Merging #15890 into feature will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@             Coverage Diff             @@
##           feature   #15890      +/-   ##
===========================================
+ Coverage    95.14%   95.14%   +<.01%     
===========================================
  Files          251      251              
  Lines         6749     6752       +3     
  Branches      1963     1966       +3     
===========================================
+ Hits          6421     6424       +3     
  Misses         327      327              
  Partials         1        1
Impacted Files Coverage 螖
components/list/index.tsx 97.36% <100%> (+0.07%) 猬嗭笍
components/list/Item.tsx 100% <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 6ccbadd...da9ab93. Read the comment docs.

@zombieJ zombieJ changed the base branch from master to feature Apr 5, 2019

@zombieJ zombieJ requested review from afc163 and ztplz Apr 5, 2019

@netlify

This comment has been minimized.

Copy link

commented Apr 5, 2019

Deploy preview for ant-design ready!

Built with commit da9ab93

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

Show resolved Hide resolved components/list/Item.tsx Outdated
@Stephen2

This comment has been minimized.

Copy link

commented Apr 5, 2019

This is amazing! Thank you for considering doing this so fast.

I think it's important to allow developer to choose between: ol, ul and even just as it currently is (divs)

Each has different semantic meaning

Amazing that you jumped on this idea so quickly, thank you from all my heart 馃檹

@zombieJ

This comment has been minimized.

Copy link
Member Author

commented Apr 5, 2019

Hi @Stephen2, I've considered this. Since current list we don't provider the number display in List. I prefer ul better than ol cause the List component not provides order id in UI and also it supports pagination which means ol also not the real index.

@Stephen2

This comment has been minimized.

Copy link

commented Apr 5, 2019

@zombieJ it's important to separate the semantic meaning of Ordered List versus the visual appearance.

If the list is ordered in any way, it's more accurate to use ol. Ignore the fact that it tries to add numbers as dot points - just list-style: none and this problem is solved.

Here is a fantastic page of information, and why it's important to be semantically correct, for Accessibility WCAG purposes:
https://www.w3.org/TR/WCAG20-TECHS/H48.html

@Stephen2

This comment has been minimized.

Copy link

commented Apr 5, 2019

I am glad we can get ul soon, and hope you will consider optional ol as well. Both have their purpose, and CSS can be used to style them in identical way, as desired.

@afc163

This comment has been minimized.

Copy link
Member

commented Apr 14, 2019

Conflicting

@pr-triage pr-triage bot added the PR: unreviewed label Apr 15, 2019

>
<div
class="ant-comment-inner"
class="ant-comment"

This comment has been minimized.

Copy link
@afc163

afc163 Apr 15, 2019

Member

ul 涓嬫槸涓嶆槸搴旇璺 li

datetime={item.datetime}
/>
<li>
<Comment

This comment has been minimized.

Copy link
@afc163

afc163 Apr 15, 2019

Member

杩欎篃鎸鸿泲鐤肩殑锛屼笉濡 <Comment component="li" />?

This comment has been minimized.

Copy link
@zombieJ

zombieJ Apr 15, 2019

Author Member

涓轰簡缁撴瀯姝g‘鑰屽姞涓涓睘鎬э紝涓嶆槸鐗瑰埆鏈夊繀瑕併
鍏跺疄鎸夌悊璇达紝搴旇鏄繖杈归伒寰垜浠 List 鐨 Demo锛宺enderItem 杩斿洖鐨勭涓灞傚簲璇ユ槸 List.Item銆備絾鏄畠甯︿簡妯嚎鐨勬牱寮忔墍浠ユ病鐢ㄥ畠鍖呫傜敤 li 浠f浛 List.Item 鐪嬬潃涓嶅お鑸掓湇锛屼絾鏄浉瀵规纭竴浜涖

@afc163

afc163 approved these changes Apr 23, 2019

@afc163 afc163 merged commit 2373dbb into feature Apr 23, 2019

28 of 30 checks passed

Header rules No header rules processed
Details
Pages changed 211 new files uploaded
Details
Codacy/PR Quality Review Up to standards. A positive pull request.
Details
LGTM analysis: JavaScript No new or fixed alerts
Details
License Compliance All checks passed.
Details
Mixed content No mixed content detected
Details
Redirect rules 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: 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
codebeat Target branch is not tracked
Details
codecov/patch 100% of diff hit (target 95.14%)
Details
codecov/project 95.14% (+<.01%) compared to 6ccbadd
Details
deploy/netlify Deploy preview ready!
Details
security/snyk - package.json (paranoidjk) No manifest changes detected

@delete-merged-branch delete-merged-branch bot deleted the list-ul-li branch Apr 23, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.