Skip to content

Commit

Permalink
Merge pull request #83 from MichielBijl/gh-pages
Browse files Browse the repository at this point in the history
Move CSS to separate file
  • Loading branch information
stevefaulkner authored Oct 13, 2017
2 parents 8a2dbd0 + ed3cd6b commit 3fb648a
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 112 deletions.
125 changes: 13 additions & 112 deletions html-aria/index.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset='utf-8'>
<meta charset='utf-8'>
<title>ARIA in HTML</title>
<script src="https://www.w3.org/scripts/jquery/2.1/jquery.min.js"></script>
<script src="https://www.w3.org/Tools/respec/respec-w3c-common" class="remove"></script>
<script src="https://www.w3.org/scripts/jquery/2.1/jquery.min.js"></script>
<script src="https://www.w3.org/Tools/respec/respec-w3c-common" class="remove"></script>
<script class='remove'>
var respecConfig = {
specStatus: "ED",
shortName: "html-aria",
repository: "https://github.com/w3c/html-aria",
"maxTocLevel": 2,
repository: "https://github.com/w3c/html-aria",
"maxTocLevel": 2,
editors: [{
name: "Steve Faulkner",
url: "http://www.paciellogroup.com",
Expand All @@ -24,110 +24,11 @@
edDraftURI: "https://w3c.github.io/html-aria/",
license: "w3c-software-doc",
wgPatentURI: "https://www.w3.org/2004/01/pp-impl/83482/status",
processVersion: 2017
processVersion: 2017
};
</script>
<style>
.note-title {padding-left:1.5em}

tr:nth-child(2n+1) {
background-color: #ebebeb;
}

summary {
background: url("rightArrow.png") no-repeat scroll 0.5em center #fff;
padding: 0.25em 0.25em 0.25em 2em;
}

summary:hover, summary:focus, details[open] summary:hover, details[open] summary:focus {
background-color: #eee;
}
details, summary {
display: block;
}

p.note::before {
content: "Note: ";
font-weight: bolder;
}
p.note, div.note {
padding: 0.5em 2em;
}
.note {
background: none repeat scroll 0 0 #e9fbe9;
border-color: #52e052;
border-left: 0.25em solid #52e052;
}


.example {
background: none repeat scroll 0 0 #fcfcfc;
border-color: #c0c0c0;
border-left: 0.25em solid #c0c0c0;
color: #222222;
display: block;
margin-left: 1em;
padding-bottom: 0.5em;
padding-left: 1em;
}


.new-feature {
background-color: crimson;
}
.changed-feature {
background-color: slateblue;
}

.new-feature, .changed-feature {
border-bottom: none !important;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
margin-right: 6px;
font-size: smaller;
font-weight: bold;
color: white !important;
border-radius: 4px;
box-shadow: 3px 3px 3px #888;
border-bottom: none;
margin-left: 4px;
vertical-align: top;

}
.changed-feature1 { border-bottom: none !important;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
margin-right: 6px;
font-size: smaller;
font-weight: bold;
color: white !important;
border-radius: 4px;
box-shadow: 3px 3px 3px #888;
border-bottom: none;
margin-left: 4px;
vertical-align: top;
}
.new-feature1 { border-bottom: none !important;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
margin-right: 6px;
font-size: smaller;
font-weight: bold;
color: white !important;
border-radius: 4px;
box-shadow: 3px 3px 3px #888;
border-bottom: none;
margin-left: 4px;
vertical-align: top;
}

td {padding:.3em}
a code {color:#034575}
</style>
</head>
<link rel="stylesheet" href="makeup.css">
</head>
<body>

<section id="abstract">This specification defines the web developer rules (author conformance requirements) for the use of [[!wai-aria-1.1]] and [[!dpub-aria-1.0]] attributes on [[!HTML51]] elements. It also defines requirements for Conformance Checking tools. </section>
Expand Down Expand Up @@ -956,8 +857,8 @@ <h2>Allowed ARIA roles, states and properties </h2>
<p>Columns 1 to 4 of the<abbr> </abbr><a href="#aria-table">ARIA Roles, States and Properties</a> table provide an informative <em>(non-normative)</em> reference to the ARIA roles, states and properties permitted for use in HTML. All ARIA roles, states and properties are normatively defined in the <a href="https://www.w3.org/TR/wai-aria-1.1/">ARIA 1.1</a> specification. Links to ARIA roles, states and properties in the table reference the normative <a href="https://www.w3.org/TR/wai-aria-1.1/">ARIA 1.1</a> definitions.</p>
<p>Column 5 of the<abbr> </abbr><a href="#aria-table">ARIA Roles, States and Properties</a> table, defines extensions to the <a href="http://w3c.github.io/html/dom.html#kinds-of-content">Kinds of content</a> (defined in the [[!HTML51]] specification) categories each <code>role</code> has when it is used on a HTML element. Column 6 defines what HTML elements can be descendants of an element with a particular <a href="#implicit">implicit</a> or explicit <code>role</code> value.</p>
<p>For example, an element with <code>role=button</code> is interactive content and therefore cannot contain <a href="http://w3c.github.io/html/dom.html#interactive-content-2">interactive content</a> descendants. A <code>button</code> element has an implict <code>role=button</code>, so cannot contain any elements with role values that are in the interactive content category (identified in Column 3).</p>
<div class="example" id="bad-descendents">

<div class="example" id="bad-descendents">
<strong>Examples of non-conforming descendants</strong>
<pre>
&lt;!-- conformance checkers will report an error --&gt;
Expand Down Expand Up @@ -1015,8 +916,8 @@ <h2>Allowed ARIA roles, states and properties </h2>
<li><code><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code></li>
<li><code><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-roledescription">aria-roledescription</a></code> - <span class="new-feature">(new)</span></li>
</ul>
<TD>n/a
<TD>n/a
<TD>n/a
<TD>n/a
<TR><TD tabindex="-1" id="index-aria-alert"><code><a href="http://www.w3.org/TR/wai-aria-1.1/#alert">alert</a></code></TD>
<TD>A type of <code>live region</code> with important, and usually time-sensitive, information. See related <code>alerTDialog</code> and <code>status</code>.</TD>
<TD>none</TD>
Expand Down Expand Up @@ -1753,7 +1654,7 @@ <h2>Allowed ARIA roles, states and properties </h2>
<section>
<h2 id="for-implementers">Requirements for implementers</h2>
<section><h3 id="checker-implementers">Conformance Checker implementers</h3><div class="impl">

<p>Conformance checkers that claim support for checking of ARIA in HTML, MUST implement checks for the document conformance requirements for use of the ARIA <code>role</code> and <code>aria-*</code> attributes on HTML elements as defined in this specification.</p>
<p>Documents MUST NOT use any <code data-x="attr-aria-role">role</code> values with elements
in the <a href="#docconformance">Document conformance requirements for use of ARIA attributes in HTML</a> table, other than the corresponding role value (if any) as listed for that element in the third column, other than those indicated in the second column, which SHOULD NOT be used. </p>
Expand Down
116 changes: 116 additions & 0 deletions html-aria/makeup.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
.note-title {
padding-left: 1.5em
}

summary {
background: url("rightArrow.png") no-repeat scroll 0.5em center #fff;
padding: 0.25em 0.25em 0.25em 2em;
}

summary:hover,
summary:focus,
details[open] summary:hover,
details[open] summary:focus {
background-color: #eee;
}

details,
summary {
display: block;
}

p.note::before {
content: "Note: ";
font-weight: bolder;
}

p.note,
div.note {
padding: 0.5em 2em;
}

.note {
background: none repeat scroll 0 0 #e9fbe9;
border-color: #52e052;
border-left: 0.25em solid #52e052;
}

.example {
background: none repeat scroll 0 0 #fcfcfc;
border-color: #c0c0c0;
border-left: 0.25em solid #c0c0c0;
color: #222222;
display: block;
margin-left: 1em;
padding-bottom: 0.5em;
padding-left: 1em;
}

.new-feature {
background-color: crimson;
}

.changed-feature {
background-color: slateblue;
}

.new-feature,
.changed-feature {
border-bottom: none !important;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
margin-right: 6px;
font-size: smaller;
font-weight: bold;
color: white !important;
border-radius: 4px;
box-shadow: 3px 3px 3px #888;
border-bottom: none;
margin-left: 4px;
vertical-align: top;
}

.changed-feature1 {
border-bottom: none !important;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
margin-right: 6px;
font-size: smaller;
font-weight: bold;
color: white !important;
border-radius: 4px;
box-shadow: 3px 3px 3px #888;
border-bottom: none;
margin-left: 4px;
vertical-align: top;
}

.new-feature1 {
border-bottom: none !important;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
margin-right: 6px;
font-size: smaller;
font-weight: bold;
color: white !important;
border-radius: 4px;
box-shadow: 3px 3px 3px #888;
border-bottom: none;
margin-left: 4px;
vertical-align: top;
}

tr:nth-child(2n+1) {
background-color: #ebebeb;
}

td {
padding: .3em
}

a code {
color: #034575
}

0 comments on commit 3fb648a

Please sign in to comment.