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.

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

docs: adding screen reader testing page #1798

Merged
merged 35 commits into from
Sep 22, 2024

Conversation

hellogreg
Copy link
Collaborator

@hellogreg hellogreg commented Aug 28, 2024

What I did

  1. Created a new page on the basics of screen reader testing
  2. Modified current screen reader section on the QA and testing page.

Testing instructions

  1. Check content and formatting of the new page.
  2. Ensure modifed content at the QA and testing page is accurate and sufficient.
  3. Ensure that the link on our Assistive Tech page points successfully to the new page.

Notes for testers

  1. If anything warrants major copy changes or discussion, feel free to add comments or suggestions to the source Google Doc, if that's easier.

@hellogreg hellogreg added the docs Improvements or additions to documentation label Aug 28, 2024
@hellogreg hellogreg self-assigned this Aug 28, 2024
@hellogreg hellogreg linked an issue Aug 28, 2024 that may be closed by this pull request
Copy link

changeset-bot bot commented Aug 28, 2024

⚠️ No Changeset found

Latest commit: 133e563

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

netlify bot commented Aug 28, 2024

Deploy Preview for red-hat-design-system ready!

Name Link
🔨 Latest commit 133e563
🔍 Latest deploy log https://app.netlify.com/sites/red-hat-design-system/deploys/66efbe36868a650008d224cc
😎 Deploy Preview https://deploy-preview-1798--red-hat-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

github-actions bot commented Aug 28, 2024

Size Change: 0 B

Total Size: 183 kB

