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
Merged

feat: Wrap List in ul for accessibility #15890

merged 5 commits into from Apr 23, 2019

Conversation

@zombieJ
Copy link
Member

@zombieJ zombieJ 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
@codecov
Copy link

@codecov codecov bot 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.

Loading

@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
Copy link

@netlify netlify bot commented Apr 5, 2019

Deploy preview for ant-design ready!

Built with commit da9ab93

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

Loading

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

@Stephen2 Stephen2 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 馃檹

Loading

@zombieJ
Copy link
Member Author

@zombieJ zombieJ 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.

Loading

@Stephen2
Copy link

@Stephen2 Stephen2 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

Loading

@Stephen2
Copy link

@Stephen2 Stephen2 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.

Loading

@afc163
Copy link
Member

@afc163 afc163 commented Apr 14, 2019

Conflicting

Loading

>
<div
class="ant-comment-inner"
class="ant-comment"
Copy link
Member

@afc163 afc163 Apr 15, 2019

Choose a reason for hiding this comment

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

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

Loading

datetime={item.datetime}
/>
<li>
<Comment
Copy link
Member

@afc163 afc163 Apr 15, 2019

Choose a reason for hiding this comment

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

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

Loading

Copy link
Member Author

@zombieJ zombieJ Apr 15, 2019

Choose a reason for hiding this comment

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

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

Loading

afc163
afc163 approved these changes Apr 23, 2019
@afc163 afc163 merged commit 2373dbb into feature Apr 23, 2019
30 checks passed
Loading
@delete-merged-branch delete-merged-branch bot deleted the list-ul-li branch Apr 23, 2019
@nurgasemetey
Copy link

@nurgasemetey nurgasemetey commented Jun 16, 2020

I can't find this in documentation. How can I find information on this?

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

5 participants