Treegrid example: Update to use APG Example template for documentation #710

jongund · 2018-06-08T19:13:38Z

No description provided.

mcking65

Thank you @jongund. This is good progress. I noted some things to address in the html file.

BTW, you can assume the ID of the pattern in aria-practices.html will be "treegrid".

mcking65 · 2018-06-11T03:18:19Z

examples/treegrid/treegrid-1.html

-  <p>
-    This same example can be used in three ways.
-  </p>
-  <ul>


Not sure we want to eliminate these operating modes; topic of discussion. We could make them three different example pages, but I am not sure that is the best approach in this case.

mcking65 · 2018-06-11T03:38:00Z

examples/treegrid/treegrid-1.html

-      <li>aria-multiselectable and aria-selected: used on row in the case of a multiselectable treegrid where each row begins with a checkbox. Must be set to false or true so that it is clear that row is selectable. Unfortunately some screen readers will read "selected" for each row even in the single selection case.</li>
-      <li>aria-labelledby or aria-describedby for headers? Not currently used, awaiting discussion. Some UA + screen reader combinations seem to be determining this automatically via the table structure.</li>
-      <li>aria-readonly: in ARIA 1.0, a grid/treegrid is editable by default. However, there is no default in ARIA 1.1. Firefox currently implements the ARIA 1.0 concept for this, which means that "editable" is read for every cell unless aria-readonly="true" is used on the treegrid. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1359482">A bug has been filed in Mozilla to not propagate the readonly/editable state to descendant gridcells unless it is specified via aria-readonly</a>.</li>
+      <li>This example uses the roving tabindex technqiue to manage the tabbing into and our of the treegrid and tabindex values are managed through javascript.</li>


Change "technqiue " to "technique". There are lots more spelling errors. Please check for spelling.
Some examples include: adddress, thetreegrid, girdcell, indictes, avaiable, aria-poinset

mcking65 · 2018-06-11T03:48:49Z

examples/treegrid/treegrid-1.html

      </li>
      <li>
        Javascript:
-        <a href="js/treegrid-1.js" type="text/javascript">example_name.js</a>
+        <a href="js/treegrid-1.js" type="text/javascript">treegrid-1.js</a>
      </li>
    </ul>
  </section>


There's a link at the end of the file back to the pattern than needs to be updated. Github doesn't let me comment on that line.

mcking65 · 2018-06-11T03:52:44Z

examples/treegrid/treegrid-1.html

@@ -83,18 +77,8 @@ <h1>Treegrid Email Inbox Example</h1>
    The following example demonstrates how the


On line 36 of Example-Template.html there is a set of four links in a nav region that are missing from this page.

jongund · 2018-06-11T17:01:59Z