ℹ️ View Unchanged
Filename Size
./elements.js 473 B
./elements/rh-accordion/context.js 162 B
./elements/rh-accordion/rh-accordion-header.js 2.77 kB
./elements/rh-accordion/rh-accordion-panel.js 1.37 kB
./elements/rh-accordion/rh-accordion.js 3.21 kB
./elements/rh-alert/rh-alert.js 3.96 kB
./elements/rh-audio-player/rh-audio-player-about.js 1.85 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js 1.85 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 1.53 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js 1.43 kB
./elements/rh-audio-player/rh-audio-player.js 13.2 kB
./elements/rh-audio-player/rh-cue.js 2 kB
./elements/rh-audio-player/rh-transcript.js 2.75 kB
./elements/rh-avatar/random-pattern-controller.js 2.72 kB
./elements/rh-avatar/rh-avatar.js 2.9 kB
./elements/rh-back-to-top/rh-back-to-top.js 2.1 kB
./elements/rh-badge/rh-badge.js 1.1 kB
./elements/rh-blockquote/rh-blockquote.js 1.4 kB
./elements/rh-breadcrumb/rh-breadcrumb.js 1.5 kB
./elements/rh-button/rh-button.js 4.24 kB
./elements/rh-card/rh-card.js 3.57 kB
./elements/rh-code-block/prism.css.js 725 B
./elements/rh-code-block/prism.js 556 B
./elements/rh-code-block/rh-code-block.js 6.93 kB
./elements/rh-cta/rh-cta.js 3.89 kB
./elements/rh-dialog/rh-dialog.js 4.78 kB
./elements/rh-dialog/yt-api.js 617 B
./elements/rh-footer/rh-footer-block.js 766 B
./elements/rh-footer/rh-footer-copyright.js 362 B
./elements/rh-footer/rh-footer-links.js 1.17 kB
./elements/rh-footer/rh-footer-social-link.js 964 B
./elements/rh-footer/rh-footer-universal.js 4.05 kB
./elements/rh-footer/rh-footer.js 5.01 kB
./elements/rh-health-index/rh-health-index.js 2.35 kB
./elements/rh-icon/rh-icon.js 2.36 kB
./elements/rh-icon/ssr.js 181 B
./elements/rh-menu/rh-menu.js 1.29 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 2.47 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 1.35 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 1.75 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 571 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js 5.27 kB
./elements/rh-navigation-secondary/test/fixtures.js 769 B
./elements/rh-pagination/rh-pagination.js 5.46 kB
./elements/rh-site-status/rh-site-status.js 2.5 kB
./elements/rh-skip-link/rh-skip-link.js 1.24 kB
./elements/rh-spinner/rh-spinner.js 1.43 kB
./elements/rh-stat/rh-stat.js 2.2 kB
./elements/rh-subnav/rh-subnav.js 2.7 kB
./elements/rh-surface/rh-surface.js 1.11 kB
./elements/rh-surface/test/elements.js 423 B
./elements/rh-switch/rh-switch.js 2.93 kB
./elements/rh-table/rh-sort-button.js 1.49 kB
./elements/rh-table/rh-table.js 3.31 kB
./elements/rh-tabs/context.js 160 B
./elements/rh-tabs/rh-tab-panel.js 1.14 kB
./elements/rh-tabs/rh-tab.js 2.93 kB
./elements/rh-tabs/rh-tabs.js 3.68 kB
./elements/rh-tag/rh-tag.js 2.84 kB
./elements/rh-tile/rh-tile-group.js 1.81 kB
./elements/rh-tile/rh-tile.js 5.16 kB
./elements/rh-timestamp/rh-timestamp.js 983 B
./elements/rh-tooltip/rh-tooltip.js 2.24 kB
./elements/rh-video-embed/rh-video-embed.js 4.6 kB
./lib/context/color/consumer.js 1.23 kB
./lib/context/color/controller.js 947 B
./lib/context/color/provider.js 2.08 kB
./lib/context/event.js 593 B
./lib/context/headings/consumer.js 722 B
./lib/context/headings/controller.js 1.12 kB
./lib/context/headings/provider.js 1.24 kB
./lib/DirController.js 565 B
./lib/elements/rh-context-demo/rh-context-demo.js 1.28 kB
./lib/elements/rh-context-picker/rh-context-picker.js 2.21 kB
./lib/environment.js 4.09 kB
./lib/functions.js 175 B
./lib/I18nController.js 1.38 kB
./lib/ScreenSizeController.js 849 B
./react/rh-accordion/rh-accordion-header.js 199 B
./react/rh-accordion/rh-accordion-panel.js 185 B
./react/rh-accordion/rh-accordion.js 215 B
./react/rh-alert/rh-alert.js 184 B
./react/rh-audio-player/rh-audio-player-about.js 191 B
./react/rh-audio-player/rh-audio-player-rate-stepper.js 213 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 214 B
./react/rh-audio-player/rh-audio-player-subscribe.js 196 B
./react/rh-audio-player/rh-audio-player.js 183 B
./react/rh-audio-player/rh-cue.js 195 B
./react/rh-audio-player/rh-transcript.js 207 B
./react/rh-avatar/rh-avatar.js 173 B
./react/rh-back-to-top/rh-back-to-top.js 183 B
./react/rh-badge/rh-badge.js 174 B
./react/rh-blockquote/rh-blockquote.js 179 B
./react/rh-breadcrumb/rh-breadcrumb.js 179 B
./react/rh-button/rh-button.js 174 B
./react/rh-card/rh-card.js 172 B
./react/rh-code-block/rh-code-block.js 181 B
./react/rh-cta/rh-cta.js 170 B
./react/rh-dialog/rh-dialog.js 203 B
./react/rh-footer/rh-footer-block.js 184 B
./react/rh-footer/rh-footer-copyright.js 187 B
./react/rh-footer/rh-footer-links.js 185 B
./react/rh-footer/rh-footer-social-link.js 193 B
./react/rh-footer/rh-footer-universal.js 188 B
./react/rh-footer/rh-footer.js 174 B
./react/rh-health-index/rh-health-index.js 184 B
./react/rh-icon/rh-icon.js 202 B
./react/rh-menu/rh-menu.js 173 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js 199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js 201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js 213 B
./react/rh-pagination/rh-pagination.js 178 B
./react/rh-site-status/rh-site-status.js 181 B
./react/rh-skip-link/rh-skip-link.js 181 B
./react/rh-spinner/rh-spinner.js 175 B
./react/rh-stat/rh-stat.js 171 B
./react/rh-subnav/rh-subnav.js 175 B
./react/rh-surface/rh-surface.js 175 B
./react/rh-switch/rh-switch.js 185 B
./react/rh-table/rh-sort-button.js 213 B
./react/rh-table/rh-table.js 174 B
./react/rh-tabs/rh-tab-panel.js 181 B
./react/rh-tabs/rh-tab.js 187 B
./react/rh-tabs/rh-tabs.js 174 B
./react/rh-tag/rh-tag.js 182 B
./react/rh-tile/rh-tile-group.js 183 B
./react/rh-tile/rh-tile.js 194 B
./react/rh-timestamp/rh-timestamp.js 176 B
./react/rh-tooltip/rh-tooltip.js 175 B
./react/rh-video-embed/rh-video-embed.js 227 B

compressed-size-action

@hellogreg hellogreg marked this pull request as draft August 28, 2024 16:51
@hellogreg hellogreg requested a review from markcaron September 6, 2024 17:54
@adamjohnson
Copy link
Collaborator

This is all very well done. Nice job.

My only critique would be, as you yourself mentioned, that it is a bit lengthy.

