From a11e1ecec96829834227d9f1db3001d71b015847 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 16 Aug 2023 12:10:11 -0700 Subject: [PATCH 01/16] Missing space in lint link --- lib/primer/view_components/linters/details_menu_migration.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/primer/view_components/linters/details_menu_migration.rb b/lib/primer/view_components/linters/details_menu_migration.rb index cc65313df1..bb32fb0ddb 100644 --- a/lib/primer/view_components/linters/details_menu_migration.rb +++ b/lib/primer/view_components/linters/details_menu_migration.rb @@ -11,7 +11,7 @@ class DetailsMenuMigration < Linter include Helpers::RuleHelpers MIGRATE_FROM_DETAILS_MENU = " has been deprecated. Please instead use Primer::Alpha::ActionMenu" \ - "https://primer.style/design/components/action-menu/rails/alpha" + " https://primer.style/design/components/action-menu/rails/alpha" DETAILS_MENU_RUBY_PATTERN = /tag:?\s+:"details-menu"/.freeze def run(processed_source) From 9623ab63dfb6a658d416376291d28ade9bf2b1fd Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 16 Aug 2023 13:25:32 -0700 Subject: [PATCH 02/16] Updating tooltip migration link to correct url (#2211) --- .changeset/lazy-cups-rush.md | 5 +++++ lib/primer/view_components/linters/tooltipped_migration.rb | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/lazy-cups-rush.md diff --git a/.changeset/lazy-cups-rush.md b/.changeset/lazy-cups-rush.md new file mode 100644 index 0000000000..529810f3cf --- /dev/null +++ b/.changeset/lazy-cups-rush.md @@ -0,0 +1,5 @@ +--- +"@primer/view-components": patch +--- + +Updating tooltip migration linter link to correct url diff --git a/lib/primer/view_components/linters/tooltipped_migration.rb b/lib/primer/view_components/linters/tooltipped_migration.rb index 5796466aa9..44317eae73 100644 --- a/lib/primer/view_components/linters/tooltipped_migration.rb +++ b/lib/primer/view_components/linters/tooltipped_migration.rb @@ -10,7 +10,7 @@ class TooltippedMigration < Linter include LinterRegistry include Helpers::RuleHelpers - MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. There are major accessibility concerns with using this tooltip so please take action. See https://github.com/primer/view_components/blob/main/docs/content/guides/accessibility/tooltipped_migration.md." + MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. There are major accessibility concerns with using this tooltip so please take action. See https://primer.style/design/guides/development/rails/migration-guides/primer-css-tooltipped." TOOLTIPPED_RUBY_PATTERN = /classes:.*tooltipped|class:.*tooltipped/.freeze def run(processed_source) From aded2aa45261b13d870f474889d6bc6a803c484a Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Thu, 17 Aug 2023 10:41:55 -0400 Subject: [PATCH 03/16] Fix accessibility bug of missing accessible name on Dialog (#2210) --- .changeset/rich-donkeys-beam.md | 7 ++++++ app/components/primer/alpha/dialog.rb | 3 ++- test/components/primer/alpha/dialog_test.rb | 2 +- test/system/alpha/dialog_test.rb | 24 +++++++++++++++++++++ 4 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 .changeset/rich-donkeys-beam.md create mode 100644 test/system/alpha/dialog_test.rb diff --git a/.changeset/rich-donkeys-beam.md b/.changeset/rich-donkeys-beam.md new file mode 100644 index 0000000000..b0a259d26e --- /dev/null +++ b/.changeset/rich-donkeys-beam.md @@ -0,0 +1,7 @@ +--- +"@primer/view-components": minor +--- + +Fix accessibility bug of missing accessible name on `Primer::Alpha::Dialog` + + diff --git a/app/components/primer/alpha/dialog.rb b/app/components/primer/alpha/dialog.rb index fefd62f419..7baf8b5fec 100644 --- a/app/components/primer/alpha/dialog.rb +++ b/app/components/primer/alpha/dialog.rb @@ -133,7 +133,8 @@ def initialize( @system_arguments, { aria: { disabled: true, - describedby: "#{@id}-title #{@id}-description" + labelledby: "#{@id}-title", + describedby: "#{@id}-description" } } ) diff --git a/test/components/primer/alpha/dialog_test.rb b/test/components/primer/alpha/dialog_test.rb index 578dd26876..e51e6bd0c3 100644 --- a/test/components/primer/alpha/dialog_test.rb +++ b/test/components/primer/alpha/dialog_test.rb @@ -63,7 +63,7 @@ def test_renders_title_and_subtitle_with_describedby component.with_body { "content" } end - assert_selector("modal-dialog[id='my-dialog'][aria-describedby='my-dialog-title my-dialog-description']") do + assert_selector("modal-dialog[id='my-dialog'][aria-labelledby='my-dialog-title'][aria-describedby='my-dialog-description']") do assert_selector("h1[id='my-dialog-title']", text: "Title") assert_selector("h2[id='my-dialog-description']", text: "Subtitle") end diff --git a/test/system/alpha/dialog_test.rb b/test/system/alpha/dialog_test.rb new file mode 100644 index 0000000000..7238074605 --- /dev/null +++ b/test/system/alpha/dialog_test.rb @@ -0,0 +1,24 @@ +# frozen_string_literal: true + +require "system/test_case" + +module Alpha + class IntegrationDialogTest < System::TestCase + def test_modal_has_accessible_name + visit_preview(:default) + + click_button("Show Dialog") + + assert_selector("modal-dialog[aria-labelledby]") + assert_equal(find("modal-dialog")["aria-labelledby"], find("h1")["id"]) + end + + def test_focuses_close_button + visit_preview(:default) + + click_button("Show Dialog") + + assert_equal page.evaluate_script("document.activeElement")["aria-label"], "Close" + end + end +end From dfb7e2a0d8a752b6da3b4f53db6972dec1ef2440 Mon Sep 17 00:00:00 2001 From: GitHub Design Systems Bot <30705008+primer-css@users.noreply.github.com> Date: Thu, 17 Aug 2023 15:00:03 -0700 Subject: [PATCH 04/16] Release Tracking (#2195) Co-authored-by: github-actions[bot] --- .changeset/chilly-poems-sparkle.md | 7 - .changeset/hot-rats-lie.md | 7 - .changeset/lazy-cups-rush.md | 5 - .changeset/lemon-bulldogs-accept.md | 7 - .changeset/light-rockets-do.md | 7 - .changeset/ninety-cougars-shop.md | 7 - .changeset/rich-donkeys-beam.md | 7 - .changeset/tasty-waves-rhyme.md | 7 - .changeset/thick-snakes-sin.md | 7 - CHANGELOG.md | 40 + Gemfile.lock | 2 +- demo/Gemfile.lock | 2 +- docs/static/primer_view_components.css | 5071 +------------------- docs/static/primer_view_components.css.map | 2 +- lib/primer/view_components/version.rb | 2 +- package-lock.json | 4 +- package.json | 2 +- 17 files changed, 48 insertions(+), 5138 deletions(-) delete mode 100644 .changeset/chilly-poems-sparkle.md delete mode 100644 .changeset/hot-rats-lie.md delete mode 100644 .changeset/lazy-cups-rush.md delete mode 100644 .changeset/lemon-bulldogs-accept.md delete mode 100644 .changeset/light-rockets-do.md delete mode 100644 .changeset/ninety-cougars-shop.md delete mode 100644 .changeset/rich-donkeys-beam.md delete mode 100644 .changeset/tasty-waves-rhyme.md delete mode 100644 .changeset/thick-snakes-sin.md diff --git a/.changeset/chilly-poems-sparkle.md b/.changeset/chilly-poems-sparkle.md deleted file mode 100644 index 6149a40259..0000000000 --- a/.changeset/chilly-poems-sparkle.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -"@primer/view-components": patch ---- - -Fix guide URLs (in lib/primer/deprecations.yml) - - diff --git a/.changeset/hot-rats-lie.md b/.changeset/hot-rats-lie.md deleted file mode 100644 index 9750d6d993..0000000000 --- a/.changeset/hot-rats-lie.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@primer/view-components': patch ---- - -ActionMenu: Don't allow items to be unchecked in single-select mode - - diff --git a/.changeset/lazy-cups-rush.md b/.changeset/lazy-cups-rush.md deleted file mode 100644 index 529810f3cf..0000000000 --- a/.changeset/lazy-cups-rush.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/view-components": patch ---- - -Updating tooltip migration linter link to correct url diff --git a/.changeset/lemon-bulldogs-accept.md b/.changeset/lemon-bulldogs-accept.md deleted file mode 100644 index 7b54f6f2be..0000000000 --- a/.changeset/lemon-bulldogs-accept.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@primer/view-components': patch ---- - -Label BorderBox lists with their header - - diff --git a/.changeset/light-rockets-do.md b/.changeset/light-rockets-do.md deleted file mode 100644 index f616207cf3..0000000000 --- a/.changeset/light-rockets-do.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@primer/view-components': minor ---- - -Add rubocop linter for `Truncate` component - - diff --git a/.changeset/ninety-cougars-shop.md b/.changeset/ninety-cougars-shop.md deleted file mode 100644 index ef64238e77..0000000000 --- a/.changeset/ninety-cougars-shop.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -"@primer/view-components": minor ---- - -Bump Primitives v7.12.0 - - diff --git a/.changeset/rich-donkeys-beam.md b/.changeset/rich-donkeys-beam.md deleted file mode 100644 index b0a259d26e..0000000000 --- a/.changeset/rich-donkeys-beam.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -"@primer/view-components": minor ---- - -Fix accessibility bug of missing accessible name on `Primer::Alpha::Dialog` - - diff --git a/.changeset/tasty-waves-rhyme.md b/.changeset/tasty-waves-rhyme.md deleted file mode 100644 index 1fa499e8ae..0000000000 --- a/.changeset/tasty-waves-rhyme.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@primer/view-components': patch ---- - -Updates Primer::Beta::Button.with_tooltip to not accept `:label` type. - - diff --git a/.changeset/thick-snakes-sin.md b/.changeset/thick-snakes-sin.md deleted file mode 100644 index 61c6f15b89..0000000000 --- a/.changeset/thick-snakes-sin.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@primer/view-components': patch ---- - -add aria-invalid when fields are invalid - - diff --git a/CHANGELOG.md b/CHANGELOG.md index b376aa50ff..3ea01e65fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,45 @@ # CHANGELOG +## 0.7.0 + +### Minor Changes + +- [#2200](https://github.com/primer/view_components/pull/2200) [`1b770f90`](https://github.com/primer/view_components/commit/1b770f9000faa119eb2ece3035be2eaa476ca1a1) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Add rubocop linter for `Truncate` component + + + +- [#2207](https://github.com/primer/view_components/pull/2207) [`ba01f4e9`](https://github.com/primer/view_components/commit/ba01f4e9f7d287c01fb3dab1b04b58c49c1d71fb) Thanks [@langermank](https://github.com/langermank)! - Bump Primitives v7.12.0 + + + +- [#2210](https://github.com/primer/view_components/pull/2210) [`aded2aa4`](https://github.com/primer/view_components/commit/aded2aa45261b13d870f474889d6bc6a803c484a) Thanks [@khiga8](https://github.com/khiga8)! - Fix accessibility bug of missing accessible name on `Primer::Alpha::Dialog` + + + +### Patch Changes + +- [#2203](https://github.com/primer/view_components/pull/2203) [`3f504021`](https://github.com/primer/view_components/commit/3f504021e26cb92c99b16b63fe3e9b45fd5ede3b) Thanks [@orhantoy](https://github.com/orhantoy)! - Fix guide URLs (in lib/primer/deprecations.yml) + + + +- [#2192](https://github.com/primer/view_components/pull/2192) [`73fc40bb`](https://github.com/primer/view_components/commit/73fc40bb83ac2b14936e38ad2706cfdd68abc34f) Thanks [@camertron](https://github.com/camertron)! - ActionMenu: Don't allow items to be unchecked in single-select mode + + + +- [#2211](https://github.com/primer/view_components/pull/2211) [`9623ab63`](https://github.com/primer/view_components/commit/9623ab63dfb6a658d416376291d28ade9bf2b1fd) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating tooltip migration linter link to correct url + +- [#2202](https://github.com/primer/view_components/pull/2202) [`d7da4012`](https://github.com/primer/view_components/commit/d7da4012cb0a1d268cb0557cce171137dc766890) Thanks [@camertron](https://github.com/camertron)! - Label BorderBox lists with their header + + + +- [#2190](https://github.com/primer/view_components/pull/2190) [`0a9bcda2`](https://github.com/primer/view_components/commit/0a9bcda29eedd5b4854ce71a413b22f275283729) Thanks [@radglob](https://github.com/radglob)! - Updates Primer::Beta::Button.with_tooltip to not accept `:label` type. + + + +- [#2201](https://github.com/primer/view_components/pull/2201) [`ba90a43d`](https://github.com/primer/view_components/commit/ba90a43d9904bb088e1ce3988c3b94211155e722) Thanks [@kintner](https://github.com/kintner)! - add aria-invalid when fields are invalid + + + ## 0.6.0 ### Minor Changes diff --git a/Gemfile.lock b/Gemfile.lock index d59b7e4ece..e36362e781 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - primer_view_components (0.6.0) + primer_view_components (0.7.0) actionview (>= 5.0.0) activesupport (>= 5.0.0) octicons (>= 18.0.0) diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock index 6f55c4aa45..f494f4aae8 100644 --- a/demo/Gemfile.lock +++ b/demo/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: .. specs: - primer_view_components (0.6.0) + primer_view_components (0.7.0) actionview (>= 5.0.0) activesupport (>= 5.0.0) octicons (>= 18.0.0) diff --git a/docs/static/primer_view_components.css b/docs/static/primer_view_components.css index ccc6e134c1..3dbfdc18fc 100644 --- a/docs/static/primer_view_components.css +++ b/docs/static/primer_view_components.css @@ -1,5070 +1 @@ -[popover] { - position: fixed; - z-index: 2147483647; - inset: 0; - padding: 0.25em; - width: -moz-fit-content; - width: fit-content; - height: -moz-fit-content; - height: fit-content; - border-width: initial; - border-color: initial; - border-image: initial; - border-style: solid; - background-color: canvas; - color: canvastext; - overflow: auto; - margin: auto; -} -[popover]:not(.\:popover-open) { - display: none; -} -[popover]:is(dialog[open]) { - display: revert; -} -[anchor].\:popover-open { - inset: auto; -} -@supports selector([popover]:open) { - [popover]:not(.\:popover-open, dialog[open]) { - display: revert; - } - [anchor]:is(:open) { - inset: auto; - } -} -@supports selector([popover]:popover-open) { - [popover]:not(.\:popover-open, dialog[open]) { - display: revert; - } - [anchor]:is(:popover-open) { - inset: auto; - } -} -@supports not (background-color: canvas) { - [popover] { - background-color: white; - color: black; - } -} -@supports (width: -moz-fit-content) { - [popover] { - width: -moz-fit-content; - height: -moz-fit-content; - } -} -@supports not (inset: 0) { - [popover] { - top: 0; - left: 0; - right: 0; - bottom: 0; - } -} -/* CSS component styles here */ -/* alpha */ -:root { - --actionListContent-paddingBlock: var(--control-medium-paddingBlock,0.375rem); -} -/* ActionList */ -.ActionListHeader { - margin-left: var(--base-size-8,0.5rem); - margin-bottom: var(--base-size-16,1rem); -} -/*