Merge pull request #151 from EnixCoda/master

优化可访问性
sciooga · Apr 6, 2021 · 078caf2 · 078caf2
2 parents 6a2f78d + ce4c101
commit 078caf2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/v2ex_reply.css b/v2ex_reply.css
@@ -1,32 +1,35 @@
-span#topicBTN, .replyBTN
+button#topicBTN, .replyBTN
 {
     padding: 4px 7px;
     border-radius: 3px;
     border: 1px solid #a6a6a6;
     transition: all .1s;
     cursor: pointer;
+    background: #0000;
+    color: #778087;
 }
 
-span#topicBTN:hover, .replyBTN:hover
+button#topicBTN:hover, .replyBTN:hover
 {
     color: #000;
     border: 1px solid #c6c6c6;
     box-shadow: 0px 0px 6px 0px #a6a6a6;
 }
 
-span.replyDetailBTN, .direct
+a.replyDetailBTN, .direct
 {
     visibility: hidden;
     color: #778087;
     cursor: pointer;
 }
 
-span.replyDetailBTN:hover, .direct:hover
+a.replyDetailBTN:hover, .direct:hover
 {
     background-color: #f5f5f5;
+    text-decoration: none;
 }
 
-div[id^=r_]:hover span.replyDetailBTN, div[id^=r_]:hover .direct
+div[id^=r_]:hover a.replyDetailBTN, div[id^=r_]:hover .direct
 {
     visibility: visible;
 }

diff --git a/v2ex_reply.js b/v2ex_reply.js
@@ -128,12 +128,12 @@ $("div[id^=r_]").each(function(){
         _append_place = _this.find(item1).prev();
     }
     if ( btn_name ){
-        _append_place.before(" &nbsp;<span class='replyDetailBTN'>"+ btn_name +"</span> &nbsp; &nbsp;");
+        _append_place.before(" &nbsp;<a role='button' tabindex='0' class='replyDetailBTN'>"+ btn_name +"</a> &nbsp; &nbsp;");
     }
     // console.log(page_current_num)
-    _append_place.before(" &nbsp;<span class='direct' data-clipboard-text='"
+    _append_place.before(" &nbsp;<a role='button' tabindex='0' class='direct' data-clipboard-text='"
           + location.origin + location.pathname + "?p=" + page_current_num + "#" + _this.attr("id")
-          + "'>楼层直链</span> &nbsp; &nbsp;");
+          + "'>楼层直链</a> &nbsp; &nbsp;");
 });
 
 // 修复因为恢复回复排版导致 gist 无法加载的问题
@@ -180,7 +180,7 @@ chrome.storage.sync.get(function(response) {
             _topic_content.css({maxHeight:"600px", overflow:"hidden", transition:"max-height 2s"});
             $(".subtle", _topic).hide();
             const $showTopic = $("<div id='showTopic' style='padding:16px; color:#778087;'>\
-                                            <span id='topicBTN'>展开主题</span>\
+                                            <button id='topicBTN'>展开主题</button>\
                                             <div style='height:10px;'></div>\
                                             <span style='font-size:0.6em'>主题超长已自动折叠，点击按钮显示完整的主题。</span>\
                                        </div>");