Fixed #25378 -- Improved tab through experience in admin.

4 files changed, 90 insertions, 43 deletions

diff --git a/django/contrib/admin/static/admin/css/base.css b/django/contrib/admin/static/admin/css/base.css
index d6a0da076b..a37555aeb5 100644
--- a/django/contrib/admin/static/admin/css/base.css
+++ b/django/contrib/admin/static/admin/css/base.css
@@ -20,10 +20,14 @@ a:link, a:visited {
     text-decoration: none;
 }
 
-a:hover {
+a:focus, a:hover {
     color: #036;
 }
 
+a:focus {
+    text-decoration: underline;
+}
+
 a img {
     border: none;
 }
@@ -33,6 +37,10 @@ a.section:link, a.section:visited {
     text-decoration: none;
 }
 
+a.section:focus, a.section:hover {
+    text-decoration: underline;
+}
+
 /* GLOBAL DEFAULTS */
 
 p, ol, ul, dl {
@@ -308,7 +316,7 @@ table thead th .text a {
     padding: 8px 10px;
 }
 
-table thead th.sortable:hover {
+table thead th .text a:focus, table thead th .text a:hover {
     background: #eee;
 }
 
@@ -359,10 +367,12 @@ table thead th.sorted .sortoptions a.sortremove:after {
     color: #999;
 }
 
+table thead th.sorted .sortoptions a.sortremove:focus:after,
 table thead th.sorted .sortoptions a.sortremove:hover:after {
     color: #447e9b;
 }
 
+table thead th.sorted .sortoptions a.sortremove:focus,
 table thead th.sorted .sortoptions a.sortremove:hover {
     background-position: 0 -14px;
 }
@@ -371,6 +381,7 @@ table thead th.sorted .sortoptions a.ascending {
     background-position: 0 -28px;
 }
 
+table thead th.sorted .sortoptions a.ascending:focus,
 table thead th.sorted .sortoptions a.ascending:hover {
     background-position: 0 -42px;
 }
@@ -380,6 +391,7 @@ table thead th.sorted .sortoptions a.descending {
     background-position: 0 -56px;
 }
 
+table thead th.sorted .sortoptions a.descending:focus,
 table thead th.sorted .sortoptions a.descending:hover {
     background-position: 0 -70px;
 }
@@ -405,7 +417,6 @@ input[type=number], textarea, select, .vTextField {
     border-radius: 4px;
     padding: 5px 6px;
     margin-top: 0;
-    outline: none;
 }
 
 input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
@@ -428,7 +439,6 @@ select[multiple] {
     background: #79aec8;
     padding: 10px 15px;
     border: none;
-    outline: none;
     border-radius: 4px;
     color: #fff;
     cursor: pointer;
@@ -439,6 +449,7 @@ a.button {
 }
 
 .button:active, input[type=submit]:active, input[type=button]:active,
+.button:focus, input[type=submit]:focus, input[type=button]:focus,
 .button:hover, input[type=submit]:hover, input[type=button]:hover {
     background: #609ab6;
 }
@@ -455,6 +466,7 @@ a.button {
 }
 
 .button.default:active, input[type=submit].default:active,
+.button.default:focus, input[type=submit].default:focus,
 .button.default:hover, input[type=submit].default:hover {
     background: #205067;
 }
@@ -633,7 +645,7 @@ div.breadcrumbs a {
     color: #fff;
 }
 
-div.breadcrumbs a:hover {
+div.breadcrumbs a:focus, div.breadcrumbs a:hover {
     color: #c4dce8;
 }
 
@@ -658,8 +670,9 @@ a.deletelink:link, a.deletelink:visited {
     color: #CC3434;
 }
 
-a.deletelink:hover {
+a.deletelink:focus, a.deletelink:hover {
     color: #993333;
+    text-decoration: none;
 }
 
 /* OBJECT TOOLS */
@@ -704,18 +717,26 @@ a.deletelink:hover {
     color: #fff;
 }
 
-.object-tools a:hover, .object-tools li:hover a {
+.object-tools a:focus, .object-tools a:hover {
     background-color: #417690;
 }
 
-.object-tools a.viewsitelink, .object-tools a.golink {
-    background: #999 url(../img/tooltag-arrowright.svg) 93% center no-repeat;
+.object-tools a:focus{
+    text-decoration: none;
+}
+
+.object-tools a.viewsitelink, .object-tools a.golink,.object-tools a.addlink {
+    background-repeat: no-repeat;
+    background-position: 93% center;
     padding-right: 26px;
 }
 
+.object-tools a.viewsitelink, .object-tools a.golink {
+    background-image: url(../img/tooltag-arrowright.svg);
+}
+
 .object-tools a.addlink {
-    background: #999 url(../img/tooltag-add.svg) 93% center no-repeat;
-    padding-right: 26px;
+    background-image: url(../img/tooltag-add.svg);
 }
 
 /* OBJECT HISTORY */
@@ -802,7 +823,7 @@ table#change-history tbody th {
     color: #fff;
 }
 
-#header a:hover {
+#header a:focus , #header a:hover {
     text-decoration: underline;
 }
 
@@ -849,7 +870,7 @@ table#change-history tbody th {
     border-bottom: 1px solid rgba(255, 255, 255, 0.25);
 }
 
-#user-tools a:hover {
+#user-tools a:focus, #user-tools a:hover {
     text-decoration: none;
     border-bottom-color: #79aec8;
     color: #79aec8;
@@ -909,6 +930,7 @@ table#change-history tbody th {
 }
 
 .delete-confirmation form input[type="submit"]:active,
+.delete-confirmation form input[type="submit"]:focus,
 .delete-confirmation form input[type="submit"]:hover {
     background: #a41515;
 }
@@ -926,11 +948,11 @@ table#change-history tbody th {
 }
 
 .delete-confirmation form .cancel-link:active,
+.delete-confirmation form .cancel-link:focus,
 .delete-confirmation form .cancel-link:hover {
     background: #ccc;
 }
 
-
 /* POPUP */
 .popup #content {
     padding: 20px;
diff --git a/django/contrib/admin/static/admin/css/changelists.css b/django/contrib/admin/static/admin/css/changelists.css
index 63cfe1bf61..fd9e784478 100644
--- a/django/contrib/admin/static/admin/css/changelists.css
+++ b/django/contrib/admin/static/admin/css/changelists.css
@@ -93,7 +93,6 @@
 }
 
 #changelist #toolbar form #searchbar:focus {
-    outline: none;
     border-color: #999;
 }
 
@@ -108,6 +107,7 @@
     color: #333;
 }
 
