Issue 2410 - Improved accessibility of dialogs in options page

skin/options.css

Index: skin/options.css
===================================================================
--- a/skin/options.css
+++ b/skin/options.css
@@ -479,7 +479,8 @@
 
 .icon, .table input[type="checkbox"]::before, .table button.delete,
 #content-help a::before, #dialog-close::before,
-#custom-filters-add button::after
+#custom-filters-add button::after,
+#dialog-body button::before
 {
   background-image: url(options-sprite.png);
   display: inline-block;
@@ -509,8 +510,8 @@
   width: 18px;
 }
 
-.icon-arrow,
-#content-help a::before
+#content-help a::before,
+#dialog-body button::before
 {
   background-position: 0px -42px;
   content: "";
@@ -518,6 +519,8 @@
   height: 11px;
   vertical-align: middle;
   width: 7px;
+  -moz-margin-end: 12px;
+  -webkit-margin-end: 12px;
 }
 
 .controls
@@ -1000,9 +1003,11 @@
   margin: 4px 24px;
 }
 
-#dialog h3
+#dialog h3,
+#dialog label
 {
   font-size: 14px;
+  font-weight: 600;
   margin: 0px;
 }
 
@@ -1045,22 +1050,18 @@
   padding: 12px 0px;
 }
 
-#dialog .button-wrapper
+#dialog-body button
 {
   background-color: #F5F5F5;
+  border: none;
+  color: #3A7BA6;
+  cursor: pointer;
+  display: block;
+  font-family: inherit;
   margin-top: 8px;
   padding: 10px 16px;
-  cursor: pointer;
-  width: auto;
-}
-
-#dialog .button-wrapper span:not(.icon)
-{
-  color: #3A7BA6;
-  display: inline-block;
-  -moz-margin-start: 15px;
-  -webkit-margin-start: 15px;
-  vertical-align: top;
+  text-align: start;

[saroyanm, 2015/10/02 13:18:51]

According to MDN "start" value for text-align property is part of experimental
API, so I think using "initial" will be more safe here: 
text-align: initial;

reference:
https://developer.mozilla.org/en/docs/Web/CSS/text-align

[Thomas Greiner, 2015/10/02 14:17:33]

Done.

+  width: 100%;
 }
 
 #dialog .url
@@ -1083,6 +1084,10 @@
 
 #other-language .button-add
 {
+  background-color: transparent;
+  margin: 0px;
+  padding: 0px;
+  width: auto;
   -webkit-border-end: 1px solid #CDCDCD;
   -moz-border-end: 1px solid #CDCDCD;
   -webkit-padding-end: 10px;
@@ -1091,6 +1096,11 @@
   -moz-padding-start: 0px;
 }
 
+#other-language .button-add::before
+{
+  display: none;
+}
+
 #other-language .display
 {
   -webkit-margin-start: 10px;