Skip to content

Conversation

@thatblindgeye
Copy link
Contributor

@thatblindgeye thatblindgeye commented Jun 17, 2022

Closes #2960

Accordion accessibility tab

This PR:

  • Adds a page under the Accessibility tab on the PF site, laying out how to write a11y documentation for components This information is now in a new writing accessibility documentation for PatternFly wiki page
  • Includes a working example by re-writing the accordion a11y doc
  • Combines the HTML/CSS accessibility section from the accordion component into this new a11y doc
    • I opted for this route to keep all a11y documentation in one place, rather than having two different areas to have to go to. An alternative would be to have the React examples tab house its own a11y section, but that makes the accessibility tab less useful.

This is more of a robust draft of what things could look like for a more consistent a11y documentation. We can cut out various areas or rework areas as needed.

A couple of other potential ideas that we could add down the line/depending on the component:

  • A section to outline how the component was tested, e.g. with aXe dev tools/a similar automated a11y test or with what screen reader/OS/browser combinations.
  • A link directly to the WCAG and/or the Section 508 site with some verbiage about how the component either satisfies requirements or that we are actively working on making the component compliant.

@patternfly-build
Copy link
Collaborator

patternfly-build commented Jun 17, 2022

nicolethoen
nicolethoen previously approved these changes Jun 28, 2022
Copy link
Collaborator

@nicolethoen nicolethoen left a comment

Choose a reason for hiding this comment

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

I really like the structure!
This looks great to me! 😸

wolfeallison
wolfeallison previously approved these changes Jun 28, 2022
Copy link
Collaborator

@wolfeallison wolfeallison left a comment

Choose a reason for hiding this comment

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

Looks great!

@ssalice9
Copy link
Collaborator

Looks awesome, love the check boxes. Great work!

jessiehuff
jessiehuff previously approved these changes Jun 28, 2022
Copy link
Contributor

@jessiehuff jessiehuff left a comment

Choose a reason for hiding this comment

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

This looks awesome!! 😄

@thatblindgeye thatblindgeye force-pushed the a11y_docs_templating branch 2 times, most recently from f75c3b1 to 22ce6ea Compare June 30, 2022 20:12
@thatblindgeye
Copy link
Contributor Author

Latest push adds a quick example for the aria-label prop on the Accordion component (wasn't sure of a use-case for the AccordionContent component), and also adds back the Accessibility section that simply links to the a11y tab per discussion with @mmenestr

nicolethoen
nicolethoen previously approved these changes Jul 5, 2022
jessiehuff
jessiehuff previously approved these changes Jul 5, 2022
@thatblindgeye thatblindgeye dismissed stale reviews from jessiehuff and nicolethoen via 98ac905 July 6, 2022 15:54
@thatblindgeye thatblindgeye force-pushed the a11y_docs_templating branch from 22ce6ea to 98ac905 Compare July 6, 2022 15:54
@thatblindgeye thatblindgeye force-pushed the a11y_docs_templating branch from 98ac905 to 88cd355 Compare July 6, 2022 18:52
@nicolethoen nicolethoen merged commit 1431311 into patternfly:main Jul 7, 2022
mcarrano added a commit to mcarrano/patternfly-org that referenced this pull request Jul 19, 2022
…nto text-input-group

* 'main' of https://github.com/patternfly/patternfly-org: (170 commits)
  chore(release): releasing packages [ci skip]
  Updates button info architecture to align with guidelines. (patternfly#3061)
  Card design guideline changes. (patternfly#3087)
  chore(release): releasing packages [ci skip]
  iss3078 (patternfly#3079)
  chore(release): releasing packages [ci skip]
  changing alert guidelines (patternfly#3064)
  chore(release): releasing packages [ci skip]
  mastshead (patternfly#3062)
  chore(release): releasing packages [ci skip]
  jumplink (patternfly#3051)
  chore(release): releasing packages [ci skip]
  calendar (patternfly#3058)
  chore(release): releasing packages [ci skip]
  feat(doc-framework): add dark theme toggle for full page examples (patternfly#3056)
  chore(release): releasing packages [ci skip]
  edit overflow guidelines (patternfly#3038)
  chore(release): releasing packages [ci skip]
  docs(a11y): create template for a11y docs (patternfly#3019)
  docs(Tooltip): add a11y docs (patternfly#2892)
  ...

# Conflicts:
#	packages/v4/patternfly-docs/content/design-guidelines/components/text-input-group/img/attribute-value-filter.png
#	packages/v4/patternfly-docs/content/design-guidelines/components/text-input-group/img/auto-complete-search.png
#	packages/v4/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-elements.png
#	packages/v4/patternfly-docs/content/design-guidelines/components/text-input-group/text-input-group.md
jessiehuff pushed a commit to jessiehuff/patternfly-org that referenced this pull request Oct 24, 2022
* docs(a11y): create template for a11y docs

* Refactor template as webpage on PF site

* Convert accordion doc to align with template

* Update guidelines and accordion doc

* Remove duplicate a11y info from accordion design guidelines

* Make suggested updates

* Update minor difference between guidelines

* Add example for aria label prop

* Separate out library instructions

* Remove files after rebase

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add template/guidelines for component a11y docs

6 participants