dibk-design 1.0.4 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -65,7 +65,7 @@
65
65
  }
66
66
 
67
67
  &:focus-visible {
68
- outline-color: #005fcc;
68
+ outline-color: $color-focus-outline;
69
69
  outline-style: auto;
70
70
  outline-width: 2px;
71
71
  outline-offset: 0px;
@@ -76,6 +76,7 @@ var CheckBoxIcon = /*#__PURE__*/function (_React$Component) {
76
76
  style: inlineStyle
77
77
  };
78
78
  return /*#__PURE__*/_react.default.createElement("span", props, /*#__PURE__*/_react.default.createElement("span", {
79
+ "aria-hidden": true,
79
80
  className: _CheckBoxIconModule.default.checkmark
80
81
  }, this.props.checked ? this.props.checkmarkCharacter : ''));
81
82
  }
@@ -70,7 +70,7 @@ var CheckBoxInput = /*#__PURE__*/function (_React$Component) {
70
70
  checked: this.props.checked,
71
71
  disabled: this.props.disabled,
72
72
  onChange: this.props.onChange,
73
- "aria-expanded": this.props["aria-expanded"],
73
+ "aria-description": this.props["aria-description"],
74
74
  "aria-controls": this.props["aria-controls"]
75
75
  };
76
76
  return /*#__PURE__*/_react.default.createElement("label", labelProps, !this.props.contentOnly ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CheckBoxIcon.default, iconProps), /*#__PURE__*/_react.default.createElement("input", inputProps)) : /*#__PURE__*/_react.default.createElement(_CheckBoxIcon.default, iconProps), /*#__PURE__*/_react.default.createElement("span", null, this.props.children));
@@ -90,7 +90,7 @@ CheckBoxInput.propTypes = {
90
90
  hasErrors: _propTypes.default.bool,
91
91
  theme: _propTypes.default.object,
92
92
  checkmarkCharacter: _propTypes.default.string,
93
- "aria-expanded": _propTypes.default.string,
93
+ "aria-description": _propTypes.default.string,
94
94
  "aria-controls": _propTypes.default.string
95
95
  };
96
96
  CheckBoxInput.defaultProps = {
@@ -19,8 +19,10 @@
19
19
  }
20
20
 
21
21
  &:focus-within{
22
- border-color: #072938;
23
- outline-color: #54acb8;
22
+ outline-width: 2px;
23
+ outline-color: $color-focus-outline;
24
+ outline-style: auto;
25
+ outline-offset: 1px;
24
26
  }
25
27
 
26
28
  input[type="checkbox"] {
@@ -46,10 +46,6 @@
46
46
  @include box-shadow(0 0 6px $color-dark-blue);
47
47
  }
48
48
 
49
- &:focus {
50
- outline-color: #54acb8;
51
- }
52
-
53
49
  label {
54
50
  width: 100%;
55
51
  padding: 10px;
@@ -69,7 +69,7 @@ var RadioButtonInput = /*#__PURE__*/function (_React$Component) {
69
69
  checked: this.props.checked,
70
70
  disabled: this.props.disabled,
71
71
  onChange: this.props.onChange,
72
- "aria-expanded": this.props["aria-expanded"],
72
+ "aria-description": this.props["aria-description"],
73
73
  "aria-controls": this.props["aria-controls"]
74
74
  };
75
75
  return /*#__PURE__*/_react.default.createElement("label", labelProps, !this.props.contentOnly ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_RadioButtonIcon.default, iconProps), /*#__PURE__*/_react.default.createElement("input", inputProps)) : null, /*#__PURE__*/_react.default.createElement("span", null, this.props.children));
@@ -89,7 +89,7 @@ RadioButtonInput.propTypes = {
89
89
  hasErrors: _propTypes.default.bool,
90
90
  theme: _propTypes.default.object,
91
91
  inputValue: _propTypes.default.string.isRequired,
92
- "aria-expanded": _propTypes.default.string,
92
+ "aria-description": _propTypes.default.string,
93
93
  "aria-controls": _propTypes.default.string
94
94
  };
95
95
  RadioButtonInput.defaultProps = {
@@ -21,8 +21,10 @@
21
21
  }
22
22
 
23
23
  &:focus-within{
24
- border-color: #072938;
25
- outline-color: #54acb8;
24
+ outline-width: 2px;
25
+ outline-color: $color-focus-outline;
26
+ outline-style: auto;
27
+ outline-offset: 1px;
26
28
  }
27
29
 
28
30
  input[type="radio"] {
@@ -46,10 +46,6 @@
46
46
  @include box-shadow(0 0 6px $color-dark-blue);
47
47
  }
48
48
 
49
- &:focus {
50
- outline-color: #54acb8;
51
- }
52
-
53
49
  label {
54
50
  width: 100%;
55
51
  padding: 10px;
@@ -1,6 +1,8 @@
1
1
  $body-background: #ffffff;
2
2
  $color-default-text: #222;
3
3
  $color-link: #072938;
4
+ $color-focus-outline: #005FCC;
5
+
4
6
  $color-dark-blue: #072938;
5
7
  $color-light-blue: #acc5d4;
6
8
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dibk-design",
3
- "version": "1.0.4",
3
+ "version": "1.0.7",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",