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

Disclosure examples for FAQ and image description: Update accessibility features documentation and implement coding practices in latest code guide #1814

Merged
merged 29 commits into from Nov 7, 2021
Merged

Disclosure examples for FAQ and image description: Update accessibility features documentation and implement coding practices in latest code guide #1814

merged 29 commits into from Nov 7, 2021

Conversation

jongund
Copy link
Contributor

@jongund jongund commented Mar 10, 2021 •
edited by pr-preview bot

The javascript for the discsloure button examples had some poor documentation, so I update the two examples to:

  1. Udated JS code to use APG practices
  2. Updated JS documentation
  3. Added accessibility documentation in the examples related to SVG and high contrast support
  4. Updated references in APG document and other examples

Preview Link: FAQ
Preview Link: Image Description

Review checklist

Preview | Diff

@jongund jongund changed the title Update disclosure button for FAQ and Image Description examples Updated disclosure button for FAQ and Image Description examples Mar 10, 2021
@jongund jongund changed the title Updated disclosure button for FAQ and Image Description examples Disclosure Button: Update coding practices and accessibility documentation for FAQ and image description examples May 7, 2021
charmarkk
charmarkk approved these changes May 17, 2021
View reviewed changes
Copy link
Contributor

@charmarkk charmarkk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Functions appropriately with Firefox/Chrome and NVDA/JAWS latest. HCM Black and White look appropriate.

jesdaigle
jesdaigle approved these changes May 18, 2021
View reviewed changes
Copy link
Contributor

@jesdaigle jesdaigle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code and test review are good.

@mcking65 mcking65 added Code Quality Non-functional code changes to satisfy APG code style guidelines and linters Example Page Related to a page containing an example implementation of a pattern QA for APG Examples Related to improve the quality and the acceptance of APG examples labels Oct 18, 2021
@mcking65
Copy link
Contributor

mcking65 commented Nov 1, 2021

@richnoah,

I see @jesdaigle provided approving code review. But, I see an unresolved comment by Sarah and Simon about a switch statement with an unnecessary case for the enter key. That case is still in the Javascript.

Can we please have a ffresh look at the latest code?

@a11ydoer,

I added this to November 2, 2021 Agenda · w3c/aria-practices Wiki so we can check visuals. If anyone has the chance to look at visuals, including in high contrast, before the meeting, that would certainly help.

@mcking65 mcking65 requested a review from zcorpan November 1, 2021 02:04
mcking65
mcking65 approved these changes Nov 1, 2021
View reviewed changes
Copy link
Contributor

@mcking65 mcking65 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Editorial review complete. Approve.

@jongund
Copy link
Contributor Author

jongund commented Nov 1, 2021

@mcking65
I removed the event handler for the keyboard

@zcorpan
Copy link
Member

zcorpan commented Nov 1, 2021

@mcking65, @jongund has now resolved the enter key comment.

@a11ydoer a11ydoer self-assigned this Nov 2, 2021
@a11ydoer
Copy link
Contributor

a11ydoer commented Nov 2, 2021 •
edited

Visual review -for future update

  1. FAQ design commonly has distinguishing border lines, which distinguish each question from others. In addition, there can be a visual indicator which item the user is about to open.
    simple FAQ visual design example
  2. Image description example. - we can make " Data Table for Minard's Chart" button be distinguishable from the rest of contents and foundable easily. As the user, I had a difficult time to see "Data Table for Minard's Chart" button. Once it has focus, it is findable/distinguishable due to focus background color, blue.

@a11ydoer
Copy link
Contributor

a11ydoer commented Nov 2, 2021

High contrast check is complete and two examples look good.
Test with High contrast white/black in PC and Inverted color in Mac.

@a11ydoer a11ydoer requested review from a11ydoer and removed request for smhigley and charmarkk November 2, 2021 01:18
a11ydoer
a11ydoer approved these changes Nov 2, 2021
View reviewed changes
Copy link
Contributor

@a11ydoer a11ydoer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see the room for visual design improvement but this is not the deal breaker.
I checked with High contrast mode for two examples both PC and Mac. They looked good.

@a11ydoer a11ydoer mentioned this pull request Nov 2, 2021
Open
@mcking65 mcking65 merged commit b0c809b into main Nov 7, 2021
@mcking65 mcking65 deleted the update-disclosure-button branch November 7, 2021 22:31
@mcking65 mcking65 changed the title Disclosure Button: Update coding practices and accessibility documentation for FAQ and image description examples Disclosure examples for FAQ and image description: Update accessibility features documentation and implement coding practices in latest code guide Nov 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@smhigley smhigley smhigley left review comments

@zcorpan zcorpan zcorpan approved these changes

@mcking65 mcking65 mcking65 approved these changes

@a11ydoer a11ydoer a11ydoer approved these changes

@charmarkk charmarkk charmarkk approved these changes

@jesdaigle jesdaigle jesdaigle approved these changes

Assignees

@a11ydoer a11ydoer

Labels
Code Quality Non-functional code changes to satisfy APG code style guidelines and linters Example Page Related to a page containing an example implementation of a pattern QA for APG Examples Related to improve the quality and the acceptance of APG examples
Projects
Command, Toggle, Menu, and Disclosure...
  
Complete
Milestone
1.2 Release 1
Development

Successfully merging this pull request may close these issues.

None yet
7 participants
@jongund @mcking65 @zcorpan @a11ydoer @smhigley @charmarkk @jesdaigle