@hypothesis/frontend-shared - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

CHANGELOG.md

@@ -8,2 +8,8 @@ # Changelog
 
+## [v4.1.0] - 2021-11-01
+
+### Changed
+
+- Add appropriate ARIA attributes for button role="tab" [#233](https://github.com/hypothesis/frontend-shared/pull/233)
+
 ## [v4.0.0] - 2021-10-27
@@ -10,0 +16,0 @@

lib/components/buttons.d.ts

@@ -51,3 +51,3 @@ /**
      * - Is this button currently "active?" (set
-     * `aria-pressed`)
+     * `aria-pressed` or `aria-selected` depending on button `role`)
      */
@@ -54,0 +54,0 @@ pressed?: boolean | undefined;

lib/components/buttons.js

@@ -18,3 +18,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/buttons.js";
  * @prop {boolean} [pressed] - Is this button currently "active?" (set
- *   `aria-pressed`)
+ *   `aria-pressed` or `aria-selected` depending on button `role`)
  * @prop {never} [aria-pressed] - Use `pressed` prop instead
@@ -69,7 +69,17 @@ * @prop {'small'|'medium'|'large'} [size='medium'] - Relative button size:
 }) {
+  var _restProps$role;
+
+  const role = (_restProps$role = restProps === null || restProps === void 0 ? void 0 : restProps.role) !== null && _restProps$role !== void 0 ? _restProps$role : 'button';
   const ariaProps = {
-    'aria-expanded': expanded,
-    'aria-pressed': pressed,
     'aria-label': restProps.title
-  };
+  }; // aria-pressed and aria-expanded are not allowed for buttons with
+  // an aria role of `tab`. Instead, the aria-selected attribute is expected.
+
+  if (role === 'tab') {
+    ariaProps['aria-selected'] = pressed;
+  } else {
+    ariaProps['aria-pressed'] = pressed;
+    ariaProps['aria-expanded'] = expanded;
+  }
+
   return _jsxDEV("button", {
@@ -85,3 +95,3 @@ ref: buttonRef,
     fileName: _jsxFileName,
-    lineNumber: 74,
+    lineNumber: 82,
     columnNumber: 5
@@ -111,3 +121,3 @@ }, this);
       fileName: _jsxFileName,
-      lineNumber: 101,
+      lineNumber: 109,
       columnNumber: 7
@@ -117,3 +127,3 @@ }, this)
     fileName: _jsxFileName,
-    lineNumber: 100,
+    lineNumber: 108,
     columnNumber: 5
@@ -144,3 +154,3 @@ }, this);
       fileName: _jsxFileName,
-      lineNumber: 119,
+      lineNumber: 127,
       columnNumber: 43
@@ -151,3 +161,3 @@ }, this), children, icon && iconPosition === 'right' && _jsxDEV(SvgIcon, {
       fileName: _jsxFileName,
-      lineNumber: 121,
+      lineNumber: 129,
       columnNumber: 44
@@ -157,3 +167,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 118,
+    lineNumber: 126,
     columnNumber: 5
@@ -174,3 +184,3 @@ }, this);
     fileName: _jsxFileName,
-    lineNumber: 132,
+    lineNumber: 140,
     columnNumber: 10
@@ -177,0 +187,0 @@ }, this);

package.json

 {
   "name": "@hypothesis/frontend-shared",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Shared components, styles and utilities for Hypothesis projects",
@@ -5,0 +5,0 @@ "license": "BSD-2-Clause",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

870149

increased by0.15%

Lines of code

10733

increased by0.07%

No dependency changes