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

Initial aria-textseparation (depends on generic PR being merged) #996

Closed
wants to merge 2 commits into from
Closed

Initial aria-textseparation (depends on generic PR being merged) #996

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a915d8
Initial aria-textseparation (depends on generic PR being merged)
carmacleod Jun 13, 2019
3b01823
Add second example; add color to "style" value description.
carmacleod Jun 13, 2019
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
91 changes: 91 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2939,6 +2939,13 @@ <h2>Definition of Roles</h2>
</tbody>
</table>
</div>
<!-- add sentence to generic role-description div, add ul to generic characteristics table role-properties td
<p>The <pref>aria-textseparation</pref> <a>attribute</a> of a <rref>generic</rref> indicates how its text content is separated from adjacent text content of adjacent <code>generic</code> elements.</p>

<ul>
<li><pref>aria-textseparation</pref></li>
</ul>
-->
<div class="role" id="grid">
<rdef>grid</rdef>
<div class="role-description">
Expand Down Expand Up @@ -11989,6 +11996,90 @@ <h2>Definitions of States and Properties (all aria-* attributes)</h2>
</tbody>
</table>
</div>
<div class="property" id="aria-textseparation">
<pdef>aria-textseparation</pdef>
<div class="property-description">
<p>Defines how text content of a <rref>generic</rref> <a>element</a> is separated from text content of adjacent <code>generic</code> elements.</p>
<p>Specifically, <pref>aria-textseparation</pref> only applies to text nodes at the boundaries of a generic; it has no effect on separation between text nodes inside the generic, or between other types of elements.</p>
<p>The value of the <pref>aria-textseparation</pref> <a>property</a> is a <a href="#valuetype_token_list">token list</a> of size 1 or 2. The first value represents the type of text separation before the element, and the second value represents the type of text separation after the element. If a single value is given, it represents the type of text separation before and after the element. Any value not recognized in the list of allowed tokens SHOULD be treated by <a>assistive technologies</a> as if the default value <code>style</code> had been provided. If the attribute is not present or its value is an empty string or <code>undefined</code>, the default value of <code>style</code> applies.</p>
<p>For example, if the <code>badge</code> class in the following markup renders a circle around the "12" so that it is visually separated from the word "Notifications", then <code>aria-textseparation="style space"</code> ensures that AT render a space between the spans.</p>
<pre class="example highlight">
&lt;a href="http://foo.com/badge.html"&gt;
&lt;span aria-textseparation="style space"&gt;Notifications&lt;/span&gt;&lt;span class="badge"&gt;12&lt;/span&gt;
&lt;/a&gt;
</pre>
<p>In the next example, <code>aria-textseparation="none"</code> on the center <code>div</code> ensures that CAT is read as one word, and not as separate characters.</p>
<pre class="example highlight">
&lt;div&gt;C&lt;/div&gt;
&lt;div aria-textseparation="none"&gt;A&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
</pre>
<p class="note">If adjacent generics have <code>space</code> separation, spaces will be collapsed to a single space.</p>
<p class="note">In the event of conflicting text separation between adjacent generics, <code>paragraphbreak</code> has precedence over <code>linebreak</code>, which has precedence over <code>space</code>, which has precedence over <code>none</code>, which has precedence over <code>style</code>.</p>
</div>
<table class="property-features">
<caption>Characteristics:</caption>
<thead>
<tr>
<th scope="col">Characteristic</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<th class="property-related-head" scope="row">Related Concepts:</th>
<td class="property-related">
<ul>
<li>String concatenation, text content, CSS rendering</li>
</ul>
</td>
</tr>
<tr>
<th class="property-applicability-head" scope="row">Used in Roles:</th>
<td class="property-applicability">Placeholder</td> <!-- this will render as "generic" after the generic role PR is merged -->
</tr>
<tr>
<th class="property-descendants-head" scope="row">Inherits into Roles:</th>
<td class="property-descendants">Placeholder</td>
</tr>
<tr>
<th class="property-value-head" scope="row">Value:</th>
<td class="property-value"><a href="#valuetype_token_list">token list</a></td>
</tr>
</tbody>
</table>
<table class="value-descriptions">
<caption>Values:</caption>
<thead>
<tr>
<th scope="col">Value</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th class="value-name" scope="row"><strong class="default">style (default)</strong></th>
<td class="value-description">Indicates that the generic's text is separated from adjacent generic text according to the element's display style. For example, <code>display: inline;</code> renders the same as <code>none</code>, and <code>display: block;</code> renders the same as <code>linebreak</code>.</td>
</tr>
<tr>
<th class="value-name" scope="row">linebreak</th>
<td class="value-description">Indicates that the generic's text is separated from adjacent generic text by a line break.</td>
</tr>
<tr>
<th class="value-name" scope="row">none</th>
<td class="value-description">Indicates that the generic's text is not separated from adjacent generic text; it is rendered as a continuous whole, without any delimiter.</td>
</tr>
<tr>
<th class="value-name" scope="row">paragraphbreak</th>
<td class="value-description">Indicates that the generic's text is separated from adjacent generic text by a paragraph break.</td>
</tr>
<tr>
<th class="value-name" scope="row">space</th>
<td class="value-description">Indicates that the generic's text is separated from adjacent generic text by a space.</td>
</tr>
</tbody>
</table>
</div>
<div class="property" id="aria-valuemax">
<pdef>aria-valuemax</pdef>
<div class="property-description">
Expand Down