docs(Modal): add example preserving a11y when content overflows #7293

wise-king-sullyman · 2022-04-22T19:19:08Z

What: Closes #7079

Additional issues:

Convenience link to the added example: https://patternfly-react-pr-7293.surge.sh/components/modal/#with-overflowing-content

patternfly-build · 2022-04-22T19:27:24Z

Preview: https://patternfly-react-pr-7293.surge.sh

A11y report: https://patternfly-react-pr-7293-a11y.surge.sh

tlabaj · 2022-04-26T20:44:23Z

packages/react-core/src/components/Modal/examples/Modal.md

+
+### With overflowing content
+
+If the content that you're passing to the modal is likely to overflow the modal content area, pass `tabIndex={0}` to the modal. Failing to do so will cause the modal content to not be scrollable via keyboard. 


@wolfeallison could you please review the copy here.

I think we could be a little more explicit on what "failing to do so" is. Not sure if this is technically correct, but what about "Failing to pass will cause the modal content to not be scrollable via keyboard." Otherwise, looks great!

@wolfeallison what do you think about rewording that whole line to just be:

"If the content that you're passing to the modal is likely to overflow the modal content area, pass tabIndex={0} to the modal to enable keyboard accessible scrolling."

Love it! @wise-king-sullyman

nicolethoen · 2022-04-28T23:51:33Z

packages/react-core/src/components/Modal/examples/ModalWithOverflowingContent.tsx

+        Show modal
+      </Button>
+      <Modal
+        tabIndex={0}


Recently, @seanforyou23 made a comment on some a11y docs about this sort of update and suggested adding an accessible label. This is because the non-negative tabindex will make the container register as a form-control on rotor menus or elements lists and without an explicit label, various browsers or screen readers may label it differently/incorrectly.
Comment: patternfly/patternfly-org#2893 (comment)

That said, I dont think we need to update the example docs - I am adding this suggestion to the a11y docs. But maybe we should add an aria-label or aria-labelledby to elements we are intentionally adding a tabindex to?

Makes sense. I'm on board with adding an aria-label here.

I agree with the suggestion of adding a label, but I wonder if we would need to add a role in that scenario as well? I think technically just having an aria-label on a <div> will throw an Axe error since this approach is not well supported. For example, we actually have this issue right now on our Wizard. I'm not sure which role would make sense in this scenario though. We could do a basic "region" role, but there might be a better sectioning role. It might require a little bit of research to see what the best approach is to add a label.

@jessiehuff from the research I've done so far I think the ideal role might depend on what the modal is for / what the content in the modal is.

For that reason I think the best approach here is probably to add another prop that the consumer can use to apply a more suitable role if applicable, but default to having it as a "region" if an aria-label is applied to ensure that (at the least) Axe errors aren't caused. For a little additional context from my research Carbon sets the role to "region" in their modal if it's scrollable. Thoughts?

Also @nicolethoen the modal currently applies passed aria-labels to the overall modal box rather than letting them go to the modal box body where the content is / the tab index is applied, so another prop will need to be added for consumers to be able to apply labels to the modal box body.

nicolethoen

I think this looks great!

jessiehuff

LGTM! Thanks for your work on this! 😄

tlabaj · 2022-05-05T21:11:17Z

