From be8f9014cb532d122665c83a94035b0de8e0d300 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Tue, 15 Mar 2022 18:14:39 +0100 Subject: [PATCH 1/2] ActionList: a11y fixes (#1958) * role=none without a parent role is invalid * Add example with Heading * Add focus styles for high contrast mode * Create actionlist-a11y-fixes.md --- .changeset/actionlist-a11y-fixes.md | 6 ++++++ src/ActionList/Group.tsx | 2 +- src/ActionList/Item.tsx | 8 ++++++++ src/stories/ActionList/examples.stories.tsx | 13 ++++++++++--- 4 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 .changeset/actionlist-a11y-fixes.md diff --git a/.changeset/actionlist-a11y-fixes.md b/.changeset/actionlist-a11y-fixes.md new file mode 100644 index 00000000000..54579c5faf2 --- /dev/null +++ b/.changeset/actionlist-a11y-fixes.md @@ -0,0 +1,6 @@ +--- +"@primer/react": patch +--- + +ActionList: Add focus styles for Windows high contrast mode +ActionList: Fix incorrect role for ActionList.Group outside ActionMenu diff --git a/src/ActionList/Group.tsx b/src/ActionList/Group.tsx index 74afa85018f..d6f2715c325 100644 --- a/src/ActionList/Group.tsx +++ b/src/ActionList/Group.tsx @@ -50,7 +50,7 @@ export const Group: React.FC = ({ return ( ( } }, + '@media (forced-colors: active)': { + ':focus': { + // we set color to be transparent and let the high contrast rules + // decide what color with contrast should that be corrected to + outline: 'solid 1px transparent !important' + } + }, + /** Divider styles */ '[data-component="ActionList.Item--DividerContainer"]': { position: 'relative' diff --git a/src/stories/ActionList/examples.stories.tsx b/src/stories/ActionList/examples.stories.tsx index fdf306934bd..6fdd05d7595 100644 --- a/src/stories/ActionList/examples.stories.tsx +++ b/src/stories/ActionList/examples.stories.tsx @@ -15,7 +15,7 @@ import { XIcon } from '@primer/octicons-react' -import {ThemeProvider} from '../..' +import {Heading, ThemeProvider} from '../..' import {ActionList} from '../../ActionList' import BaseStyles from '../../BaseStyles' import Avatar from '../../Avatar' @@ -49,9 +49,16 @@ export function WithLinks(): JSX.Element { <>

With Links

-

This pattern can be seen in the repository sidebar, containing a list of links

+

This pattern can be seen in the repository sidebar, containing a list of links.

+

+ The heading "Details" is outside the ActionList and needs to have an id which is passed + to ActionList with aria-labelledby. +

- + + Details + + From d62ee0d866db73277a9709284c4813951adcfab7 Mon Sep 17 00:00:00 2001 From: GitHub Design Systems Bot <30705008+primer-css@users.noreply.github.com> Date: Tue, 15 Mar 2022 15:31:30 -0700 Subject: [PATCH 2/2] Version Packages (#1950) Co-authored-by: github-actions[bot] --- .changeset/actionlist-a11y-fixes.md | 6 ------ .changeset/bright-flowers-itch.md | 5 ----- .changeset/funny-ears-add.md | 5 ----- .changeset/old-schools-happen.md | 5 ----- CHANGELOG.md | 13 +++++++++++++ package.json | 2 +- 6 files changed, 14 insertions(+), 22 deletions(-) delete mode 100644 .changeset/actionlist-a11y-fixes.md delete mode 100644 .changeset/bright-flowers-itch.md delete mode 100644 .changeset/funny-ears-add.md delete mode 100644 .changeset/old-schools-happen.md diff --git a/.changeset/actionlist-a11y-fixes.md b/.changeset/actionlist-a11y-fixes.md deleted file mode 100644 index 54579c5faf2..00000000000 --- a/.changeset/actionlist-a11y-fixes.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"@primer/react": patch ---- - -ActionList: Add focus styles for Windows high contrast mode -ActionList: Fix incorrect role for ActionList.Group outside ActionMenu diff --git a/.changeset/bright-flowers-itch.md b/.changeset/bright-flowers-itch.md deleted file mode 100644 index 72ac5afc6c1..00000000000 --- a/.changeset/bright-flowers-itch.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -`FormControl` now accepts a `ref` prop diff --git a/.changeset/funny-ears-add.md b/.changeset/funny-ears-add.md deleted file mode 100644 index 314f71b9e02..00000000000 --- a/.changeset/funny-ears-add.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -Checkbox: `value` prop is now optional diff --git a/.changeset/old-schools-happen.md b/.changeset/old-schools-happen.md deleted file mode 100644 index 41d5ab20f6b..00000000000 --- a/.changeset/old-schools-happen.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -Add monospace prop to textinput diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e597d5dbb4..5d23bad7bf2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,18 @@ # @primer/components +## 35.0.1 + +### Patch Changes + +- [#1958](https://github.com/primer/react/pull/1958) [`be8f9014`](https://github.com/primer/react/commit/be8f9014cb532d122665c83a94035b0de8e0d300) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Add focus styles for Windows high contrast mode + ActionList: Fix incorrect role for ActionList.Group outside ActionMenu + +* [#1949](https://github.com/primer/react/pull/1949) [`e430bd8b`](https://github.com/primer/react/commit/e430bd8b635d8cb25e73e4301a0fedc6c60a1e3a) Thanks [@colebemis](https://github.com/colebemis)! - `FormControl` now accepts a `ref` prop + +- [#1960](https://github.com/primer/react/pull/1960) [`26c7784d`](https://github.com/primer/react/commit/26c7784d24a2c3d1e0b33457c42ac804ac1dcd64) Thanks [@colebemis](https://github.com/colebemis)! - Checkbox: `value` prop is now optional + +* [#1935](https://github.com/primer/react/pull/1935) [`40c93d8b`](https://github.com/primer/react/commit/40c93d8bad64e3e5c906f0140978b8991d15be92) Thanks [@pksjce](https://github.com/pksjce)! - Add monospace prop to textinput + ## 35.0.0 ### Major Changes diff --git a/package.json b/package.json index 6e9f3d5e1a2..75e425e68aa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/react", - "version": "35.0.0", + "version": "35.0.1", "description": "An implementation of GitHub's Primer Design System using React", "main": "lib/index.js", "module": "lib-esm/index.js",