+#changelist #toolbar form input[type="submit"]:focus,
 #changelist #toolbar form input[type="submit"]:hover {
     border-color: #999;
 }
@@ -168,10 +168,6 @@
     color: #999;
 }
 
-#changelist-filter a:hover {
-    color: #036;
-}
-
 #changelist-filter li.selected {
     border-left: 5px solid #eaeaea;
     padding-left: 10px;
@@ -182,6 +178,12 @@
     color: #5b80b2;
 }
 
+#changelist-filter a:focus, #changelist-filter a:hover,
+#changelist-filter li.selected a:focus,
+#changelist-filter li.selected a:hover {
+    color: #036;
+}
+
 /* DATE DRILLDOWN */
 
 .change-list ul.toplinks {
@@ -203,6 +205,7 @@
     color: #999;
 }
 
+.change-list ul.toplinks .date-back a:focus,
 .change-list ul.toplinks .date-back a:hover {
     color: #036;
 }
@@ -232,7 +235,7 @@
     color: #5b80b2;
 }
 
-.paginator a.showall:hover {
+.paginator a.showall:focus, .paginator a.showall:hover {
     background: none;
     color: #036;
 }
@@ -248,7 +251,7 @@
     vertical-align: top;
 }
 
-.paginator a:hover {
+.paginator a:focus, .paginator a:hover {
     color: white;
     background: #036;
 }
@@ -309,6 +312,10 @@
     margin-left: 10px;
 }
 
+#changelist .actions select:focus {
+    border-color: #999;
+}
+
 #changelist .actions label {
     display: inline-block;
     vertical-align: middle;
@@ -329,6 +336,6 @@
     color: #333;
 }
 
-#changelist .actions .button:hover {
+#changelist .actions .button:focus, #changelist .actions .button:hover {
     border-color: #999;
 }