Matt, Thank you for the detailed feedback, I think I fixed most of the issues. Can talk about how to deal with initial focus options on the call today. Jon From: Matt King <[email protected]> Reply-To: w3c/aria-practices <[email protected]> Date: Sunday, June 10, 2018 at 10:55 PM To: w3c/aria-practices <[email protected]> Cc: Jon Gunderson <[email protected]>, Mention <[email protected]> Subject: Re: [w3c/aria-practices] Treegrid example ready for review (#710) @mcking65 requested changes on this pull request. Thank you @jongund<https://github.com/jongund>. This is good progress. I noted some things to address in the html file. BTW, you can assume the ID of the pattern in aria-practices.html will be "treegrid".

________________________________ In examples/treegrid/treegrid-1.html<#710 (comment)>:

@@ -83,18 +77,8 @@ <h1>Treegrid Email Inbox Example</h1>

The following example demonstrates how the <a href="../../#treegrid">treegrid design pattern (TBD)</a> can be used to make an interactive tree that enables users to navigate the hierarchical structure of email conversations - and also provides the ability to navigate to elements that describe each email, such as subject and sender. - </p> - <p> - This same example can be used in three ways. - </p> - <ul> Not sure we want to eliminate these operating modes; topic of discussion. We could make them three different example pages, but I am not sure that is the best approach in this case.

________________________________ In examples/treegrid/treegrid-1.html<#710 (comment)>:

<ul>

- <li>aria-rowindex, aria-rowcount, aria-colindex, aria-colcount are not currently used, as UA/AT can compute this for fully loaded table DOMs.</li> - <li>aria-owns: not currently used, as it would be confusing to have conceptual children (other rows) vs. layout children (cells) being on the same level.</li> - <li>aria-activedescendant: this example uses to roaming tabindex method instead.</li> - <li>aria-multiselectable and aria-selected: used on row in the case of a multiselectable treegrid where each row begins with a checkbox. Must be set to false or true so that it is clear that row is selectable. Unfortunately some screen readers will read "selected" for each row even in the single selection case.</li> - <li>aria-labelledby or aria-describedby for headers? Not currently used, awaiting discussion. Some UA + screen reader combinations seem to be determining this automatically via the table structure.</li> - <li>aria-readonly: in ARIA 1.0, a grid/treegrid is editable by default. However, there is no default in ARIA 1.1. Firefox currently implements the ARIA 1.0 concept for this, which means that "editable" is read for every cell unless aria-readonly="true" is used on the treegrid. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1359482">A bug has been filed in Mozilla to not propagate the readonly/editable state to descendant gridcells unless it is specified via aria-readonly</a>.</li> + <li>This example uses the roving tabindex technqiue to manage the tabbing into and our of the treegrid and tabindex values are managed through javascript.</li> Change "technqiue " to "technique". There are lots more spelling errors. Please check for spelling. Some examples include: adddress, thetreegrid, girdcell, indictes, avaiable, aria-poinset

________________________________ In examples/treegrid/treegrid-1.html<#710 (comment)>:

</li>

<li> Javascript: - <a href="js/treegrid-1.js" type="text/javascript">example_name.js</a> + <a href="js/treegrid-1.js" type="text/javascript">treegrid-1.js</a> </li> </ul> </section> There's a link at the end of the file back to the pattern than needs to be updated. Github doesn't let me comment on that line.

________________________________ In examples/treegrid/treegrid-1.html<#710 (comment)>:

@@ -83,18 +77,8 @@ <h1>Treegrid Email Inbox Example</h1>

The following example demonstrates how the On line 36 of Example-Template.html<https://github.com/w3c/aria-practices/blob/master/examples/coding-template/Example-Template.html> there is a set of four links in a nav region that are missing from this page. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#710 (review)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ABcE7LvQ8BRiEYD1EOyYD6n8Cx9ThFNzks5t7eoXgaJpZM4Ug0du>.

mcking65

Thank you Jon. Here's another more thorough set of changes and recommendations.

mcking65 · 2018-06-12T14:12:53Z

examples/treegrid/treegrid-1.html

+    <ul>
+      <li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
+      <li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
+      <li><a href="project_url">Related Issues</a></li>


The project_url is https://github.com/w3c/aria-practices/projects/17

mcking65 · 2018-06-12T14:15:01Z

examples/treegrid/treegrid-1.html

  <main>
  <h1>Treegrid Email Inbox Example</h1>
-  <p>


We need to keep this paragraph

mcking65 · 2018-06-12T14:15:38Z

examples/treegrid/treegrid-1.html

-    Development of this example is tracked by
-    <a href="https://github.com/w3c/aria-practices/issues/132">issue 132.</a>
-  </p>
-  <p>


We need to keep this paragraph as welll

mcking65 · 2018-06-12T14:16:29Z

examples/treegrid/treegrid-1.html

-    can be used to make an interactive tree that enables users to navigate the hierarchical structure of email conversations
-    and also provides the ability to navigate to elements that describe each email, such as subject and sender.
-  </p>
-  <p>


And, please restore this paragraph and the subsequent list of links until we have had a discussion about in a meeting.

mcking65 · 2018-06-12T14:21:12Z

examples/treegrid/treegrid-1.html

@@ -107,7 +87,7 @@ <h2 id="ex_label">Example</h2>
      The div for the rendered HTML source is in the last section of the page.
    -->
    <div id="ex1">
-      <table id="treegrid" role="treegrid" aria-label="ARIA treegrid example">
+      <table id="treegrid" role="treegrid" aria-readonly="true" aria-label="ARIA treegrid example">


We should not be adding aria-readonly. It is not appropriate for this example. That's part of what we changed in the grid role for ARIA 1.1. The guidance for aria-readonly needs to be deleted from the states and properties table as well; it is not correct.

Also, I just noticed the aria-label ... I think we should change it to "Inbox".

mcking65 · 2018-06-12T15:07:50Z

examples/treegrid/treegrid-1.html

+          <td><code>tr</code></td>
+          <td>
+            <ul>
+              <li><code>aria-hidden</code> is used to control the information available to assisitve technologies.</li>


Spelling error: assisitve

mcking65 · 2018-06-12T15:15:27Z

examples/treegrid/treegrid-1.html

+          <th scope="row"><code>aria-level=<q><em>number</em></q></code></th>
+          <td><code>tr</code></td>
+          <td>
+            <ul>


For simplicity and clarity, I recommend replacing the bullets in this list with the following to be consistent with the wording we use in the tree examples:

Defines the level of the row in the hierarchical treegrid structure.

Counting is one-based.

Root rows have aria-level=“1”.

Made the change

mcking65 · 2018-06-12T15:22:21Z

examples/treegrid/treegrid-1.html

+          <th scope="row"><code>aria-setsize=<q><em>number</em></q></code></th>
+          <td><code>tr</code></td>
+          <td>
+            Identifies the number of message rows that responded to the parent e-mail message.


Recommend the following wording to be consistent with the tree examples:

Defines the number of rows in the set of rows that are in the same branch and at the same level within the hierarchy.

Made the change

hmm... still looks the same to me.

mcking65 · 2018-06-12T15:24:54Z

examples/treegrid/treegrid-1.html

+          <th scope="row"><code>aria-posinset=<q><em>number</em></q></code></th>
+          <td><code>tr</code></td>
+          <td>
+            Identifies the index of message row in the current set of message rows that responded to the parent e-mail message.


I recommend the following wording to be consistent with the tree examples:

Defines the position of the row within the set of other rows that are in the same branch and at the same level within the hierarchy.

Counting is one-based, not zero-based.

Made the change

mcking65 · 2018-06-12T15:26:18Z

examples/treegrid/treegrid-1.html

+          <td>
+            <ul>
+              <li>Makes the <code>gridcell</code> element focusable without including it in the tab sequence of the page.</li>
+              <li>All <code>row</code> and <code>girdcell</code> elements are focusable, but only one is included in the tab sequence.</li>


spelling error: girdcell

jongund · 2018-06-13T20:12:25Z

Added back in the deleted content

mcking65

@jongund, I do not see changes for comments I made on:

line 73 about correct url
line 113, I suggested changing aria-label to "inbox"
line 452 I provided wording for aria-expanded that is consistent with tree
line 464 I provided wording for aria-expanded that is consistent with tree
line 512 about aria-setsize
The content that you had previously deleted under accessibility features can stay deleted. The list of 4 items you had on line 192 in this version of the file was sufficient.

mcking65 · 2018-06-14T14:52:17Z

examples/treegrid/treegrid-1.html

+          <th scope="row"><code>aria-setsize=<q><em>number</em></q></code></th>
+          <td><code>tr</code></td>
+          <td>
+            Identifies the number of message rows that responded to the parent e-mail message.


hmm... still looks the same to me.

jongund · 2018-06-14T21:01:42Z

Matt,

I think I have fixed all the problems you have identified

jongund added 2 commits June 8, 2018 13:44

added documentation to treegrid example

b0a3204

added documentation to treegrid example

755cba9

mcking65 self-assigned this Jun 11, 2018

mcking65 requested changes Jun 11, 2018

View reviewed changes

jongund added 2 commits June 11, 2018 11:57

fixed template and spelling errors

375614d

fixed template and spelling errors

91350a0

mcking65 mentioned this pull request Jun 12, 2018

Develop example of tree grid design pattern #132

Closed

mcking65 requested changes Jun 12, 2018

View reviewed changes

mcking65 changed the title ~~Treegrid example ready for review~~ Treegrid example: Update to use APG Example template for documentation Jun 12, 2018

jongund added 2 commits June 13, 2018 15:05

added back in deleted content

f1ba3cd

added back in deleted content

adfcca7

updated based on Matt Kings suggestions

67fd8d9

mcking65 requested changes Jun 14, 2018

View reviewed changes

updated document based on MK feedback

8577d84

jongund added 3 commits June 14, 2018 20:15

fixed some bugs

0b8a381

fixed some bugs

fa6e841

removed the use of aria-hidden attribute in example

044f2dd

mcking65 approved these changes Jun 18, 2018

View reviewed changes

mcking65 merged commit 8d56a9a into w3c:treegrid Jun 18, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Treegrid example: Update to use APG Example template for documentation #710

Treegrid example: Update to use APG Example template for documentation #710

jongund commented Jun 8, 2018

mcking65 left a comment

mcking65 Jun 11, 2018

mcking65 Jun 11, 2018

mcking65 Jun 11, 2018

mcking65 Jun 11, 2018

jongund commented Jun 11, 2018 via email

mcking65 left a comment

mcking65 Jun 12, 2018

mcking65 Jun 12, 2018

mcking65 Jun 12, 2018

mcking65 Jun 12, 2018

mcking65 Jun 12, 2018

mcking65 Jun 12, 2018

jongund Jun 13, 2018

mcking65 Jun 12, 2018

jongund Jun 13, 2018

mcking65 Jun 12, 2018

jongund Jun 13, 2018

mcking65 Jun 14, 2018

mcking65 Jun 12, 2018

jongund Jun 13, 2018

mcking65 Jun 12, 2018

jongund Jun 13, 2018

jongund commented Jun 13, 2018

mcking65 left a comment

mcking65 Jun 14, 2018

jongund commented Jun 14, 2018

Treegrid example: Update to use APG Example template for documentation #710

Treegrid example: Update to use APG Example template for documentation #710

Conversation

jongund commented Jun 8, 2018

mcking65 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jongund commented Jun 11, 2018 via email

mcking65 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jongund commented Jun 13, 2018

mcking65 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jongund commented Jun 14, 2018