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

Jump to bottom

Review FAQ disclosure example #265

Closed
3 tasks done
mcking65 opened this issue Jan 31, 2017 · 15 comments
Closed
3 tasks done

Review FAQ disclosure example #265

mcking65 opened this issue Jan 31, 2017 · 15 comments
Assignees
@jnurthen @a11ydoer @annabbott
Labels
Example Page Related to a page containing an example implementation of a pattern
Milestone
Jan 2017 Clean Up

Comments

@mcking65
Copy link
Contributor

mcking65 commented Jan 31, 2017 •
edited
Loading

The example of using a
disclosure for answers in a FAQ
is ready for review.

Requested reviews
@mcking65 mcking65 added Example Page Related to a page containing an example implementation of a pattern Needs Review labels Jan 31, 2017
@mcking65 mcking65 added this to the Jan 2017 Clean Up milestone Jan 31, 2017
@mcking65
Copy link
Contributor Author

Seems to me it would be better if we preserve and expose the definition list semantics by putting the button role on a span inside of the dt element instead of having role button on the dt element. If we don't do this, then we should have role presentation on the dl element.

@annabbott
Copy link

Looks good.

@jnurthen
Copy link
Member

jnurthen commented Feb 3, 2017

The dl, dd and dt are troubling me.
I'm not sure we need both the Definition list semantics AND the hide/show with the aria-controls relationship. Indeed - the DT without a DD (when it is hidden) bothers me as it implies a relationship which is not present in the page at that time.
I think this warrants further discussion in the meeting on monday.

@mcking65
Copy link
Contributor Author

Maybe the content that is controlled by the disclosure (the answer to the question) should be in a div inside the dd so that the dd is always present. Both for structure and fall back, I kind of like the dl semantics.

@jongund
Copy link
Contributor

jongund commented Feb 13, 2017

Created a pull request to address the use of entities for displaying state and changed FAQ example to use DIV elements instead of DL/DT/DD elements

@mcking65
Copy link
Contributor Author

@jongund, I thought the outcome of the meeting discussion was to keep the dl since this is a list of questions. To do this, we put the question button inside of the dt and the element controled by that button inside of the dd.

I included these remarks in my review of PR #282.

In the PR, everything is a div, which gives 0 semantic structure except for the intervening button elements.

@jongund
Copy link
Contributor

jongund commented Feb 14, 2017 via email

@jongund
Copy link
Contributor

jongund commented Feb 14, 2017 via email

mcking65 pushed a commit that referenced this issue Feb 14, 2017
@jongund @mcking65
Change Disclosure Examples to Use DL Semantics and Revise CSS
db57547 
Per discussion in issue #264 and #265 for review of disclosure examples, made the following changes.

1. Use CSS generated images instead of entities for visual state information
2. For disclosure controls, use  HTML button element instead of span elements with role=button
3. In FAQ, moved answers inside of a `p` element inside of the `dd` element.
4. Fixed call to method for displaying html source.
5. Revised title and H1 to include the word "Example".
6. Change heading inside long description example to H3 from H2
7. Fix typos
8. Add accessibility features section describing use of CSS.
@mcking65 mcking65 assigned a11ydoer and unassigned jongund Feb 15, 2017
@annabbott
Copy link

Correct typo in first paragraph:
The following example demonstrates using the disclosure design pattern to create a set of frequently asked questions where the answers may be independently shown or hidiven.
Suggested edit:
The following example demonstrates using the disclosure design pattern to create a set of frequently asked questions where the answers may be independently shown or hidden.

@annabbott
Copy link

Correct typo in Role, Property, State, and Tabindex Attributes > aria-expanded="false":
Indicates that the container controlled by the disclosure button is hidiven .
Suggested edit:
Indicates that the container controlled by the disclosure button is hidden .

@annabbott
Copy link

In the Keyboard Support section:
Space or
Enter
Activates the disclosure button, which toggles the visibility of the answer to the question.

Only Enter toggles the visibility. Space blinks the visibility, but doesn't leave it open in order to read.

Using FF and keyboard only to navigate.

@mcking65 mcking65 mentioned this issue Mar 11, 2017
Closed
mcking65 added a commit that referenced this issue Mar 11, 2017
@mcking65
FAQ Disclosure Example: Fix Typos Described in Issue 265
16b75b4 
modified examples/disclosure/disclosure-faq.html:
Corrected two misspellings of the word "hidden" identified by @annabbott in issue #265.
@annabbott
Copy link

Enter and Space now toggle visibility = fixed.

@a11ydoer
Copy link
Contributor

I am also hesitant to use DL,DT and DD for this example. My understanding for these tags are for listing "data" like a data table instead of using table tag. This FAQ example seems to be that they are rather the list of questions. We have a FAQ example using bootstrap library.

@a11ydoer
Copy link
Contributor

I agreed with advantages of semantics by using dl, dt and dd (ex: how many items in the list and skip to the list item if a user wants) so we are closing this issue as it is.

mcking65 added a commit that referenced this issue Mar 20, 2017
@mcking65
Disclosure FAQ Example: Completed Review Process
ce02202 
Review process is complete for examples/disclosure/disclosure-faq.html.
Removed link to review issue #265.
@mcking65
Copy link
Contributor Author

Team, Thank you for all the feedback on this Example. All task force reviews are now complete, and I am closing the task force review process.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jnurthen jnurthen

@a11ydoer a11ydoer

@annabbott annabbott

Labels
Example Page Related to a page containing an example implementation of a pattern
Projects
Command, Toggle, Menu, and Disclosure Button Patterns and Examples Development Project
Status: Complete
Milestone
Jan 2017 Clean Up
Development

No branches or pull requests
5 participants
@jongund @jnurthen @mcking65 @a11ydoer @annabbott