diff --git a/django/contrib/admin/static/admin/css/forms.css b/django/contrib/admin/static/admin/css/forms.css
index afdb559cba..2a21257b6a 100644
--- a/django/contrib/admin/static/admin/css/forms.css
+++ b/django/contrib/admin/static/admin/css/forms.css
@@ -53,7 +53,6 @@ form ul.radiolist label {
 form ul.radiolist input[type="radio"] {
     margin: -2px 4px 0 0;
     padding: 0;
-    outline: none;
 }
 
 form ul.inline {
@@ -276,6 +275,7 @@ body.popup .submit-row {
     color: #fff;
 }
 
+.submit-row a.deletelink:focus,
 .submit-row a.deletelink:hover,
 .submit-row a.deletelink:active {
     background: #a41515;
@@ -460,7 +460,6 @@ body.popup .submit-row {
     background: url(../img/icon-addlink.svg) 0 1px no-repeat;
     padding-left: 16px;
     font-size: 12px;
-    outline: 0; /* Remove dotted border around link */
 }
 
 .empty-form {
diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css
index 979ae77cae..15d3f8341f 100644
--- a/django/contrib/admin/static/admin/css/widgets.css
+++ b/django/contrib/admin/static/admin/css/widgets.css
@@ -90,26 +90,32 @@
     display: block;
     text-indent: -3000px;
     overflow: hidden;
+    cursor: default;
+    opacity: 0.3;
+}
+
+.active.selector-add, .active.selector-remove {
+    opacity: 1;
+}
+
+.active.selector-add:hover, .active.selector-remove:hover {
+    cursor: pointer;
 }
 
 .selector-add {
     background: url(../img/selector-icons.svg) 0 -96px no-repeat;
-    cursor: default;
 }
 
-.active.selector-add {
+.active.selector-add:focus, .active.selector-add:hover {
     background-position: 0 -112px;
-    cursor: pointer;
 }
 
 .selector-remove {
     background: url(../img/selector-icons.svg) 0 -64px no-repeat;
-    cursor: default;
 }
 
-.active.selector-remove {
+.active.selector-remove:focus, .active.selector-remove:hover {
     background-position: 0 -80px;
-    cursor: pointer;
 }
 
 a.selector-chooseall, a.selector-clearall {
@@ -121,38 +127,41 @@ a.selector-chooseall, a.selector-clearall {
     font-weight: bold;
     line-height: 16px;
     color: #666;
+    text-decoration: none;
+    opacity: 0.3;
 }
 
-a.selector-chooseall {
-    padding: 0 18px 0 0;
+a.active.selector-chooseall:focus, a.active.selector-clearall:focus,
+a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
+    color: #447e9b;
 }
 
-a.selector-clearall {
-    padding: 0 0 0 18px;
+a.active.selector-chooseall, a.active.selector-clearall {
+    opacity: 1;
 }
 
 a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
-    color: #447e9b;
+    cursor: pointer;
 }
 
 a.selector-chooseall {
+    padding: 0 18px 0 0;
     background: url(../img/selector-icons.svg) right -160px no-repeat;
     cursor: default;
 }
 
-a.active.selector-chooseall {
+a.active.selector-chooseall:focus, a.active.selector-chooseall:hover {
     background-position: 100% -176px;
-    cursor: pointer;
 }
 
 a.selector-clearall {
+    padding: 0 0 0 18px;
     background: url(../img/selector-icons.svg) 0 -128px no-repeat;
     cursor: default;
 }
 
-a.active.selector-clearall {
+a.active.selector-clearall:focus, a.active.selector-clearall:hover {
     background-position: 0 -144px;
-    cursor: pointer;
 }
 
 /* STACKED SELECTORS */
@@ -283,6 +292,7 @@ table p.datetime {
     background: url(../img/icon-clock.svg) 0 0 no-repeat;
 }
 
+.datetimeshortcuts a:focus .clock-icon,
 .datetimeshortcuts a:hover .clock-icon {
     background-position: 0 -16px;
 }
@@ -292,6 +302,7 @@ table p.datetime {
     top: -1px;
 }
 
+.datetimeshortcuts a:focus .date-icon,
 .datetimeshortcuts a:hover .date-icon {
     background-position: 0 -16px;
 }
@@ -428,6 +439,7 @@ span.clearable-file-input label {
     color: #444;
 }
 
+.calendar td a:focus, .timelist a:focus,
 .calendar td a:hover, .timelist a:hover {
     background: #79aec8;
     color: white;
@@ -446,7 +458,8 @@ span.clearable-file-input label {
     padding: 1px 3px;
 }
 
-.calendarnav a:link, #calendarnav a:visited, #calendarnav a:hover {
+.calendarnav a:link, #calendarnav a:visited,
+#calendarnav a:focus, #calendarnav a:hover {
     color: #999;
 }
 
@@ -474,6 +487,7 @@ span.clearable-file-input label {
     background: url(../img/calendar-icons.svg) 0 0 no-repeat;
 }
 
+.calendarbox .calendarnav-previous:focus,
 .calendarbox .calendarnav-previous:hover {
     background-position: 0 -15px;
 }
@@ -483,6 +497,7 @@ span.clearable-file-input label {
     background: url(../img/calendar-icons.svg) 0 -30px no-repeat;
 }
 
+.calendarbox .calendarnav-next:focus,
 .calendarbox .calendarnav-next:hover {
     background-position: 0 -45px;
 }
@@ -496,7 +511,7 @@ span.clearable-file-input label {
     color: #333;
 }
 
-.calendar-cancel:hover {
+.calendar-cancel:focus, .calendar-cancel:hover {
     background: #ddd;
 }
 
@@ -524,10 +539,9 @@ ul.timelist, .timelist li {
     width: 16px;
     height: 16px;
     border: 0px none;
-    outline: 0; /* Remove dotted border around link */
 }
 
-.inline-deletelink:hover {
+.inline-deletelink:focus, .inline-deletelink:hover {
     cursor: pointer;
 }
 
@@ -542,6 +556,11 @@ ul.timelist, .timelist li {
 }
 
 .related-widget-wrapper-link:link {
+    opacity: .8;
+}
+
+.related-widget-wrapper-link:link:focus,
+.related-widget-wrapper-link:link:hover {
     opacity: 1;
 }