Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Addition: Prohibit naming of elements #402

Merged
merged 19 commits into from
Apr 3, 2022
Merged

Addition: Prohibit naming of elements #402

Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
047f569
Prohibit naming of elements
scottaohara Feb 11, 2022
c5a9bb4
Update index.html
stevefaulkner Feb 11, 2022
28ff042
naming prohibited updates
scottaohara Feb 13, 2022
1a44814
Update index.html
scottaohara Feb 13, 2022
4b5bcb8
Merge branch 'gh-pages' into issue-147-naming-prohibited
scottaohara Feb 13, 2022
390a93e
Merge branch 'gh-pages' into issue-147-naming-prohibited
scottaohara Mar 4, 2022
62b68c0
update to aria 1.2 links to resolve some conflicts
scottaohara Mar 12, 2022
d6f6962
Merge branch 'gh-pages' into issue-147-naming-prohibited
scottaohara Mar 12, 2022
125bd7f
reference new section
scottaohara Mar 12, 2022
f24d04e
fixing a typo by revising a sentence
scottaohara Mar 12, 2022
1b93a42
prohibit naming of legend
scottaohara Mar 12, 2022
a7f5e36
prohibit naming of rp and rt
scottaohara Mar 12, 2022
638ae50
create prohibit naming test
scottaohara Mar 12, 2022
3d6c956
shouldn't have pushed this here
scottaohara Mar 12, 2022
419a69d
Merge branch 'gh-pages' into issue-147-naming-prohibited
scottaohara Mar 12, 2022
2337773
remove rp element from this PR
scottaohara Mar 16, 2022
3bd53a2
Merge branch 'gh-pages' into issue-147-naming-prohibited
scottaohara Mar 16, 2022
ad38f26
Update index.html
scottaohara Mar 26, 2022
047880d
Merge branch 'gh-pages' into issue-147-naming-prohibited
scottaohara Mar 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
create prohibit naming test
  • Loading branch information
@scottaohara
scottaohara authored Mar 12, 2022
commit 638ae508e323d6d0a03f114fe29b86274aa15f3f
301 changes: 301 additions & 0 deletions tests/prohibit-naming.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,301 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>ARIA in HTML - Test Cases</title>
<link rel="stylesheet" href="../results/styles.css">
<style>
body{
font-size: 1em;
}
.testcase {
margin: 2em 0;
}
h3{
margin: .5em 0;
border: 0;
padding: 0;
}
h2 {font-size:2em}
</style>
</head>
<body aria-label=fail aria-labelledby=name>

<header>
<h1>ARIA in HTML - test cases for elements which prohibit naming</h1>
<p>last updated 12 March 2022</p>
</header>
<main>
<h2>Tests:</h2>
<p>
Each of the following test cases is an instance of an HTML element which either has an <code>aria-labelledby</code> or a <code>aria-label</code> attribute, which are not allowed for these elements with their implicit ARIA roles which prohibit naming.
</p>
<p>Note: the <code>body</code> element of this page has an <code>aria-label</code> and <code>aria-labelledby</code> specified for checking purposes, as that element too is not allowed to be named by authors.</p>

<div hidden id=name>labelled by name</div>

<div class=test-case>
<h3><code>a</code></h3>
<a aria-label="aria">fail</a>
<a aria-labelledby=name>fail</a>
</div>

<div class=test-case>
<h3><code>abbr</code></h3>
<abbr aria-label="aria">fail</abbr>
<abbr aria-labelledby=name>fail</abbr>
</div>

<div class=test-case>
<h3><code>address</code></h3>
<address aria-label="aria">fail</address>
<address aria-labelledby=name>fail</address>
</div>

<div class=test-case>
<h3><code>area</code></h3>
<map name=1><area aria-label="aria">fail</map>
<map name=2><area aria-labelledby=name>fail</map>
</div>

<div class=test-case>
<h3><code>autonomous custom element</code></h3>
<custom-el aria-label="aria">fail</custom-el>
<custom-el aria-labelledby=name>fail</custom-el>
</div>

<div class=test-case>
<h3><code>b</code></h3>
<b aria-label="aria">fail</b>
<b aria-labelledby=name>fail</b>
</div>

<div class=test-case>
<h3><code>bdi</code></h3>
<bdi aria-label="aria">fail</bdi>
<bdi aria-labelledby=name>fail</bdi>
</div>

<div class=test-case>
<h3><code>bdo</code></h3>
<bdo dir=ltr aria-label="aria">fail</bdo>
<bdo dir=ltr aria-labelledby=name>fail</bdo>
</div>

<div class=test-case>
<h3><code>caption</code></h3>
<table>
<caption aria-label="aria">fail</caption>
<tr><td>...</td></tr>
</table>
<table>
<caption aria-labelledby=name>fail</caption>
<tr><td>...</td></tr>
</table>
</div>

<div class=test-case>
<h3><code>cite</code></h3>
<cite aria-label="aria">fail</cite>
<cite aria-labelledby=name>fail</cite>
</div>

<div class=test-case>
<h3><code>code</code></h3>
<code aria-label="aria">fail</code>
<code aria-labelledby=name>fail</code>
</div>

