alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(Calendar): improve accessibility

Browse Source
This commit is contained in:
陈嘉涵
2020-02-06 11:52:17 +08:00
parent 660b039951
commit 2124cc5261
4 changed files with 299 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/calendar/test/__snapshots__/demo.spec.js.snap
+94 -94
View File
@@ -57,113 +57,113 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 320px;">
<div class="van-calendar__days">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 0%;">1</div>
<div class="van-calendar__day van-calendar__day--disabled">2</div>
<div class="van-calendar__day van-calendar__day--disabled">3</div>
<div class="van-calendar__day van-calendar__day--disabled">4</div>
<div class="van-calendar__day van-calendar__day--disabled">5</div>
<div class="van-calendar__day van-calendar__day--disabled">6</div>
<div class="van-calendar__day van-calendar__day--disabled">7</div>
<div class="van-calendar__day van-calendar__day--disabled">8</div>
<div class="van-calendar__day van-calendar__day--disabled">9</div>
<div class="van-calendar__day">
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 0%;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">
<div class="van-calendar__selected-day">10</div>
</div>
<div class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day">21</div>
<div class="van-calendar__day van-calendar__day">22</div>
<div class="van-calendar__day van-calendar__day">23</div>
<div class="van-calendar__day van-calendar__day">24</div>
<div class="van-calendar__day van-calendar__day">25</div>
<div class="van-calendar__day van-calendar__day">26</div>
<div class="van-calendar__day van-calendar__day">27</div>
<div class="van-calendar__day van-calendar__day">28</div>
<div class="van-calendar__day van-calendar__day">29</div>
<div class="van-calendar__day van-calendar__day">30</div>
<div class="van-calendar__day van-calendar__day">31</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">21</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">22</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">23</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">24</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">25</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">26</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">27</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">28</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">29</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">30</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">31</div>
</div>
</div>
<div class="van-calendar__month" style="padding-bottom: 320px;">
<div class="van-calendar__month-title">2012年2月</div>
<div class="van-calendar__days">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">2</div>
<div class="van-calendar__day van-calendar__day" style="margin-left: 42.857142857142854%;">1</div>
<div class="van-calendar__day van-calendar__day">2</div>
<div class="van-calendar__day van-calendar__day">3</div>
<div class="van-calendar__day van-calendar__day">4</div>
<div class="van-calendar__day van-calendar__day">5</div>
<div class="van-calendar__day van-calendar__day">6</div>
<div class="van-calendar__day van-calendar__day">7</div>
<div class="van-calendar__day van-calendar__day">8</div>
<div class="van-calendar__day van-calendar__day">9</div>
<div class="van-calendar__day van-calendar__day">10</div>
<div class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day">21</div>
<div class="van-calendar__day van-calendar__day">22</div>
<div class="van-calendar__day van-calendar__day">23</div>
<div class="van-calendar__day van-calendar__day">24</div>
<div class="van-calendar__day van-calendar__day">25</div>
<div class="van-calendar__day van-calendar__day">26</div>
<div class="van-calendar__day van-calendar__day">27</div>
<div class="van-calendar__day van-calendar__day">28</div>
<div class="van-calendar__day van-calendar__day">29</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day" style="margin-left: 42.857142857142854%;">1</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">2</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">3</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">4</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">5</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">6</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">7</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">8</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">9</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">10</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">21</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">22</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">23</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">24</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">25</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">26</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">27</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">28</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">29</div>
</div>
</div>
<div class="van-calendar__month" style="padding-bottom: 320px;">
<div class="van-calendar__month-title">2012年3月</div>
<div class="van-calendar__days">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">3</div>
<div class="van-calendar__day van-calendar__day" style="margin-left: 57.142857142857146%;">1</div>
<div class="van-calendar__day van-calendar__day">2</div>
<div class="van-calendar__day van-calendar__day">3</div>
<div class="van-calendar__day van-calendar__day">4</div>
<div class="van-calendar__day van-calendar__day">5</div>
<div class="van-calendar__day van-calendar__day">6</div>
<div class="van-calendar__day van-calendar__day">7</div>
<div class="van-calendar__day van-calendar__day">8</div>
<div class="van-calendar__day van-calendar__day">9</div>
<div class="van-calendar__day van-calendar__day">10</div>
<div class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day--disabled">21</div>
<div class="van-calendar__day van-calendar__day--disabled">22</div>
<div class="van-calendar__day van-calendar__day--disabled">23</div>
<div class="van-calendar__day van-calendar__day--disabled">24</div>
<div class="van-calendar__day van-calendar__day--disabled">25</div>
<div class="van-calendar__day van-calendar__day--disabled">26</div>
<div class="van-calendar__day van-calendar__day--disabled">27</div>
<div class="van-calendar__day van-calendar__day--disabled">28</div>
<div class="van-calendar__day van-calendar__day--disabled">29</div>
<div class="van-calendar__day van-calendar__day--disabled">30</div>
<div class="van-calendar__day van-calendar__day--disabled">31</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day" style="margin-left: 57.142857142857146%;">1</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">2</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">3</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">4</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">5</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">6</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">7</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">8</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">9</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">10</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
</div>
</div>
</div>