@newhighsco/chipset 6.27.1 → 6.27.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newhighsco/chipset",
   "description": "Shareable, theme-able component library by New High Score",
-  "version": "6.27.1",
+  "version": "6.27.3",
   "author": "New High Score",
   "license": "ISC",
   "repository": {
@@ -37,33 +37,32 @@
     "format:css": "yarn lint:css --fix"
   },
   "dependencies": {
-    "@dr.pogodin/react-themes": "1.10.2",
+    "@dr.pogodin/react-themes": "1.10.3",
     "classnames": "2.5.1",
     "react-device-detect": "2.2.3"
   },
   "devDependencies": {
-    "@babel/core": "7.28.6",
-    "@babel/preset-env": "7.28.6",
+    "@babel/core": "7.29.0",
+    "@babel/preset-env": "7.29.0",
     "@babel/preset-react": "7.28.5",
-    "@commitlint/cli": "20.3.1",
-    "@fullhuman/postcss-purgecss": "7.0.2",
+    "@commitlint/cli": "20.4.1",
     "@newhighsco/browserslist-config": "2.0.0",
-    "@newhighsco/commitlint-config": "1.1.46",
+    "@newhighsco/commitlint-config": "1.1.48",
     "@newhighsco/editor-config": "1.2.0",
-    "@newhighsco/eslint-config": "6.0.8",
-    "@newhighsco/postcss-config": "4.0.12",
+    "@newhighsco/eslint-config": "6.0.17",
+    "@newhighsco/postcss-config": "4.0.19",
     "@newhighsco/prettier-config": "2.3.3",
-    "@newhighsco/release-config": "1.4.20",
-    "@newhighsco/storybook-preset": "10.0.2",
-    "@newhighsco/stylelint-config": "4.0.20",
+    "@newhighsco/release-config": "1.4.24",
+    "@newhighsco/storybook-preset": "10.2.3",
+    "@newhighsco/stylelint-config": "4.0.24",
     "@newhighsco/svgr-config": "1.0.0",
     "@omlet/cli": "2.0.0",
-    "@storybook/react-webpack5": "10.2.0",
+    "@storybook/react-webpack5": "10.2.7",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "babel-loader": "10.0.0",
-    "chromatic": "13.3.5",
+    "chromatic": "15.0.0",
     "concurrently": "9.2.1",
     "eslint": "9.39.2",
     "husky": "9.1.7",
@@ -73,17 +72,17 @@
     "jest-junit": "16.0.0",
     "postcss": "8.5.6",
     "prettier": "3.8.1",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "sass-true": "10.1.0",
-    "semantic-release": "25.0.2",
-    "storybook": "10.2.0",
-    "stylelint": "17.0.0",
-    "webpack": "5.104.1"
+    "semantic-release": "25.0.3",
+    "storybook": "10.2.7",
+    "stylelint": "17.1.1",
+    "webpack": "5.105.0"
   },
   "peerDependencies": {
-    "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
   },
   "browserslist": [
     "extends @newhighsco/browserslist-config"

package/src/components/Button/Button.module.scss

@@ -11,6 +11,11 @@
   &[type] {
     cursor: pointer;
   }
+
+  &[disabled],
+  &[aria-disabled] {
+    cursor: not-allowed;
+  }
 }
 
 .group {

package/src/components/Menubar/Menubar.jsx

@@ -1,12 +1,11 @@
 import { any, array, bool, func, node, oneOf, shape, string } from 'prop-types'
-import React, { useId } from 'react'
+import React from 'react'
 
-import { useToggle } from '../../hooks'
+import { useIds, useToggle } from '../../hooks'
 import { classNames } from '../../utils'
 import Button from '../Button'
 import Icon from '../Icon'
 import List from '../List'
-import SmartLink from '../SmartLink'
 import { ReactComponent as ArrowDownSvg } from './images/arrow-down.svg'
 import { ReactComponent as ArrowUpSvg } from './images/arrow-up.svg'
 import { ReactComponent as CloseSvg } from './images/close.svg'
@@ -26,7 +25,7 @@ const Menubar = ({
   theme
 }) => {
   const [visible, setVisibility] = useToggle(!toggle)
-  const id = useId()
+  const [listId, iconId] = useIds(['list', 'icon'])
 
   if (!links.length) return null
 
@@ -42,13 +41,16 @@ const Menubar = ({
       {toggle && (
         <Button
           active={visible}
-          aria-controls={id}
+          aria-controls={listId}
           aria-expanded={visible}
+          aria-labelledby={iconId}
+          aria-haspopup
           onClick={toggleVisibility}
           theme={{ root: theme?.toggle, active: theme?.toggleActive }}
         >
           {toggle.children}
           <Icon
+            id={iconId}
             theme={{ root: theme?.toggleIcon }}
             alt={`${LABELS[visible]} ${title}`}
           >
@@ -57,11 +59,10 @@ const Menubar = ({
         </Button>
       )}
       <List
-        id={id}
+        id={listId}
         role={role}
         unstyled
         inline={inline}
-        hidden={!visible}
         theme={{ root: theme?.list, inline: theme?.inline }}
       >
         {links.map(({ links = [], ...rest }, index) => {

package/src/components/Navigation/Navigation.module.scss

@@ -1,4 +1,4 @@
-.list[hidden] {
+[aria-expanded='false'] ~ .list {
   display: none;
 }
 

package/src/components/Tooltip/Tooltip.jsx

@@ -1,5 +1,5 @@
 import { bool, node, oneOf, shape, string } from 'prop-types'
-import React from 'react'
+import React, { useId } from 'react'
 
 import { useToggle } from '../../hooks'
 import { classNames } from '../../utils'
@@ -9,6 +9,7 @@ import SmartLink from '../SmartLink'
  * Use `Tooltip` to present additional information about a specific element
  */
 const Tooltip = ({
+  role = 'tooltip',
   hidden = true,
   manual = true,
   toggle,
@@ -23,11 +24,14 @@ const Tooltip = ({
   className
 }) => {
   const [visible, setVisibility] = useToggle(!hidden)
+  const id = useId()
 
   if (!heading && !children) return null
 
   return (
     <span
+      role={role}
+      aria-describedby={id}
       className={classNames(theme?.root, className)}
       {...(!manual && {
         onMouseOver: setVisibility,
@@ -42,19 +46,19 @@ const Tooltip = ({
         href={href}
         target={target}
         disabled={disabled}
-        aria-label="Toggle tooltip"
-        {...(manual && { 'aria-expanded': visible, onClick: setVisibility })}
+        aria-expanded={visible}
+        {...(manual && { onClick: setVisibility })}
       >
         {toggle}
       </SmartLink>
       {(heading || children) && (
         <span
+          id={id}
           className={classNames(
             theme?.content,
             align && theme?.[align],
             valign && theme?.[valign]
           )}
-          hidden={!visible}
         >
           {heading && <span className={theme?.heading}>{heading}</span>}
           {children && <span className={theme?.copy}>{children}</span>}
@@ -66,6 +70,7 @@ const Tooltip = ({
 
 Tooltip.displayName = 'Tooltip'
 Tooltip.propTypes = {
+  role: string,
   hidden: bool,
   manual: bool,
   toggle: node,

package/src/components/Tooltip/Tooltip.module.scss

@@ -17,7 +17,7 @@
   position: absolute;
   z-index: 1;
 
-  &[hidden] {
+  [aria-expanded='false'] ~ & {
     display: none;
   }
 

package/styles/normalize.stories.jsx

@@ -4,7 +4,6 @@ export default { component: KitchenSink }
 
 export const Source = {
   parameters: {
-    chromatic: { disable: true },
     docs: {
       source: {
         code: "@use '~@newhighsco/chipset/styles/normalize';",