-
Notifications
You must be signed in to change notification settings - Fork 339
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.
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
Review updates to Example Page for Tabs With Automatic Activation #278
Comments
…utomatic Activation modified examples/tabs/tabs-1/tabs.html: 1. Move script elements to head so HTML source will display. 2. Editorial revisions to introduction. 3. Added link to section that provides guidance on selection follows focus. 4. Per example template, Removed region around example and replaced with screen reader sepearator elements. 5. Added `aria-label="Entertainment"` to the tablist. 6. Added `tabindex="0"` to the tabpanel elements 7. Editorial revisions to the keyboard table. 8. Remove delete from keyboard table since it is not supported. 9. In roles, states and properties table: * added scope attribute and TH elements per template. * Added row for aria-label on tablist * Added rows for aria-selected true and false on tab * Added row for aria-labelledby on tabpanel * Added row for tabindex on tabpanel. 10. Per template, Added screen reader separators around HTML source display and removed role region from the source code display div. 11. Added link to review issue #278.
Where can I find the example? Thanks, |
I found the example. |
https://cdn.rawgit.com/w3c/aria-practices/d3caf713/examples/tabs/tabs-1/tabs.html --example
In this example tab list will never receive focus as it don't have tabindex as 0.
For the tab list: |
Note that The first link in the first comment in this issue, the same comment where requested reviews are listed, is a link to the page that needs review. @shirsha wrote:
I tested all the links; they are working for me. Specifically where is the link that is not working? @shirsha wrote:
The You can consider the lack of screen reader announcement of the tablist container label a screen reader bug.
Hmm, now that you say this, I see how that wording is a little confusing and why you think the tablist should be focusable. The first phrase means that when focus is moving from outside the tablist to an element inside the tablist not that the tablist element itself is focused. The element that gets focus is the active tab. We have phrasing like that in several places and in several patterns. I'd better fix that. I guess I could change it to ... "When focus is moving into the tablist: " Would that make it more clear? |
Modified tabs pattern keyboard section of aria-practices.html based on feedback from @shirsha in issue #278. Changed: "Tab: When the tab list receives focus, places focus on the active <code>tab</code> element ." To: "Tab: When focus moves into the tab list, places focus on the active <code>tab</code> element ."
Based on feedback from @shirsha in issue #278, made the two below changes in the following two files: 1. examples/tabs/tabs-1/tabs.html 2. examples/tabs/tabs-2/tabs.html Change 1: Changed `When the tab list is receiving focus, places focus on the active <code>tab</code> element .` To: `When focus moves into the tab list, places focus on the active <code>tab</code> element .` Change 2: Changed `When the tab list contains the focus, moves focus to the <code>tabpanel</code> element.` To: `When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the <code>tabpanel</code> element.`
@shirsha, I changed the misleading wording so that, I hope, it is now clear that the |
Delete is supported, but only on the last tab (same as in the other example). We can mention that in the text if that’d make it clearer. |
The "design pattern for tabs" is not at this link: It is working fine at: |
@shirsha both seem to work fine for me. |
In this example I don't see an visual separator or it is distinguish by the screen reader users as NVDA in FF and JAWS in IE is not recognizing that role.
Example
Sorry for asking too many questions. |
@shirsha, per our phone conversation, the BTW, we previously used regions, but the problem with that is that screen readers announce the region when you tab in and out, which creates a lot of distracting verbosity for people who are not familiar with screen readers and who are trying to focused strictly on the example. |
Per discussion in issue #278, modified examples/tabs/tabs-1/tabs.html: 1. Added description of the delete feature in the accessibility features section. 2. Added Delete to the keyboard table. 3. To be consistent with editorial guidelines, gave key names initial caps in the keyboard table.
I restored information about the delete function and added it to the accessibility features section. I am also editing the head comment in this issue to reflect this. I noticed, however, that focus is not correctly set after delete so raised issue #286. |
@michielBijl, thank you very much for the speedy resolution of issue #286!!!!! I tested and it is working as described. |
No problem @mcking65 :). |
I noticed that design we used wasn’t usable in Windows High Contrast mode. So I’ve made a new design that does. This doesn’t impact the functionality or HTML code. |
In the Keyboard Support section > Delete. A space is needed between the comma and the word 'removes': |
When navigating the page using only the keyboard in FF, Tab keystroke activates the "Nils Frahm" tab. I expected the next Tab keystroke to exit the widget and put focus on the first link that follows the tab panel. Instead, the next Tab keystroke puts focus on the tabpanel boundary. Same behavior occurs when the "Agnes Obel" tab is activated and I press Tab key. |
On pages for both tabs with automatic activation and tabs with manual activation, made changes to: 1. Fix missing space character in keyboard table noticed by @annabbott in issues #278 and #279. 2. For editorial consistency, added "Example of " to the beginning of the title in title tag, H1, and in link text. 3. Lower case "with" in titles.
@annabbott, the issue with tabpanel focus guidance will be resolved later with issue #323. The missing space typo in the keyboard table is fixed for both example pages in commit 9b3de6e. |
This page and example looks good to me. |
Team, thank you! Our task force reviews for this example are complete. Another example done! Closing. |
This issue tracks review of final editorial, template, and functional updates to the
Example of Tabs With Automatic Activation.
Requested Reviews
Summary of changes
aria-label="Entertainment"
to the tablist.tabindex="0"
to the tabpanel elements.The text was updated successfully, but these errors were encountered: