Skip to content

E
edx-platform
Commit 5b63b176 by Brian Talbot Committed by Diana Huang
Options

revises semantics and Sass used for skip navigation

parent 20b9258d
Showing with 30 additions and 28 deletions
cms/static/sass/_base.scss
...@@ -826,22 +826,14 @@ hr.divide { ...@@ -826,22 +826,14 @@ hr.divide {
word-wrap: break-word; word-wrap: break-word;
} }
// ui - semantic + visual divider
hr.divider { hr.divider {
@extend %cont-text-sr; @extend %cont-text-sr;
} }
/* show skip links on focus */ // ui - skipnav
#skip-link a{ .nav-skip {
position:absolute; @extend %cont-text-sr;
&:focus {
width: auto;
height: auto;
overflow: visible;
background-color: #fff;
border: 2px solid black;
padding: 3px;
z-index: 1005;
}
} }
// ==================== // ====================
......
common/static/sass/_mixins.scss
...@@ -240,6 +240,13 @@ ...@@ -240,6 +240,13 @@
padding: 0; padding: 0;
position: absolute; position: absolute;
width: 1px; width: 1px;
&:focus {
@extend %ui-depth5;
width: auto;
height: auto;
overflow: visible;
}
} }
// extends - content - wrapping // extends - content - wrapping
......
lms/static/sass/base/_base.scss
...@@ -286,18 +286,7 @@ mark { ...@@ -286,18 +286,7 @@ mark {
height: 150px; height: 150px;
} }
// ui - skipnav
/* show skip links on focus */ .nav-skip {
#skip-link a{ @extend %text-sr;
position:absolute;
&:focus {
width: auto;
height: auto;
overflow: visible;
background-color: #fff;
border: 2px solid black;
padding: 3px;
z-index: 1005;
}
} }
lms/static/sass/base/_mixins.scss
...@@ -83,6 +83,13 @@ ...@@ -83,6 +83,13 @@
padding: 0; padding: 0;
position: absolute; position: absolute;
width: 1px; width: 1px;
&:focus {
@extend %ui-depth5;
width: auto;
height: auto;
overflow: visible;
}
} }
// extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases // extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
......
lms/templates/main.html
...@@ -78,7 +78,14 @@ ...@@ -78,7 +78,14 @@
</head> </head>
<body class="<%block name='bodyclass'/>"> <body class="<%block name='bodyclass'/>">
<div id="skip-link"><a href="#content-wrapper">Skip to Content</a></div> <nav class="nav-skip">
<ul class="list-nav">
<li class="nav-item">
<a href="#content">${_("Skip to this view's content")}</a>
</li>
</ul>
</nav>
<%include file="mathjax_accessible.html" /> <%include file="mathjax_accessible.html" />
% if theme_enabled(): % if theme_enabled():
...@@ -87,7 +94,7 @@ ...@@ -87,7 +94,7 @@
<%include file="navigation.html" /> <%include file="navigation.html" />
% endif % endif
<section class="content-wrapper" id="content-wrapper"> <section class="content-wrapper" id="content">
${self.body()} ${self.body()}
<%block name="bodyextra"/> <%block name="bodyextra"/>
</section> </section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment