diff --git a/.changeset/mean-fans-decide.md b/.changeset/mean-fans-decide.md new file mode 100644 index 0000000000..5fe04beb40 --- /dev/null +++ b/.changeset/mean-fans-decide.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Fixed focus-visible outline styles for Menu and Select components. + +**Affected components:** Menu, Select diff --git a/.changeset/silver-pigs-remain.md b/.changeset/silver-pigs-remain.md new file mode 100644 index 0000000000..d6481f2990 --- /dev/null +++ b/.changeset/silver-pigs-remain.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Added proper cursor styles for RadioGroup items. + +**Affected components:** RadioGroup diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css index 4967d26551..6dca183395 100644 --- a/packages/ui/src/components/Menu/Menu.module.css +++ b/packages/ui/src/components/Menu/Menu.module.css @@ -69,6 +69,15 @@ padding-inline: var(--bui-space-1); display: block; + &:focus-visible { + outline: none; + } + + &[data-focus-visible] { + outline: 2px solid var(--bui-ring); + outline-offset: -2px; + } + &[data-focused] .bui-MenuItemWrapper { background: var(--bui-bg-neutral-2); color: var(--bui-fg-primary); diff --git a/packages/ui/src/components/RadioGroup/RadioGroup.module.css b/packages/ui/src/components/RadioGroup/RadioGroup.module.css index 1a2cd221ca..f6b7de0795 100644 --- a/packages/ui/src/components/RadioGroup/RadioGroup.module.css +++ b/packages/ui/src/components/RadioGroup/RadioGroup.module.css @@ -43,6 +43,7 @@ font-size: var(--bui-font-size-2); color: var(--bui-fg-primary); forced-color-adjust: none; + cursor: pointer; &:before { content: ''; @@ -103,5 +104,9 @@ background: var(--bui-bg-disabled); } } + + &[data-readonly] { + cursor: not-allowed; + } } } diff --git a/packages/ui/src/components/Select/Select.module.css b/packages/ui/src/components/Select/Select.module.css index 19118acf3c..3a5d066d1d 100644 --- a/packages/ui/src/components/Select/Select.module.css +++ b/packages/ui/src/components/Select/Select.module.css @@ -143,6 +143,11 @@ gap: var(--bui-space-2); outline: none; + &[data-focus-visible] { + outline: 2px solid var(--bui-ring); + outline-offset: 2px; + } + &[data-focused]::before { content: ''; position: absolute;