<div class=test-case>
<h3><code>data</code></h3>
<data value=fail aria-label="aria">fail</data>
<data value=fail aria-labelledby=name>fail</data>
</div>

<div class=test-case>
<h3><code>del</code></h3>
<del aria-label="aria">fail</del>
<del aria-labelledby=name>fail</del>
</div>

<div class=test-case>
<h3><code>div</code></h3>
<div aria-label="aria">fail</div>
<div aria-labelledby=name>fail</div>
</div>

<div class=test-case>
<h3><code>em</code></h3>
<em aria-label="aria">fail</em>
<em aria-labelledby=name>fail</em>
</div>

<div class=test-case>
<h3><code>figcaption</code></h3>
<figure>
<div role=img aria-label="test image 1">test</div>
<figcaption aria-label="aria">fail</figcaption>
</figure>
<figure>
<div role=img aria-label="test image 1">test</div>
<figcaption aria-labelledby=name>fail</figcaption>
</figure>

</div>

<div class=test-case>
<h3><code>footer</code> not scoped to <code>body</code></h3>
<article>
<footer aria-label="aria">fail</footer>
<footer aria-labelledby=name>fail</footer>
</article>
</div>

<div class=test-case>
<h3><code>header</code> not scoped to <code>body</code></h3>
<article>
<header aria-label="aria">fail</header>
<header aria-labelledby=name>fail</header>
</article>
</div>

<div class=test-case>
<h3><code>hgroup</code></h3>
<hgroup aria-label="aria"><h4>fail</h4></hgroup>
<hgroup aria-labelledby=name><h4>fail</h4></hgroup>
</div>

<div class=test-case>
<h3><code>i</code></h3>
<i aria-label="aria">fail</i>
<i aria-labelledby=name>fail</i>
</div>

<div class=test-case>
<h3><code>ins</code></h3>
<ins aria-label="aria">fail</ins>
<ins aria-labelledby=name>fail</ins>
</div>

<div class=test-case>
<h3><code>kbd</code></h3>
<kbd aria-label="aria">fail</kbd>
<kbd aria-labelledby=name>fail</kbd>
</div>

<div class=test-case>
<h3><code>label</code></h3>
<label aria-label="aria">fail</label>
<label aria-labelledby=name>fail</label>
</div>

<div class=test-case>
<h3><code>legend</code></h3>
<fieldset>
<legend aria-label="aria">fail</legend>
</fieldset>
<fieldset>
<legend aria-labelledby=name>fail</legend>
</fieldset>
</div>

<div class=test-case>
<h3><code>mark</code></h3>
<mark aria-label="aria">fail</mark>
<mark aria-labelledby=name>fail</mark>
</div>

<div class=test-case>
<h3><code>p</code></h3>
<p aria-label="aria">fail</p>
<p aria-labelledby=name>fail</p>
</div>

<div class=test-case>
<h3><code>pre</code></h3>
<pre aria-label="aria">fail</pre>
<pre aria-labelledby=name>fail</pre>
</div>

<div class=test-case>
<h3><code>q</code></h3>
<q aria-label="aria">fail</q>
<q aria-labelledby=name>fail</q>
</div>

<div class=test-case>
<h3><code>rp</code> and <code>rt</code></h3>
<ruby>
<rp aria-label="aria">(</rp>
<rt aria-label="aria">fail</rt>
<rp aria-label="aria">)</rp>
</ruby>
<ruby>
<rp aria-label="aria">(</rp>
<rt aria-labelledby=name>fail</rt>
<rp aria-label="aria">)</rp>
</ruby>
</div>

<div class=test-case>
<h3><code>s</code></h3>
<s aria-label="aria">fail</s>
<s aria-labelledby=name>fail</s>
</div>

<div class=test-case>
<h3><code>samp</code></h3>
<samp aria-label="aria">fail</samp>
<samp aria-labelledby=name>fail</samp>
</div>

<div class=test-case>
<h3><code>small</code></h3>
<small aria-label="aria">fail</small>
<small aria-labelledby=name>fail</small>
</div>

<div class=test-case>
<h3><code>span</code></h3>
<span aria-label="aria">fail</span>
<span aria-labelledby=name>fail</span>
</div>

<div class=test-case>
<h3><code>strong</code></h3>
<strong aria-label="aria">fail</strong>
<strong aria-labelledby=name>fail</strong>
</div>

<div class=test-case>
<h3><code>sub</code></h3>
<sub aria-label="aria">fail</sub>
<sub aria-labelledby=name>fail</sub>
</div>

<div class=test-case>
<h3><code>sup</code></h3>
<sup aria-label="aria">fail</sup>
<sup aria-labelledby=name>fail</sup>
</div>

<div class=test-case>
<h3><code>time</code></h3>
<time aria-label="aria">12:00</time>
<time aria-labelledby=name>12:00</time>
</div>

<div class=test-case>
<h3><code>u</code></h3>
<u aria-label="aria">fail</u>
<u aria-labelledby=name>fail</u>
</div>

<div class=test-case>
<h3><code>var</code></h3>
<var aria-label="aria">fail</var>
<var aria-labelledby=name>fail</var>
</div>

</main>
</body>
</html>