Would it be possible or prudent to try one or more of the following:

  • Group the desktop screen readers in an accordion + mobile screen readers in another accordion?
  • Add a more detailed table of contents to the top of the page?
  • Translate some of this content to be in list (<ol> or <ul>) form or do something else to help design for reading?
  • Perhaps consider breaking this content into two separate pages, "Screen Reader Basics" and something like, "Getting Started Testing with Screen Readers" / "Using Popular Screen Readers" / {Your best title here}
    • If you broke it into multiple pages, you could then cross link to the other page respectively (maybe with a rh-tile or other component.

Take these suggestions with a grain of salt. Let me know what you think!

@hellogreg
Copy link
Collaborator Author

hellogreg commented Sep 10, 2024

Thanks, @adamjohnson ! Great suggestions, all around. No salt needed. I'll definitely re-examine what can be put into list items--always a good idea.

Beyond that, I think any one of the three other suggestions (accordion, expanded ToC, or multiple pages) would work for now.

Accordion

This is a good case for accordion, though the individual sections are long enough that even that could get unwieldy. And I typically want to maintain in-page search, even for regions that might be collapsed.

Table of Contents

Can we add <h3>s to our ToC, or does it only display <h2> sections?

Split pages

I think the most future-proofed way to break it up might be multiple pages--if we're not opposed to having more pages. Maybe even three would be good: one for general/basic info, one for computer screen reader testing, and one for mobile screen reader testing.

That could solve multiple problems:

  • Keeps us from having one massive page for everything
  • All the current <h3>s get promoted to <h2> on the new pages and show in the ToC.
  • AND Leaves room to grow under each screen reader's section, if we add more content specific to each. (Or even split the readers into their own pages, eventually, if we keep adding.)

@adamjohnson
Copy link
Collaborator

👍 to splitting it up into multiple pages. Sounds like a good plan.

@zeroedin
Copy link
Collaborator

zeroedin commented Sep 11, 2024

Can we add <h3>s to our ToC, or does it only display <h2> sections?

Right now only h2's are in the TOC. That said we could explore adding a special case in the options. h3 class="toc" or something similar. We'd also have to do some modification to how the plugin outputs content for use in the uxdot-toc component. Maybe we can explore this with the duplicate id issue #1424 fix already open on toc.

Right now it just an array of tags

/** Table of Contents Shortcode */
eleventyConfig.addPlugin(TOCPlugin, {
  wrapper: '',
  wrapperClass: '',
  tags: ['h2', 'h3.toc'],
  headingText: 'On this page',
});

Then queries the source with cheerio on build.

const selector = this.options.tags.join(',');
...
const $ = cheerio.load(htmlstring);

const headings = $(selector)
    .filter('[id]')
    .filter(`:not([${ignoreAttribute}])`);

@hellogreg
Copy link
Collaborator Author

hellogreg commented Sep 11, 2024

Can we add <h3>s to our ToC, or does it only display <h2> sections?

Right now only h2's are in the TOC. That said we could explore adding a special case in the options. h3 class="toc" or something similar. We'd also have to do some modification to how the plugin outputs content for use in the uxdot-toc component. Maybe we can explore this with the duplicate id issue #1424 fix already open on toc.

Hmm. This is great to know. Thanks, @zeroedin ! I don't think we need it in this case, if we split into more pages, but I'd be interested to know if there have been (or will be) cases where it'd be useful.

@adamjohnson
Copy link
Collaborator

The added lists look great. Nice work.

@bennypowers bennypowers removed this from the 2024/Q3 — Clefairy release milestone Sep 18, 2024
Copy link
Collaborator

@adamjohnson adamjohnson left a comment

Choose a reason for hiding this comment

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

Great additions. Couple grammar things.

Also, if this is ready for review, be sure to hit the "Ready for Review" button on the PR.

docs/accessibility/assistive-tech.md Outdated Show resolved Hide resolved
docs/accessibility/screen-readers.md Outdated Show resolved Hide resolved
docs/accessibility/screen-readers.md Outdated Show resolved Hide resolved
docs/accessibility/screen-readers.md Outdated Show resolved Hide resolved
docs/accessibility/screen-readers.md Outdated Show resolved Hide resolved
docs/accessibility/screen-readers.md Outdated Show resolved Hide resolved
docs/accessibility/screen-readers.md Outdated Show resolved Hide resolved
docs/accessibility/screen-readers.md Outdated Show resolved Hide resolved
docs/accessibility/screen-readers.md Outdated Show resolved Hide resolved
@hellogreg hellogreg marked this pull request as ready for review September 20, 2024 21:15
@bennypowers bennypowers changed the base branch from main to staging/clefairy September 22, 2024 06:45
@bennypowers bennypowers merged commit 9baec80 into staging/clefairy Sep 22, 2024
3 checks passed
@bennypowers bennypowers deleted the docs/screen-reader-basics branch September 22, 2024 06:50
zeroedin added a commit that referenced this pull request Sep 30, 2024
* style: remove extra line from `.gitattributes` file

* docs(tokens): remove copy button from value col

* feat(skip-link): href attr (#1813)

* feat(skip-link): href attr

* docs: skip-link no-anchor

* docs: update elements/rh-skip-link/demo/href-attribute.html

Co-authored-by: Adam Johnson <[email protected]>

---------

Co-authored-by: Adam Johnson <[email protected]>

* fix: remove rti from navigations (#1821)

* docs: remove RTI from sidenav

* fix(subnav): remove rti, add accessible-label attr

* fix(navigation-secondary): remove rti, add accessible-label attr

* chore: add changesets

* chore(subnav): update changeset

* chore(navigation-secondary): remove orphaned code

* docs: readd rti to sidenav taken care of in seperate docs pr

* docs(navigation-secondary): add accessible-label documentation

* docs(subnav): add accessible-label documentation

* chore(subnav): remove unused ifDefined import

* fix(navigation-secondary): remvoe preventDefault to allow tab to move to next tabstop

* fix(accordion): remove rti

* chore(navigation-secondary): update changeset

* chore(accordion): add changeet

* docs: update changesets

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* fix(accordion): bold accordion headers (#1806)

* fix(accordion): bold `rh-accordion-header` text

* fix(accordion): appease nanocss

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
Co-authored-by: Benny Powers <[email protected]>

* feat: theme properties (#1792)

* docs: theming

WIP, picking up where #1298 left off

* docs: pattern shortcode splits out css

* docs: pattern showcase element layout

* feat(card): header background theme props

* docs(card): asset patterns

* docs: pattern elements in typescript

* feat: themable surfaces

adds:
- `--rh-color-surface`
- `--rh-color-text-primary`
- `--rh-color-border-subtle`
- `--rh-color-border-strong`
- `--rh-color-border-interactive`

* docs(card): patterns with themable properties

* style(card): template

* docs(card): use themable properties

* fix(context): more themable props

* style: sort props

* feat: add --rh-color-theme-inverse

* chore: dev server layouts

* refactor(accordion): themable tokens

* chore: minor perf improvement for dev server

we still have a major problem of trace performance in
generator.htmlInject to work through

* feat: link colours

* docs: port uxdot-installation-tabs to typescript

* chore: wireit dependencies

* fix: update tokens stuff

* chore: deps

* chore: stylelint rules

* chore: temporarily patch tokens

* fix: port element styles

* fix(lib): port element styles

* docs: port tokens

* chore: update temporary patch

* style: lint css

* refactor(pagination): css

* chore: use tokens prerelease

* chore: use prerelease tokens

* docs: load rhds packages locally

* docs: handle theme tokens

* fix(context): use new tokens repo

* docs: load tokens from node_modules

* chore: tokens deps

* chore: update tokens prerelease

* chore: update prerelease tokens

* chore: update prerelease tokens

* style: config

* chore: update deps

* fix: lint css files

* chore: prerelease tokens

* fix(context-picker): dont swallow event

* fix(surface): make it a consumer

* docs: token theme swatches

* docs: tokens toc, alt-card for themes

* docs: ssr the lightness of token swatches

* docs: fix tokens page

* docs: fancier tags

* style: lint

* docs: demo dsd fix

* docs: icon color themables

* fix(surface): act as a pseudo-consumer

don't swallow the context-request event, but still propate your own
color values

* chore: docs server perf

* docs: icon,border,etc

* perf: remove unused decorator

* docs: tokens tables

* docs: typography tokens

* docs: bodge up token tables

these files are due for a serious refactor, but like... another day

* docs: themable tokens changeset

* docs: update theming prose

* test(surface): typescript nudges

* test(surface): fix tests

* test: console logs

* docs: tokens demo

* docs: fix tokens

* docs: nicer ids

* docs: refactor tokens table code

* fix(table): theme tokens

* docs: refactor token collection

* docs: refactor patterns, move links and scripts to head

* fix(subnav): use theme tokens

* fix(tile): use theme tokens

* docs: header, tile patterns

* fix(card): host display block

* docs: tile patterns and theming

* fix(card): surface tokens

* fix(tile): surface tokens

* fix(subnav): force color palette per guidelines

* fix(tile): use theme tokens

* feat(context-picker): pass an element ref

* docs(tile): theming patterns

* style: lint

* test: more sleep

* style: lint

* test: fix audio player tests

* docs: element pattern in color palette docs

* fix(cta): primary color

* fix(tabs): color context

* fix(context-demo): import specifier

* fix(tile): override surface colors

* docs: copy styles over

* docs: theming prose

* chore: simplify dev server config

* docs: footnotes

* docs: lint styles

* style: lint element css

* style: lint css comments

* docs: lint css

* fix(cta): context css

* chore: workaround in dev server for jspm limitation

* style: lint

* docs: tile lightdom

* docs: pullquote margins

* docs: bodge for audio-player layouts

see also #1264

* docs: fix import map?

* docs: remove url filter

* docs: theme collage

* docs: theming patterns

* docs: theming bordeaux example

* fix(card): color palettes and layouts

* docs(card): color palettes

* docs: more theming prose

* docs: more theming

* docs: bordeaux

* fix(code-block): styles

* fix(context-demo): context

* fix(blockquote): theme tokens

---------

Co-authored-by: Mark Caron <[email protected]>

* perf(audio-player): easier to ssr

* feat(code-block): client-side highlighting (#1837)

* feat(code-block): wip client-side highlighting

* style: type linting

* chore: appease typescript for the sake of prism

see microsoft/TypeScript#20595

* docs: prism in 11ty

* fix(code-block): prism css module

* docs: eleventy prism import map

* docs: more import map shenanigans

* fix(code-block): highlighted line numbers

* docs: changeset

* docs(code-block): documentation for new attrs

* fix(code-block): disclosure aria

* fix(code-block): comment colors

* fix(code-block): tabindex

* fix: update elements/rh-code-block/rh-code-block.ts

* style: lint

* chore: lit css nesting (#1845)

chore: lit-css ts transform

allow css nesting syntax in shadow css. it will be unrolled with postcss

* fix: theming for elements (#1853)

* docs: picker targets

* fix(surface): set but don't inherit surface colors

* docs(card): bar pattern

* fix(accordion): style guidelines

* fix(alert): theme tokens

* fix(badge): context, styles

doesn't implement status tokens, yet

* fix(button): disabled on dark

does not add semantic tokens

* fix(blockquote): border style

* fix(health-index): border colors

* fix(tabs): context in panel

* docs(tabs): links in demo

* fix(icon): container size

* fix(badge): tests and backgrounds

* docs(card): links

* docs(theming): backgrounds

* docs(theming): stub for developer

* docs: deps

* docs: more prose

* feat(tag): context, compact, href, desaturated

Closes #1843

* docs: tag

* fix(tag): spacing

* fix(tag): spacing

* docs(tag): live samples

* test(tag): tests pass

* fix(blockquote): on

* docs(tag): slotted icon

* fix(blockquote): on

* fix(accordion): drop shadow

also refactors expand/collapse code

* fix(alert): use rh-icon

* fix(tabs): always on

* fix(tile): font-weight

* docs: copy demo assets

* docs: demo assets

* fix(alert): missing id

* docs(accordion): disclosure link trailing slash

* perf: use node-native glob

* perf: replace cheerio with parse5

* feat(button): icon set (#1859)

* fix(button): use rh-icon

* fix(button): narrow type of icon and set

* fix(footer): document accepted icons in social links

* chore: max out netlify's card

* perf(button): lazy-load icon

* fix(button): icon layouts

* fix(button): fancy icon layouts, etc

* docs(button): icon usage

* perf(button): shadow classes

* feat(tile): link styles (#1860)

* feat(tile): private link

Closes #1470

* fix(tile): private icon

* feat(tile): link="external"

* docs: icon sets (#1844)

* docs: stubbed icons page

* docs: icons prose

* chore: tslib

* docs: max out the card

* docs: icon page layout

* docs: tokens on color page (#1866)

* docs: tokens on color page

Closes #1757

* docs(color): swatch styles

* docs(color): swatch styles

* docs(tokens): duplicate IDs

Closes #1742

* chore: align style use between docs and demo (#1862)

* chore: align style use between docs and demo/dev-server use cases

* chore: add tokens layer to layer cascade

* chore: organize demo/dev-server styles

* chore: correct stylesheet name

* chore: call individiual layers instead of styles.css as a whole

* chore: remove demo layer forgot to remove last commit

* fix: ignore tokens loaded from node_modules in litcssOptions

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* docs: remove prism css from dev-server.css (#1868)

docs: remove prism css from dev-server

* fix(audio-player) corrected focused on menu button after escape pressed (#1869)

* fix(audio-player): return focus to menu button when escape is pressed on menu

* chore(audio-player): add changeset

* chore(audio-player): changeset typo

* fix(audio-player): theming, icon, playback rate (#1854)

* fix(audio-player): theme tokens

* fix(audio-player): make menu buttons inert when closed

Fixes #1764

* refactor(audio-player): shadow classes and nesting

* docs(audio-player): customization demo styles

* feat(audio-player): mini player rate stepper

* fix(audio-player): use rh-icon

* docs: changesets

* fix: play button icon color

* fix: audio player tokens

* fix: keyboard access to steppers in menu

* fix: remove errant log

* test(audio-player): update tests

* fix(audio-player): restore custom icons

Closes #1871

* fix(switch): reversed

removes anonymous slot (no longer used now that we have message slots)

* fix(switch): remove unused label prop

* fix(switch): refactor css, document props

* fix(button): apply color context

* fix(site-status): apply color context

* fix(switch): checked styles on dark

* docs(card): demo whitespace

* style: lint css

* test(switch): use rh-icon

* docs(alert): toast method

* fix(cta): restore color and spacing (#1879)

* docs: icon design update (#1880)

* docs: icon design update

* docs: move icons to foundations

* docs(icon): feedback footer

* docs(icon): list styles

* docs(icon): fix a whoopsie

* docs(icon): layouts

* docs: copy assets

* docs(icons): fix permalink

* docs(icon): copy

* docs: icons feedback

* docs: change title of page and update section heading case

* docs: iconography order

* docs: align buttons

---------

Co-authored-by: marionnegp <[email protected]>

* docs(audio-player): more demos

* style(card): minor refactors

* docs(context): jsdoc

* fix(context): claim events

* docs(audio-player): context demo

* fix(context-picker): weird layout science

* docs(pattern): always use an allowed pattern

* docs: simplify installation tabs (#1690)

* docs: simplify installation tabs

* docs: fix import map on installation page

* docs: jspm import maps

* docs: no pfe version

* docs: install tabs

* chore: patch prism-esm see if that lets build complete

see KonnorRogers/prism-esm#3

* docs: fail more gracefully when JSPM can't cope

* chore: lint nonsense

* docs: link to install info

* docs: installation tabs styles

* feat(table): adding automatic data-labels on col-scoped tables (#1804)

* feat: adding automatic data-labels on col-scoped tables

* Update elements/rh-table/rh-table.ts

Co-authored-by: Adam Johnson <[email protected]>

* style(rh-table): linting error on extra curly brace

* Update elements/rh-table/rh-table.ts

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* Update elements/rh-table/rh-table.ts

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* feat(table): responsive attr, plus some style linting

* docs(table): updating prop definition

* refactor: prefer optional chaining to ternary

* refactor(table): use hammer operator and dataset to reduce footprint

* docs(table): adding responsive table instructions

* feat(table): making responsive layout default. Adjusting docs to reflect this.

* chore(table): adding changeset

* docs: update .changeset/khaki-rings-confess.md

* fix(table): mo

---------

Co-authored-by: Adam Johnson <[email protected]>
Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
Co-authored-by: Benny Powers <[email protected]>

* fix(table): add container query support (#1881)

* fix(table): container query, css nesting, logical properties

* chore(table): add changeset

* chore(table): lint

* docs(table): revise prose around container sizes

* docs: add edit this page link (#1882)

* docs: add edit this page link

* docs: add edit this page to pattern template

* docs: edit this page trim leading dot

* fix(back-to-top): reconfigure pointer events to be on the trigger not host

* docs: disambiguate variable names in TOC template

* docs(card): update Style subpage (#1664)

* docs(card): update Color section

* docs: add margin between rh-card in a figure and the caption

* docs(card): update copy for Theme sections and update Theme images

* docs(card): update dark theme card image

* docs(card): fix incorrect black color in dark theme image

* docs(card): fix thumbnail bg color in light theme card image

* docs(card): add color-palette attribute to parent element for card examples

* docs(card): change one dark color palette to use dark alt surface color

* Revert "docs(card): change one dark color palette to use dark alt surface color"

This reverts commit 0e3654c.

* docs(card): Fix copy under white card example

* docs(card): move styles to card page

* docs(card): remove url filters

---------

Co-authored-by: Benny Powers <[email protected]>

* feat(table): adding fail-safe for complex tables and updating docs (#1891)

feat(table): adding fail-safe for complex tables and updating docs to reflect

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* fix(card): slotted link colours

this doesn't cover *every* scenario, but it's a nice safety net

Fixes #1717

* docs: changeset

* docs: purple planned tags

Closes #1736

* fix(site-status): use rh-icon (#1889)

Closes #1615

* style: lint table

* docs: include attribute name in table on elements code pages (#1893)

Co-authored-by: Steven Spriggs <[email protected]>

* fix(accordion): regression for initially-expanded headers

* docs: axe xd (#1890)

* docs: axe xd

Closes #1883

* docs: spacing

* Revert "docs: spacing"

This reverts commit d13ce5e.

* docs: spacing tables

* style: lint

* style: lint

* docs: correct jsdoc syntax

Fixes #1548

* fix(alert): hide empty header (#1895)

Fixes #1530

* docs: background picker in dev server (#1887)

* docs: move demo template into file

it's not used elsewhere

* fix(context-picker): restoring state, types

* chore: update deps, types

* docs: dev server context picker, styles

* chore: ts lib

* chore: config niceties

* chore: tsconfig

---------

Co-authored-by: Steven Spriggs <[email protected]>

* chore: update prism-esm dep

* chore: update icons

* chore: remove prism-esm patch, fixed with version update

* docs: fix duplicate `summary` IDREF  (#1898)

docs: fix duplicate `summary` IDREF's for "On this page" nav

* docs: fix 11ty demo styles

* docs: lightdomcss install shortcode (#1902)

* docs: adding lightdom CSS installation render shortcode

* docs: adding missing path-to

* docs: adding SLA to the lightdom css shim

* docs: lightdom css shim typo

* docs: reorder SLA alert

* chore: struggle with web-dev-server import map generator

* docs: adding screen reader testing page (#1798)

* Initial general content

* Updated screen reader section with new link

* Updated page title

* Updated meta data and links

* Added computer and macOS sections

* Added NVDA section

* Added JAWS section

* Added Narrator section

* Added Orca section

* Added mobile sr section

* Added VoiceOver section

* Added TalkBack section

* Updated link on assistive tech page

* Trimmed modifier key text

* Got rid of a rogue parenthesis

* Changed page title and minor text  updates

* VoiceOver section cleanup

* Text updates and reworked heading structure

* Text and punctuation cleanup

* Minor text fixes

* Broke a ton of paragraphs into ULs and OLs

* Changed errant ULs to OLs.

* And switching some OLs back to ULs

* Detypoing typos

* VoiceOver text cleanup

* Text updates in browser pairing section

* Typo and grammar fixes

* Typo fix

* chore: revert merge conflict

---------

Co-authored-by: Benny Powers <[email protected]>

* chore: itty bitty dev server config refactor

* feat(code-block): prism prerendered highlighting (#1906)

* fix(code-block): client-side line numbers

* feat(code-block): server-side prerendered prism

* fix(code-block): badge padding

* fix: change prism-prerendered to prerendered

* docs: fix design code status table

* docs: fix whitespace and markdown rendering in tables (#1915)

* fix(table): improve color contrast of hover state (#1896)

* fix(table): change row hover background colors for light color palettes

* fix: use relative color

* fix: use relative color

* fix(table): move vars to shadow

* fix(table): cross root closest

it's a hack and we should get rid of it

* docs(table): add link in contrast demo

* feat(table): change gray hover color for light theme tables

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
Co-authored-by: Benny Powers <[email protected]>

* fix(tabs): interaction states, css refactor/nesting (#1904)

* fix(tabs): fix interaction states, css nesting and cleanup

* chore(tabs): add changetset

* fix(tabs): add non box vertical hover styles

* test(tabs): update selectors that were changed

* fix(tabs): clean up styles at overflow and breakpoints with vertical

* docs(tabs): add icons size to tabs icon style to text and icons demo

* fix(tabs): correct padding when panel is inset and not vertical

* fix(tabs): correct padding when panel is inset and not vertical (again)

* style(tab): refactor shadow ids

* docs: remove changeset

since the bug was introduced on clefairy branch, we don't need a
changeset for the fix

* chore(tabs): add changeset (container queries)

* docs: update large-geese-suffer.md

* fix(tabs): move padding to panel host

* fix(tabs): fix margin when overflowed and inset

* fix(tabs): inset padding shoudl only shift on overflow

* fix(tabs): correct box/inset inactive tab background color on dark

* fix(tabs): correct inline padding for tab buttons in vertical orientation

* fix(tabs): correct disabled overflow icon color value

* style: lint css

* chore: update deps

---------

Co-authored-by: Benny Powers <[email protected]>
Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* fix(subnav): ssr compat

Closes #1668

* docs: remove unused file

* docs: remove unused shortcode

* docs: refactor elements.njk

* docs: fix getElementDescription filter (#1920)

* fix(tabs): add display contents to panel container (#1918)

* fix(tabs): add display contents to container, remove ctx

* chore(tabs): add changeset

* docs: `uxdot-repo-status-list` missing border (#1922)

docs: repos-status-list border fix

* docs: fix header element causing horizontal scroll bars (#1924)

* docs: fix header element causing horizontal scroll bars

* docs: uxdot-header remove h1 margin

* docs: remove url filters (#1925)

* docs: remove url filters

* docs: catch url in lightdom files links regex didnt catch

* docs: update tags docs  (#1930)

* docs: update tags docs

* docs: ninjar some css fixes in, duplicate styles, incorrect placement

* docs: ssr compatible 11ty demos

* docs(tag): review notes

---------

Co-authored-by: Benny Powers <[email protected]>

* docs: elaborate on developer theming (#1897)

* docs: take 1 at elaborating on dev themeing

* docs: update developers, fix typos

* docs: revisions, formatting

* docs(theming): develoeprs

* docs(theming): wrastle with 11ty templating

* docs(theming): stubs for other sections

* docs: add example of themeable container, expand on color-palette attribute

* style: lint examples

* docs(theming): prerendered code blocks, tabs

* docs: elaborate more on theming

* docs: swap patterns and theming sidenav items

* docs: themeable, theming

* docs(theming): elaborate yet more

* docs(release-notes): md tables

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
Co-authored-by: Benny Powers <[email protected]>

* fix(tile): remove `display: block` on image slot (#1928)

* fix(tile): remove display rule on image slotted element

* chore(tile): add changeset

* docs: expand on a11y features of devtools, add CI/CD intro (#1903)

* docs: expand on a11y features of devtools

* docs: add intro to Chai A11y aXe and `a11ySnapshot`

* docs: update `a11ySnapshot` example to include Chai a11y helpers

* docs: use branded annotation numbers for accessibility pane image

* docs: add max width to a11y devtools screenshots

* docs: restructure / add pages to a11y docs

* docs: improve layout of images and blockquotes in a11y docs

* docs: add lighthouse image to a11y tools page

* docs: sidenav capitalization for abbrs

* docs(accessibility): code blocks

---------

Co-authored-by: Benny Powers <[email protected]>

* docs: rhcodeblock fenced gfm block

* docs: code-block ssr

* docs(color): change minimum column width of color token swatches (#1901)

* docs(color): change minimum column width of color token swatches

* fix: improve how columns resize at different container widths

* docs(color): update status color table (#1929)

* docs(color): update info in status tokens table to match tokens

* docs(color): add note about deprecated status name

* docs(color): remove "error" as a status name

* docs: color table

* chore: patch core for ssr

see patternfly/patternfly-elements#2859

---------

Co-authored-by: Benny Powers <[email protected]>
Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* docs: update "About the design system" page (#1914)

* docs(about): update content on "About the design system" page

* docs(about): delete "How we build" page

* docs: update about page

* docs: whitespace

* docs: icon size

* docs: card contents

* docs: whitespace, ref links

---------

Co-authored-by: Benny Powers <[email protected]>

* docs: fix all patterns page

* docs: patterns page data

exclude index, use correct title

* feat(alert): dpo tokens (#1905)

* feat(alert): dpo tokens

* fix: handle deprecated statuses

* fix: recombobulate status names

* docs: update jsdoc

* docs: ssr compatible 11ty demos

* fix(alert): ssr compat

* fix(alert): neutral grays

* fix(alert): crayons for headings

* fix(alert): typo in css

* docs: theming dev header style fix (#1936)

docs: scope rh-surface band example css, reduce card text

* docs: a11y dev

* fix(badge): dpo tokens (#1912)

* fix(badge): dpo tokens

* test(badge): update test cases for DPO tokens

* chore: update deps

* test(badge): update specs for DPO tokens

* fix(badge) status states for docs and changeset update

* docs(badge): align variant names on the Guidelines page and update `state` attributes on Overview page

* docs(badge): update changeset + improve formatting

* fix(badge): update deprecated aliases per guidance

* docs(badge): make `deprecated` visible for legacy `critical` state

* docs(badge): update images that had old badge colors

* feat(badge): add back the minimum width

* fix(badge): corrected states in caution badge demo

* fix(badge): corrected states in color-context demo

---------

Co-authored-by: Mark Caron <[email protected]>
Co-authored-by: marionnegp <[email protected]>
Co-authored-by: Adam Johnson <[email protected]>
Co-authored-by: Adam Johnson <[email protected]>

* Updated Theming Overview page and images (#1938)

* docs(theming): updating overview page and adding graphics

* doc(theming): removing overview h2

* docs: developer theming wording, grammar, typo fixes (#1937)

* docs: developer theming wording, grammar, typo fixes

* docs: make list in dev theme docs

* docs: reword dev theming docs about consumer and provider

* docs: punctuation and grammar for theming docs

* docs: dev theming grammar and colon

* docs: dev theming add colon

* docs: dev theming spell themeable correctly

* docs: dev theming add comma

* docs: dev theming SVG to SVGs

* docs: dev theming tense changes

* docs: dev theming parentheticals and grammar

* docs: dev theming pluralize proper noun

* docs: dev theming clarify sentence

* docs: moar dev theming grammar and wording

* docs: write out `underscore` in dev theming docs

---------

Co-authored-by: Steven Spriggs <[email protected]>

* docs: fix styles on pattern,element pages

* docs(alert): revert #1857

* docs: revert some backpage.css changes

These to be reviewed and reimplemented after release

* chore: update tokens package

* style(tile): refactor css, remove --_text-color

* docs(surface): specify that surface interjects context

* docs: fix uxdotPattern shortcode

* docs(theming): fix up examples

* docs(tile): fix pattern docs

* docs(logo-wall): fix art direction

* docs: Clefairy release notes (#1942)

* docs(release-notes): adding 2.1.0 release notes

* docs(release-notes): taking advantage of the compact tag in the tables

* docs(release-notes): fixing typos and adding periods

* docs(release-notes): rewording container query descriptions

* docs: adjust changesets to align language around container query support (#1944)

* fix(card): computed context (#1943)

* fix(card): compute context

* fix(card): refactor computedContext to a getter

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
Co-authored-by: Benny Powers <[email protected]>
Co-authored-by: Steven Spriggs <[email protected]>
Co-authored-by: Mark Caron <[email protected]>
Co-authored-by: marionnegp <[email protected]>
Co-authored-by: Marionne Patel <[email protected]>
Co-authored-by: Greg Gibson <[email protected]>
Co-authored-by: Mark Caron <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to documentation
Projects
Status: Done ☑️
Status: Done ☑️
Development

Successfully merging this pull request may close these issues.

[docs] new screen reader a11y page
4 participants