packages/react-core/src/components/Modal/ModalContent.tsx

  ) : (
-    <ModalBoxBody {...props} {...(!description && !ariaDescribedby && { id: descriptorId })}>
+    <ModalBoxBody
+      aria-label={bodyAriaLabel}


Should the aria-label have a default?

I'm not sure. If it should what would you want the default to be?

Hmm this is an interesting question and actually makes me also question the default role. If we're going to default the role then I think we should default an aria-label, but do we always want the content of a model to have a role and an aria-label? When we were talking about it before, I admittedly was just thinking about the overflow example, but I'm not sure if it always makes sense to have both? For example, it seems a little heavy handed if the modal content is a sentence of information, and we have it segmented out with a role and label.

I'm not opposed to adding a default label at all, I just have no idea what a good default would be. I think that any good label here is going to be highly variable based on what the content of the modal is.

Combined with the fact that we currently have the modal itself labeled by the modal heading, and described by the modal body, I'm not sure if having a default would be for the best? I'm not an expert on this topic by any means though and am happy to proceed however you all think is best on it 🙂

I will defer to @jessiehuff here.
Jessie, are you saying that the role should only default to region if there is an overflow? Should this props be tied to that having overflow?

I think I like Austin's approach of defaulting the region when there's an aria-label to prevent a11y issues, but I'm leaning towards not having a default aria-label. The only case that I can see that being helpful is in the case of the overflow so perhaps it's better to just allow users to customize it when they'd like.

it might be beneficial to mention in the prop description when it should be used?

tlabaj · 2022-05-05T21:14:11Z

packages/react-core/src/components/Modal/ModalContent.tsx

-    <ModalBoxBody {...props} {...(!description && !ariaDescribedby && { id: descriptorId })}>
+    <ModalBoxBody
+      aria-label={bodyAriaLabel}
+      role={bodyAriaRole || defaultModalBodyAriaRole}


So if the consumer defines an aria-label but not an aria-role, the role defaults to 'region'?

Correct the role defaults to 'region' if the consumer passes an aria-label to prevent Axe violations.

patternfly-build · 2022-05-09T13:50:27Z

Your changes have been released in:

eslint-plugin-patternfly-react@4.50.4
@patternfly/react-catalog-view-extension@4.62.4
@patternfly/react-charts@6.64.4
@patternfly/react-code-editor@4.52.4
@patternfly/react-console@4.62.4
@patternfly/react-core@4.211.4
@patternfly/react-docs@5.72.4
@patternfly/react-icons@4.62.4
@patternfly/react-inline-edit-extension@4.56.4
demo-app-ts@4.171.4
@patternfly/react-integration@4.173.4
@patternfly/react-log-viewer@4.56.4
@patternfly/react-styles@4.61.4
@patternfly/react-table@4.80.4
@patternfly/react-tokens@4.63.4
@patternfly/react-topology@4.58.4
@patternfly/react-virtualized-extension@4.58.4
transformer-cjs-imports@4.49.4

Thanks for your contribution! 🎉

chore(deps): update dependency theme-patternfly-org to v0.11.31 (patternfly#7265) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.45.5 - @patternfly/react-catalog-view-extension@4.57.5 - @patternfly/react-charts@6.59.5 - @patternfly/react-code-editor@4.47.5 - @patternfly/react-console@4.57.5 - @patternfly/react-core@4.206.5 - @patternfly/react-docs@5.67.5 - @patternfly/react-icons@4.57.5 - @patternfly/react-inline-edit-extension@4.51.5 - demo-app-ts@4.166.5 - @patternfly/react-integration@4.168.5 - @patternfly/react-log-viewer@4.51.5 - @patternfly/react-styles@4.56.5 - @patternfly/react-table@4.75.5 - @patternfly/react-tokens@4.58.5 - @patternfly/react-topology@4.53.5 - @patternfly/react-virtualized-extension@4.53.5 - transformer-cjs-imports@4.44.5 Catalog extension: Add a little bit spacing between title and items (patternfly#7060) * Run sass build and copy commands in row * Add spacing between catalog title and items chore: Add setup to always include jest-dom extended matchers, cleanup (patternfly#7240) * chore: Add setup to always include jest-dom extended matchers, cleanup * rename DropdownToggle 'describe' title, remove unnecessary data-testid's remove unused imports and functions (patternfly#7279) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.45.6 - @patternfly/react-catalog-view-extension@4.57.6 - @patternfly/react-charts@6.59.6 - @patternfly/react-code-editor@4.47.6 - @patternfly/react-console@4.57.6 - @patternfly/react-core@4.206.6 - @patternfly/react-docs@5.67.6 - @patternfly/react-icons@4.57.6 - @patternfly/react-inline-edit-extension@4.51.6 - demo-app-ts@4.166.6 - @patternfly/react-integration@4.168.6 - @patternfly/react-log-viewer@4.51.6 - @patternfly/react-styles@4.56.6 - @patternfly/react-table@4.75.6 - @patternfly/react-tokens@4.58.6 - @patternfly/react-topology@4.53.6 - @patternfly/react-virtualized-extension@4.53.6 - transformer-cjs-imports@4.44.6 chore(DateTimePicker): convert demo to typescript (patternfly#7268) feat(CodeBlock): add class to code component (patternfly#7281) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.46.0 - @patternfly/react-catalog-view-extension@4.58.0 - @patternfly/react-charts@6.60.0 - @patternfly/react-code-editor@4.48.0 - @patternfly/react-console@4.58.0 - @patternfly/react-core@4.207.0 - @patternfly/react-docs@5.68.0 - @patternfly/react-icons@4.58.0 - @patternfly/react-inline-edit-extension@4.52.0 - demo-app-ts@4.167.0 - @patternfly/react-integration@4.169.0 - @patternfly/react-log-viewer@4.52.0 - @patternfly/react-styles@4.57.0 - @patternfly/react-table@4.76.0 - @patternfly/react-tokens@4.59.0 - @patternfly/react-topology@4.54.0 - @patternfly/react-virtualized-extension@4.54.0 - transformer-cjs-imports@4.45.0 chore(deps): update dependency @patternfly/patternfly to v4.192.2 (patternfly#7324) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(deps): update dependency theme-patternfly-org to v0.11.32 (patternfly#7306) Co-authored-by: Renovate Bot <bot@renovateapp.com> Fix error when a group has no visible children (patternfly#7304) Also small fix for flickering cursor on edge drag. chore(deps): update dependency theme-patternfly-org to v0.11.33 (patternfly#7326) Co-authored-by: Renovate Bot <bot@renovateapp.com> update paths chore(deps): update dependency @patternfly/patternfly to v4.192.4 (patternfly#7327) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(deps): update dependency theme-patternfly-org to v0.11.34 (patternfly#7336) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(Page): update centered example to match Core (patternfly#7269) feat(divider): add support for switching orientation at various breakpoints (patternfly#7285) * add support for switching orientation at various breakpoints * deprecate isVertical, update demos and prop descriptions * PR feedback from mcoker * PR feedback from mcoker chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.0 - @patternfly/react-catalog-view-extension@4.59.0 - @patternfly/react-charts@6.61.0 - @patternfly/react-code-editor@4.49.0 - @patternfly/react-console@4.59.0 - @patternfly/react-core@4.208.0 - @patternfly/react-docs@5.69.0 - @patternfly/react-icons@4.59.0 - @patternfly/react-inline-edit-extension@4.53.0 - demo-app-ts@4.168.0 - @patternfly/react-integration@4.170.0 - @patternfly/react-log-viewer@4.53.0 - @patternfly/react-styles@4.58.0 - @patternfly/react-table@4.77.0 - @patternfly/react-tokens@4.60.0 - @patternfly/react-topology@4.55.0 - @patternfly/react-virtualized-extension@4.55.0 - transformer-cjs-imports@4.46.0 Topology dark theme (patternfly#7294) * feature(topology): style dark theme * feature(topology): node and label colors all states * feature(topology): groups * feature(topology): rebase * feature(topology): before scrubthrough * feature(topology): replace empty selector * feature(topology): remove extra stroke-width * Add labelIcon setting to topology demo * feature(topology): fix node label icon color * feature(topology): fix selected state labels Co-authored-by: Jeffrey Phillips <jephilli@redhat.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.1 - @patternfly/react-catalog-view-extension@4.59.1 - @patternfly/react-charts@6.61.1 - @patternfly/react-code-editor@4.49.1 - @patternfly/react-console@4.59.1 - @patternfly/react-core@4.208.1 - @patternfly/react-docs@5.69.1 - @patternfly/react-icons@4.59.1 - @patternfly/react-inline-edit-extension@4.53.1 - demo-app-ts@4.168.1 - @patternfly/react-integration@4.170.1 - @patternfly/react-log-viewer@4.53.1 - @patternfly/react-styles@4.58.1 - @patternfly/react-table@4.77.1 - @patternfly/react-tokens@4.60.1 - @patternfly/react-topology@4.55.1 - @patternfly/react-virtualized-extension@4.55.1 - transformer-cjs-imports@4.46.1 chore(DragAndDrop): convert examples to TS (patternfly#7244) * convert DnD to TS * make param required * PR feedback from Titani * remove extra space chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.2 - @patternfly/react-catalog-view-extension@4.59.2 - @patternfly/react-charts@6.61.2 - @patternfly/react-code-editor@4.49.2 - @patternfly/react-console@4.59.2 - @patternfly/react-core@4.208.2 - @patternfly/react-docs@5.69.2 - @patternfly/react-icons@4.59.2 - @patternfly/react-inline-edit-extension@4.53.2 - demo-app-ts@4.168.2 - @patternfly/react-integration@4.170.2 - @patternfly/react-log-viewer@4.53.2 - @patternfly/react-styles@4.58.2 - @patternfly/react-table@4.77.2 - @patternfly/react-tokens@4.60.2 - @patternfly/react-topology@4.55.2 - @patternfly/react-virtualized-extension@4.55.2 - transformer-cjs-imports@4.46.2 docs(Wizard): Added WizardStep interface to documentation (patternfly#7299) Co-authored-by: Titani <tlabaj@redaht.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.3 - @patternfly/react-catalog-view-extension@4.59.3 - @patternfly/react-charts@6.61.3 - @patternfly/react-code-editor@4.49.3 - @patternfly/react-console@4.59.3 - @patternfly/react-core@4.208.3 - @patternfly/react-docs@5.69.3 - @patternfly/react-icons@4.59.3 - @patternfly/react-inline-edit-extension@4.53.3 - demo-app-ts@4.168.3 - @patternfly/react-integration@4.170.3 - @patternfly/react-log-viewer@4.53.3 - @patternfly/react-styles@4.58.3 - @patternfly/react-table@4.77.3 - @patternfly/react-tokens@4.60.3 - @patternfly/react-topology@4.55.3 - @patternfly/react-virtualized-extension@4.55.3 - transformer-cjs-imports@4.46.3 chore(docs):cleanup dead link (patternfly#7270) * chore(docs):cleanup dead link * hardcode path Co-authored-by: Titani <tlabaj@redaht.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.4 - @patternfly/react-catalog-view-extension@4.59.4 - @patternfly/react-charts@6.61.4 - @patternfly/react-code-editor@4.49.4 - @patternfly/react-console@4.59.4 - @patternfly/react-core@4.208.4 - @patternfly/react-docs@5.69.4 - @patternfly/react-icons@4.59.4 - @patternfly/react-inline-edit-extension@4.53.4 - demo-app-ts@4.168.4 - @patternfly/react-integration@4.170.4 - @patternfly/react-log-viewer@4.53.4 - @patternfly/react-styles@4.58.4 - @patternfly/react-table@4.77.4 - @patternfly/react-tokens@4.60.4 - @patternfly/react-topology@4.55.4 - @patternfly/react-virtualized-extension@4.55.4 - transformer-cjs-imports@4.46.4 fix(Tabs): update key to not use index (patternfly#7276) chore(ClipboardCopy): update types used for tooltip positioning (patternfly#7295) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.5 - @patternfly/react-catalog-view-extension@4.59.5 - @patternfly/react-charts@6.61.5 - @patternfly/react-code-editor@4.49.5 - @patternfly/react-console@4.59.5 - @patternfly/react-core@4.208.5 - @patternfly/react-docs@5.69.5 - @patternfly/react-icons@4.59.5 - @patternfly/react-inline-edit-extension@4.53.5 - demo-app-ts@4.168.5 - @patternfly/react-integration@4.170.5 - @patternfly/react-log-viewer@4.53.5 - @patternfly/react-styles@4.58.5 - @patternfly/react-table@4.77.5 - @patternfly/react-tokens@4.60.5 - @patternfly/react-topology@4.55.5 - @patternfly/react-virtualized-extension@4.55.5 - transformer-cjs-imports@4.46.5 Feat(Table): Adds full screen demo for basic/bulk select (patternfly#7264) * full screen demo for bulk-select example * format chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.6 - @patternfly/react-catalog-view-extension@4.59.6 - @patternfly/react-charts@6.61.6 - @patternfly/react-code-editor@4.49.6 - @patternfly/react-console@4.59.6 - @patternfly/react-core@4.208.6 - @patternfly/react-docs@5.69.6 - @patternfly/react-icons@4.59.6 - @patternfly/react-inline-edit-extension@4.53.6 - demo-app-ts@4.168.6 - @patternfly/react-integration@4.170.6 - @patternfly/react-log-viewer@4.53.6 - @patternfly/react-styles@4.58.6 - @patternfly/react-table@4.77.6 - @patternfly/react-tokens@4.60.6 - @patternfly/react-topology@4.55.6 - @patternfly/react-virtualized-extension@4.55.6 - transformer-cjs-imports@4.46.6 Add ColaGroupsLayout (patternfly#7308) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.7 - @patternfly/react-catalog-view-extension@4.59.7 - @patternfly/react-charts@6.61.7 - @patternfly/react-code-editor@4.49.7 - @patternfly/react-console@4.59.7 - @patternfly/react-core@4.208.7 - @patternfly/react-docs@5.69.7 - @patternfly/react-icons@4.59.7 - @patternfly/react-inline-edit-extension@4.53.7 - demo-app-ts@4.168.7 - @patternfly/react-integration@4.170.7 - @patternfly/react-log-viewer@4.53.7 - @patternfly/react-styles@4.58.7 - @patternfly/react-table@4.77.7 - @patternfly/react-tokens@4.60.7 - @patternfly/react-topology@4.55.7 - @patternfly/react-virtualized-extension@4.55.7 - transformer-cjs-imports@4.46.7 chore(deps): update dependency @patternfly/patternfly to v4.192.6 (patternfly#7352) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.8 - @patternfly/react-catalog-view-extension@4.59.8 - @patternfly/react-charts@6.61.8 - @patternfly/react-code-editor@4.49.8 - @patternfly/react-console@4.59.8 - @patternfly/react-core@4.208.8 - @patternfly/react-docs@5.69.8 - @patternfly/react-icons@4.59.8 - @patternfly/react-inline-edit-extension@4.53.8 - demo-app-ts@4.168.8 - @patternfly/react-integration@4.170.8 - @patternfly/react-log-viewer@4.53.8 - @patternfly/react-styles@4.58.8 - @patternfly/react-table@4.77.8 - @patternfly/react-tokens@4.60.8 - @patternfly/react-topology@4.55.8 - @patternfly/react-virtualized-extension@4.55.8 - transformer-cjs-imports@4.46.8 Add correct types for class components using context API (patternfly#7282) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.9 - @patternfly/react-catalog-view-extension@4.59.9 - @patternfly/react-charts@6.61.9 - @patternfly/react-code-editor@4.49.9 - @patternfly/react-console@4.59.9 - @patternfly/react-core@4.208.9 - @patternfly/react-docs@5.69.9 - @patternfly/react-icons@4.59.9 - @patternfly/react-inline-edit-extension@4.53.9 - demo-app-ts@4.168.9 - @patternfly/react-integration@4.170.9 - @patternfly/react-log-viewer@4.53.9 - @patternfly/react-styles@4.58.9 - @patternfly/react-table@4.77.9 - @patternfly/react-tokens@4.60.9 - @patternfly/react-topology@4.55.9 - @patternfly/react-virtualized-extension@4.55.9 - transformer-cjs-imports@4.46.9 fix(charts): Add style for tooltip cursor (patternfly#7361) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.10 - @patternfly/react-catalog-view-extension@4.59.10 - @patternfly/react-charts@6.61.10 - @patternfly/react-code-editor@4.49.10 - @patternfly/react-console@4.59.10 - @patternfly/react-core@4.208.10 - @patternfly/react-docs@5.69.10 - @patternfly/react-icons@4.59.10 - @patternfly/react-inline-edit-extension@4.53.10 - demo-app-ts@4.168.10 - @patternfly/react-integration@4.170.10 - @patternfly/react-log-viewer@4.53.10 - @patternfly/react-styles@4.58.10 - @patternfly/react-table@4.77.10 - @patternfly/react-tokens@4.60.10 - @patternfly/react-topology@4.55.10 - @patternfly/react-virtualized-extension@4.55.10 - transformer-cjs-imports@4.46.10 chore(AlertGroup): convert examples to TypeScript/functional components (patternfly#7273) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.11 - @patternfly/react-catalog-view-extension@4.59.11 - @patternfly/react-charts@6.61.11 - @patternfly/react-code-editor@4.49.11 - @patternfly/react-console@4.59.11 - @patternfly/react-core@4.208.11 - @patternfly/react-docs@5.69.11 - @patternfly/react-icons@4.59.11 - @patternfly/react-inline-edit-extension@4.53.11 - demo-app-ts@4.168.11 - @patternfly/react-integration@4.170.11 - @patternfly/react-log-viewer@4.53.11 - @patternfly/react-styles@4.58.11 - @patternfly/react-table@4.77.11 - @patternfly/react-tokens@4.60.11 - @patternfly/react-topology@4.55.11 - @patternfly/react-virtualized-extension@4.55.11 - transformer-cjs-imports@4.46.11 chore(deps): update dependency @patternfly/patternfly to v4.193.0 (patternfly#7362) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.12 - @patternfly/react-catalog-view-extension@4.59.12 - @patternfly/react-charts@6.61.12 - @patternfly/react-code-editor@4.49.12 - @patternfly/react-console@4.59.12 - @patternfly/react-core@4.208.12 - @patternfly/react-docs@5.69.12 - @patternfly/react-icons@4.59.12 - @patternfly/react-inline-edit-extension@4.53.12 - demo-app-ts@4.168.12 - @patternfly/react-integration@4.170.12 - @patternfly/react-log-viewer@4.53.12 - @patternfly/react-styles@4.58.12 - @patternfly/react-table@4.77.12 - @patternfly/react-tokens@4.60.12 - @patternfly/react-topology@4.55.12 - @patternfly/react-virtualized-extension@4.55.12 - transformer-cjs-imports@4.46.12 feat(tabs): add secondary border-bottom variation, update demos (patternfly#7311) * feat(tabs): add secondary border-bottom variation, update demos * improve prop description Co-authored-by: Jenny <32821331+jenny-s51@users.noreply.github.com> * sentence case test aria labels Co-authored-by: Jenny <32821331+jenny-s51@users.noreply.github.com> fix(Wixard): Fixed id not being applied to wizard step (patternfly#7349) * fix(Wixard): Fixed id not being applied to wizard step * add id to tests Co-authored-by: Titani <tlabaj@redaht.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.13 - @patternfly/react-catalog-view-extension@4.59.13 - @patternfly/react-charts@6.61.13 - @patternfly/react-code-editor@4.49.13 - @patternfly/react-console@4.59.13 - @patternfly/react-core@4.208.13 - @patternfly/react-docs@5.69.13 - @patternfly/react-icons@4.59.13 - @patternfly/react-inline-edit-extension@4.53.13 - demo-app-ts@4.168.13 - @patternfly/react-integration@4.170.13 - @patternfly/react-log-viewer@4.53.13 - @patternfly/react-styles@4.58.13 - @patternfly/react-table@4.77.13 - @patternfly/react-tokens@4.60.13 - @patternfly/react-topology@4.55.13 - @patternfly/react-virtualized-extension@4.55.13 - transformer-cjs-imports@4.46.13 Add missing 'children' prop in several places (patternfly#7363) fix(ClipboardCopy): dynamic tooltip updates get announced (patternfly#7335) feat(drawer): convert examples to TS (patternfly#7329) * wip drawer demos * convert drawer examples to TS * PR feedback from Eric chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.48.0 - @patternfly/react-catalog-view-extension@4.60.0 - @patternfly/react-charts@6.62.0 - @patternfly/react-code-editor@4.50.0 - @patternfly/react-console@4.60.0 - @patternfly/react-core@4.209.0 - @patternfly/react-docs@5.70.0 - @patternfly/react-icons@4.60.0 - @patternfly/react-inline-edit-extension@4.54.0 - demo-app-ts@4.169.0 - @patternfly/react-integration@4.171.0 - @patternfly/react-log-viewer@4.54.0 - @patternfly/react-styles@4.59.0 - @patternfly/react-table@4.78.0 - @patternfly/react-tokens@4.61.0 - @patternfly/react-topology@4.56.0 - @patternfly/react-virtualized-extension@4.56.0 - transformer-cjs-imports@4.47.0 feat(charts): Deprecate themeVariant prop for light / dark themes (patternfly#7372) patternfly#7369 chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.49.0 - @patternfly/react-catalog-view-extension@4.61.0 - @patternfly/react-charts@6.63.0 - @patternfly/react-code-editor@4.51.0 - @patternfly/react-console@4.61.0 - @patternfly/react-core@4.210.0 - @patternfly/react-docs@5.71.0 - @patternfly/react-icons@4.61.0 - @patternfly/react-inline-edit-extension@4.55.0 - demo-app-ts@4.170.0 - @patternfly/react-integration@4.172.0 - @patternfly/react-log-viewer@4.55.0 - @patternfly/react-styles@4.60.0 - @patternfly/react-table@4.79.0 - @patternfly/react-tokens@4.62.0 - @patternfly/react-topology@4.57.0 - @patternfly/react-virtualized-extension@4.57.0 - transformer-cjs-imports@4.48.0 feat(tokens): Variables now include a fallback value for charts (patternfly#7374) patternfly#7373 chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.50.0 - @patternfly/react-catalog-view-extension@4.62.0 - @patternfly/react-charts@6.64.0 - @patternfly/react-code-editor@4.52.0 - @patternfly/react-console@4.62.0 - @patternfly/react-core@4.211.0 - @patternfly/react-docs@5.72.0 - @patternfly/react-icons@4.62.0 - @patternfly/react-inline-edit-extension@4.56.0 - demo-app-ts@4.171.0 - @patternfly/react-integration@4.173.0 - @patternfly/react-log-viewer@4.56.0 - @patternfly/react-styles@4.61.0 - @patternfly/react-table@4.80.0 - @patternfly/react-tokens@4.63.0 - @patternfly/react-topology@4.58.0 - @patternfly/react-virtualized-extension@4.58.0 - transformer-cjs-imports@4.49.0 chore(deps): update dependency @patternfly/patternfly to v4.194.0 (patternfly#7375) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.50.1 - @patternfly/react-catalog-view-extension@4.62.1 - @patternfly/react-charts@6.64.1 - @patternfly/react-code-editor@4.52.1 - @patternfly/react-console@4.62.1 - @patternfly/react-core@4.211.1 - @patternfly/react-docs@5.72.1 - @patternfly/react-icons@4.62.1 - @patternfly/react-inline-edit-extension@4.56.1 - demo-app-ts@4.171.1 - @patternfly/react-integration@4.173.1 - @patternfly/react-log-viewer@4.56.1 - @patternfly/react-styles@4.61.1 - @patternfly/react-table@4.80.1 - @patternfly/react-tokens@4.63.1 - @patternfly/react-topology@4.58.1 - @patternfly/react-virtualized-extension@4.58.1 - transformer-cjs-imports@4.49.1 fix: tree view menu keyboard handling (patternfly#7334) * fix: tree view menu keyboard handling * refactor to panel * add comments to helper functions, remove unused keyboard override from menu fix(Page): add tabindex to components with hasOverflowScroll (patternfly#7274) * fix(PageSection): make content scrollable via keyboard with hasOverflowScroll * Add tabindex to remaining Page components with hasOverflowScroll chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.50.2 - @patternfly/react-catalog-view-extension@4.62.2 - @patternfly/react-charts@6.64.2 - @patternfly/react-code-editor@4.52.2 - @patternfly/react-console@4.62.2 - @patternfly/react-core@4.211.2 - @patternfly/react-docs@5.72.2 - @patternfly/react-icons@4.62.2 - @patternfly/react-inline-edit-extension@4.56.2 - demo-app-ts@4.171.2 - @patternfly/react-integration@4.173.2 - @patternfly/react-log-viewer@4.56.2 - @patternfly/react-styles@4.61.2 - @patternfly/react-table@4.80.2 - @patternfly/react-tokens@4.63.2 - @patternfly/react-topology@4.58.2 - @patternfly/react-virtualized-extension@4.58.2 - transformer-cjs-imports@4.49.2 fix(Tooltip): make ref variant announced by assistive tech (patternfly#7332) * fix(Tooltip): make ref variant announced by assistive tech * Make suggested changes * Add aria-describedby back to example for NVDA and JAWS support fix(LogViewer): clear ANSI cache when resetting the log window (patternfly#7355) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.50.3 - @patternfly/react-catalog-view-extension@4.62.3 - @patternfly/react-charts@6.64.3 - @patternfly/react-code-editor@4.52.3 - @patternfly/react-console@4.62.3 - @patternfly/react-core@4.211.3 - @patternfly/react-docs@5.72.3 - @patternfly/react-icons@4.62.3 - @patternfly/react-inline-edit-extension@4.56.3 - demo-app-ts@4.171.3 - @patternfly/react-integration@4.173.3 - @patternfly/react-log-viewer@4.56.3 - @patternfly/react-styles@4.61.3 - @patternfly/react-table@4.80.3 - @patternfly/react-tokens@4.63.3 - @patternfly/react-topology@4.58.3 - @patternfly/react-virtualized-extension@4.58.3 - transformer-cjs-imports@4.49.3 chore(deps): update dependency @patternfly/patternfly to v4.194.1 (patternfly#7386) Co-authored-by: Renovate Bot <bot@renovateapp.com> docs(Modal): add example preserving a11y when content overflows (patternfly#7293) * docs(Modal): add example preserving a11y when content overflows * update overflow example copy * add additional props to enable better a11y for scrollable content * add tests for new aria props * expand on body aria prop descriptions chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.50.4 - @patternfly/react-catalog-view-extension@4.62.4 - @patternfly/react-charts@6.64.4 - @patternfly/react-code-editor@4.52.4 - @patternfly/react-console@4.62.4 - @patternfly/react-core@4.211.4 - @patternfly/react-docs@5.72.4 - @patternfly/react-icons@4.62.4 - @patternfly/react-inline-edit-extension@4.56.4 - demo-app-ts@4.171.4 - @patternfly/react-integration@4.173.4 - @patternfly/react-log-viewer@4.56.4 - @patternfly/react-styles@4.61.4 - @patternfly/react-table@4.80.4 - @patternfly/react-tokens@4.63.4 - @patternfly/react-topology@4.58.4 - @patternfly/react-virtualized-extension@4.58.4 - transformer-cjs-imports@4.49.4 fix(Popper): update Popper modifiers when child DOM changes (patternfly#7385) * fix(Popper): update Popper modifiers when child DOM changes * update comments * fix build error * udpate comment chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.50.5 - @patternfly/react-catalog-view-extension@4.62.5 - @patternfly/react-charts@6.64.5 - @patternfly/react-code-editor@4.52.5 - @patternfly/react-console@4.62.5 - @patternfly/react-core@4.211.5 - @patternfly/react-docs@5.72.5 - @patternfly/react-icons@4.62.5 - @patternfly/react-inline-edit-extension@4.56.5 - demo-app-ts@4.171.5 - @patternfly/react-integration@4.173.5 - @patternfly/react-log-viewer@4.56.5 - @patternfly/react-styles@4.61.5 - @patternfly/react-table@4.80.5 - @patternfly/react-tokens@4.63.5 - @patternfly/react-topology@4.58.5 - @patternfly/react-virtualized-extension@4.58.5 - transformer-cjs-imports@4.49.5 chore(deps): update dependency theme-patternfly-org to v0.11.38 (patternfly#7381) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.50.6 - @patternfly/react-catalog-view-extension@4.62.6 - @patternfly/react-charts@6.64.6 - @patternfly/react-code-editor@4.52.6 - @patternfly/react-console@4.62.6 - @patternfly/react-core@4.211.6 - @patternfly/react-docs@5.72.6 - @patternfly/react-icons@4.62.6 - @patternfly/react-inline-edit-extension@4.56.6 - demo-app-ts@4.171.6 - @patternfly/react-integration@4.173.6 - @patternfly/react-log-viewer@4.56.6 - @patternfly/react-styles@4.61.6 - @patternfly/react-table@4.80.6 - @patternfly/react-tokens@4.63.6 - @patternfly/react-topology@4.58.6 - @patternfly/react-virtualized-extension@4.58.6 - transformer-cjs-imports@4.49.6 feat(charts): added PF dark theme support (patternfly#7310) * feat(charts): added PF dark theme support * chore(charts): use single theme colorscale vars * chore(charts): update react-tokens to test fallback * chore(charts): merge cleanup * chore(charts): cleanup * chore(charts): revert token name change * chore(charts): remove newlines * chore(charts): snapshots * chore(charts): updated colors to use react tokens var chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.51.0 - @patternfly/react-catalog-view-extension@4.63.0 - @patternfly/react-charts@6.65.0 - @patternfly/react-code-editor@4.53.0 - @patternfly/react-console@4.63.0 - @patternfly/react-core@4.212.0 - @patternfly/react-docs@5.73.0 - @patternfly/react-icons@4.63.0 - @patternfly/react-inline-edit-extension@4.57.0 - demo-app-ts@4.172.0 - @patternfly/react-integration@4.174.0 - @patternfly/react-log-viewer@4.57.0 - @patternfly/react-styles@4.62.0 - @patternfly/react-table@4.81.0 - @patternfly/react-tokens@4.64.0 - @patternfly/react-topology@4.59.0 - @patternfly/react-virtualized-extension@4.59.0 - transformer-cjs-imports@4.50.0 feat(Tabs): allow dynamic close/add (patternfly#7297) * feat(Tabs): allow dynamic close/add * add button names * change to buttons, add disabled for close button, update demo * focus added tabs, update snap * update default aria * update new tab naming * update aria names, fix logic for empty tabs * update test with new prop names * update prop name in desc, prevent single tab close * update aria label, reabase * add update check for children * add beta flags chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.52.0 - @patternfly/react-catalog-view-extension@4.64.0 - @patternfly/react-charts@6.66.0 - @patternfly/react-code-editor@4.54.0 - @patternfly/react-console@4.64.0 - @patternfly/react-core@4.213.0 - @patternfly/react-docs@5.74.0 - @patternfly/react-icons@4.64.0 - @patternfly/react-inline-edit-extension@4.58.0 - demo-app-ts@4.173.0 - @patternfly/react-integration@4.175.0 - @patternfly/react-log-viewer@4.58.0 - @patternfly/react-styles@4.63.0 - @patternfly/react-table@4.82.0 - @patternfly/react-tokens@4.65.0 - @patternfly/react-topology@4.60.0 - @patternfly/react-virtualized-extension@4.60.0 - transformer-cjs-imports@4.51.0 chore(deps): update dependency @patternfly/patternfly to v4.194.2 (patternfly#7394) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.52.1 - @patternfly/react-catalog-view-extension@4.64.1 - @patternfly/react-charts@6.66.1 - @patternfly/react-code-editor@4.54.1 - @patternfly/react-console@4.64.1 - @patternfly/react-core@4.213.1 - @patternfly/react-docs@5.74.1 - @patternfly/react-icons@4.64.1 - @patternfly/react-inline-edit-extension@4.58.1 - demo-app-ts@4.173.1 - @patternfly/react-integration@4.175.1 - @patternfly/react-log-viewer@4.58.1 - @patternfly/react-styles@4.63.1 - @patternfly/react-table@4.82.1 - @patternfly/react-tokens@4.65.1 - @patternfly/react-topology@4.60.1 - @patternfly/react-virtualized-extension@4.60.1 - transformer-cjs-imports@4.51.1 Revert "docs(Dropdown): expose menuAppendTo in Dropdown prop docs (patternfly#7173)" (patternfly#7395) This reverts commit fdbf6f9. chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.52.2 - @patternfly/react-catalog-view-extension@4.64.2 - @patternfly/react-charts@6.66.2 - @patternfly/react-code-editor@4.54.2 - @patternfly/react-console@4.64.2 - @patternfly/react-core@4.213.2 - @patternfly/react-docs@5.74.2 - @patternfly/react-icons@4.64.2 - @patternfly/react-inline-edit-extension@4.58.2 - demo-app-ts@4.173.2 - @patternfly/react-integration@4.175.2 - @patternfly/react-log-viewer@4.58.2 - @patternfly/react-styles@4.63.2 - @patternfly/react-table@4.82.2 - @patternfly/react-tokens@4.65.2 - @patternfly/react-topology@4.60.2 - @patternfly/react-virtualized-extension@4.60.2 - transformer-cjs-imports@4.51.2 fix(Card): indicate card selectivity and status if using a screen reader (patternfly#7144) * fix(Card): indicate card selectivity and status if using a screen reader * rework hidden input implementation to fix a11y structure issues * Add temporary styling on hidden input focus for PR demo purposes * add automatic aria label determination * replace spaces with dashes in component ids * update to only pass an id when that id isn't empty * update snapshots * refactor aria label determination to use the effect hook * fix bug causing unintended warnings to be printed to the console * add aria label to demo galleries * remove temporary demonstration styling * improve hasHiddenInput prop description * rename hiddenInput props * add tests for new a11y functionality * refactor card title registering tests to be pure unit tests * add example to better explain selectable a11y props * improve new example copy chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.52.3 - @patternfly/react-catalog-view-extension@4.64.3 - @patternfly/react-charts@6.66.3 - @patternfly/react-code-editor@4.54.3 - @patternfly/react-console@4.64.3 - @patternfly/react-core@4.213.3 - @patternfly/react-docs@5.74.3 - @patternfly/react-icons@4.64.3 - @patternfly/react-inline-edit-extension@4.58.3 - demo-app-ts@4.173.3 - @patternfly/react-integration@4.175.3 - @patternfly/react-log-viewer@4.58.3 - @patternfly/react-styles@4.63.3 - @patternfly/react-table@4.82.3 - @patternfly/react-tokens@4.65.3 - @patternfly/react-topology@4.60.3 - @patternfly/react-virtualized-extension@4.60.3 - transformer-cjs-imports@4.51.3 fix(topology): fix variables (patternfly#7364) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.52.4 - @patternfly/react-catalog-view-extension@4.64.4 - @patternfly/react-charts@6.66.4 - @patternfly/react-code-editor@4.54.4 - @patternfly/react-console@4.64.4 - @patternfly/react-core@4.213.4 - @patternfly/react-docs@5.74.4 - @patternfly/react-icons@4.64.4 - @patternfly/react-inline-edit-extension@4.58.4 - demo-app-ts@4.173.4 - @patternfly/react-integration@4.175.4 - @patternfly/react-log-viewer@4.58.4 - @patternfly/react-styles@4.63.4 - @patternfly/react-table@4.82.4 - @patternfly/react-tokens@4.65.4 - @patternfly/react-topology@4.60.4 - @patternfly/react-virtualized-extension@4.60.4 - transformer-cjs-imports@4.51.4 fix(charts): support customizing tooltip border for dark theme (patternfly#7393) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.52.5 - @patternfly/react-catalog-view-extension@4.64.5 - @patternfly/react-charts@6.66.5 - @patternfly/react-code-editor@4.54.5 - @patternfly/react-console@4.64.5 - @patternfly/react-core@4.213.5 - @patternfly/react-docs@5.74.5 - @patternfly/react-icons@4.64.5 - @patternfly/react-inline-edit-extension@4.58.5 - demo-app-ts@4.173.5 - @patternfly/react-integration@4.175.5 - @patternfly/react-log-viewer@4.58.5 - @patternfly/react-styles@4.63.5 - @patternfly/react-table@4.82.5 - @patternfly/react-tokens@4.65.5 - @patternfly/react-topology@4.60.5 - @patternfly/react-virtualized-extension@4.60.5 - transformer-cjs-imports@4.51.5 chore(deps): update dependency @patternfly/patternfly to v4.194.4 (patternfly#7404) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.52.6 - @patternfly/react-catalog-view-extension@4.64.6 - @patternfly/react-charts@6.66.6 - @patternfly/react-code-editor@4.54.6 - @patternfly/react-console@4.64.6 - @patternfly/react-core@4.213.6 - @patternfly/react-docs@5.74.6 - @patternfly/react-icons@4.64.6 - @patternfly/react-inline-edit-extension@4.58.6 - demo-app-ts@4.173.6 - @patternfly/react-integration@4.175.6 - @patternfly/react-log-viewer@4.58.6 - @patternfly/react-styles@4.63.6 - @patternfly/react-table@4.82.6 - @patternfly/react-tokens@4.65.6 - @patternfly/react-topology@4.60.6 - @patternfly/react-virtualized-extension@4.60.6 - transformer-cjs-imports@4.51.6 feat(table): expandable table demo (patternfly#7277) * full screen demo for bulk-select example * format * convert to full page demo * rename column * revert bulk selct * revert imports * format * add imports * add isFullscreen flag * remove select all * PR feedback from Matt * remove toolbar chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.53.0 - @patternfly/react-catalog-view-extension@4.65.0 - @patternfly/react-charts@6.67.0 - @patternfly/react-code-editor@4.55.0 - @patternfly/react-console@4.65.0 - @patternfly/react-core@4.214.0 - @patternfly/react-docs@5.75.0 - @patternfly/react-icons@4.65.0 - @patternfly/react-inline-edit-extension@4.59.0 - demo-app-ts@4.174.0 - @patternfly/react-integration@4.176.0 - @patternfly/react-log-viewer@4.59.0 - @patternfly/react-styles@4.64.0 - @patternfly/react-table@4.83.0 - @patternfly/react-tokens@4.66.0 - @patternfly/react-topology@4.61.0 - @patternfly/react-virtualized-extension@4.61.0 - transformer-cjs-imports@4.52.0 Revert BaseLayout startLayout method back to protected. (patternfly#7407) fix(Tabs): make close handler optional (patternfly#7405) expose prop info

docs(Modal): add example preserving a11y when content overflows

3fc4519

tlabaj added the A11y label Apr 26, 2022

tlabaj requested a review from jessiehuff April 26, 2022 20:40

tlabaj reviewed Apr 26, 2022

View reviewed changes

update overflow example copy

68a8fa3

nicolethoen reviewed Apr 28, 2022

View reviewed changes

wise-king-sullyman added 2 commits May 2, 2022 17:29

add additional props to enable better a11y for scrollable content

528e744

add tests for new aria props

d5a60fb

wise-king-sullyman requested review from nicolethoen and tlabaj May 3, 2022 13:15

nicolethoen approved these changes May 4, 2022

View reviewed changes

thatblindgeye approved these changes May 4, 2022

View reviewed changes

thatblindgeye mentioned this pull request May 4, 2022

Page - add aria-label prop to components that may overflow #7350

Closed

kmcfaul approved these changes May 4, 2022

View reviewed changes

jessiehuff approved these changes May 5, 2022

View reviewed changes

tlabaj reviewed May 5, 2022

View reviewed changes

tlabaj requested changes May 5, 2022

View reviewed changes

expand on body aria prop descriptions

7ac6d04

tlabaj approved these changes May 9, 2022

View reviewed changes

tlabaj merged commit a4a1431 into patternfly:main May 9, 2022

wise-king-sullyman deleted the modal-overflow-example branch May 9, 2022 13:25


		### With overflowing content

		If the content that you're passing to the modal is likely to overflow the modal content area, pass `tabIndex={0}` to the modal. Failing to do so will cause the modal content to not be scrollable via keyboard.

docs(Modal): add example preserving a11y when content overflows #7293

docs(Modal): add example preserving a11y when content overflows #7293

Uh oh!

Conversation

wise-king-sullyman commented Apr 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patternfly-build commented Apr 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nicolethoen left a comment

Choose a reason for hiding this comment

Uh oh!

jessiehuff left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wise-king-sullyman May 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

patternfly-build commented May 9, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

wise-king-sullyman commented Apr 22, 2022 •

edited

Loading

patternfly-build commented Apr 22, 2022 •

edited

Loading

jessiehuff left a comment •

edited

Loading

wise-king-sullyman May 5, 2022 •

edited

Loading