@pingux/astro 1.31.0-alpha.6 → 1.31.0-alpha.7

package/lib/cjs/components/RequirementsList/RequirementsList.js

@@ -98,18 +98,22 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
   var buildRequirementsLine = function buildRequirementsLine(req) {
     return (0, _react2.jsx)(_Box["default"], {
+      role: "listitem",
       isRow: true,
       key: req.name,
       alignItems: "center",
-      width: "100%"
+      width: "100%",
+      as: "li"
     }, statusIconRender(req.status), (0, _react2.jsx)(_Text["default"], {
       variant: "bodyWeak"
     }, req.name));
   };
 
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    role: "list",
     p: "lg",
     gap: "md",
+    as: "ul",
     ref: ref
   }, others), (0, _map["default"])(requirements).call(requirements, function (req) {
     return buildRequirementsLine(req);

package/lib/cjs/components/RequirementsList/RequirementsList.test.js

@@ -63,7 +63,7 @@ test('base case requirements list', function () {
 
   var requirementsList = _react2.screen.getByTestId(testId);
 
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('empty variables requirements list', function () {
@@ -73,7 +73,7 @@ test('empty variables requirements list', function () {
 
   var requirementsList = _react2.screen.getByTestId(testId);
 
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('should render default status icon if such passed in props', function () {

package/lib/cjs/components/SearchField/SearchField.js

@@ -105,6 +105,14 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
+  var handleKeyDownEvent = function handleKeyDownEvent(e) {
+    var key = e.key;
+
+    if (key === 'Enter' || key === ' ') {
+      state.setValue('');
+    }
+  };
+
   return (0, _react2.jsx)(_.Box, fieldContainerProps, label && (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, {
     variant: "forms.search.container"
   }, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
@@ -116,6 +124,8 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "forms.search.icon",
     size: 22
   }, iconProps)), !hasNoClearButton && state.value !== '' && (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
+    tabIndex: 0,
+    onKeyDown: handleKeyDownEvent,
     sx: {
       position: 'absolute',
       top: 8,

package/lib/cjs/components/SearchField/SearchField.test.js

@@ -242,6 +242,33 @@ test('clear button should be present by default ', function () {
   });
   expect(_testWrapper.screen.getByRole('button')).toBeInTheDocument();
 });
+test('clear button should be keyboard accessible', function () {
+  getComponent();
+
+  var search = _testWrapper.screen.getByLabelText(testLabel);
+
+  _userEvent["default"].type(search, 'clear');
+
+  expect(search).toHaveValue('clear');
+
+  var clearButton = _testWrapper.screen.getByRole('button');
+
+  expect(clearButton).toHaveAttribute('tabindex', '0');
+  (0, _testWrapper.act)(function () {
+    clearButton.focus();
+  });
+  expect(clearButton).toHaveFocus();
+
+  _testWrapper.fireEvent.keyDown(clearButton, {
+    key: 'Enter'
+  });
+
+  _testWrapper.fireEvent.keyUp(clearButton, {
+    key: 'Enter'
+  });
+
+  expect(search).toHaveValue('');
+});
 test('clear button should not be present is hasNoClearButton=true ', function () {
   getComponent({
     value: 'test-value',

package/lib/components/RequirementsList/RequirementsList.js

@@ -63,18 +63,22 @@ var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var buildRequirementsLine = function buildRequirementsLine(req) {
     return ___EmotionJSX(Box, {
+      role: "listitem",
       isRow: true,
       key: req.name,
       alignItems: "center",
-      width: "100%"
+      width: "100%",
+      as: "li"
     }, statusIconRender(req.status), ___EmotionJSX(Text, {
       variant: "bodyWeak"
     }, req.name));
   };
 
   return ___EmotionJSX(Box, _extends({
+    role: "list",
     p: "lg",
     gap: "md",
+    as: "ul",
     ref: ref
   }, others), _mapInstanceProperty(requirements).call(requirements, function (req) {
     return buildRequirementsLine(req);

package/lib/components/RequirementsList/RequirementsList.test.js

@@ -51,7 +51,7 @@ axeTest(getComponent);
 test('base case requirements list', function () {
   getComponent();
   var requirementsList = screen.getByTestId(testId);
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('empty variables requirements list', function () {
@@ -59,7 +59,7 @@ test('empty variables requirements list', function () {
     requirementsList: []
   });
   var requirementsList = screen.getByTestId(testId);
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('should render default status icon if such passed in props', function () {

package/lib/components/SearchField/SearchField.js

@@ -69,6 +69,14 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
+  var handleKeyDownEvent = function handleKeyDownEvent(e) {
+    var key = e.key;
+
+    if (key === 'Enter' || key === ' ') {
+      state.setValue('');
+    }
+  };
+
   return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, {
     variant: "forms.search.container"
   }, ___EmotionJSX(Input, _extends({
@@ -80,6 +88,8 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.search.icon",
     size: 22
   }, iconProps)), !hasNoClearButton && state.value !== '' && ___EmotionJSX(IconButton, _extends({
+    tabIndex: 0,
+    onKeyDown: handleKeyDownEvent,
     sx: {
       position: 'absolute',
       top: 8,

package/lib/components/SearchField/SearchField.test.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import SearchField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-radio-group';
@@ -179,6 +179,25 @@ test('clear button should be present by default ', function () {
   });
   expect(screen.getByRole('button')).toBeInTheDocument();
 });
+test('clear button should be keyboard accessible', function () {
+  getComponent();
+  var search = screen.getByLabelText(testLabel);
+  userEvent.type(search, 'clear');
+  expect(search).toHaveValue('clear');
+  var clearButton = screen.getByRole('button');
+  expect(clearButton).toHaveAttribute('tabindex', '0');
+  act(function () {
+    clearButton.focus();
+  });
+  expect(clearButton).toHaveFocus();
+  fireEvent.keyDown(clearButton, {
+    key: 'Enter'
+  });
+  fireEvent.keyUp(clearButton, {
+    key: 'Enter'
+  });
+  expect(search).toHaveValue('');
+});
 test('clear button should not be present is hasNoClearButton=true ', function () {
   getComponent({
     value: 'test-value',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.31.0-alpha.6",
+  "version": "1.31.0-alpha.7",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",