@instructure/ui-drilldown 8.24.1-snapshot.16 → 8.24.1

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.
Files changed (14) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/es/Drilldown/DrilldownOption/index.js +0 -1
  3. package/es/Drilldown/index.js +0 -1
  4. package/lib/Drilldown/DrilldownOption/index.js +0 -1
  5. package/lib/Drilldown/index.js +0 -1
  6. package/package.json +21 -22
  7. package/src/Drilldown/DrilldownOption/index.tsx +0 -1
  8. package/src/Drilldown/README.md +33 -27
  9. package/src/Drilldown/index.tsx +1 -3
  10. package/tsconfig.build.tsbuildinfo +1 -1
  11. package/types/Drilldown/DrilldownOption/index.d.ts +0 -1
  12. package/types/Drilldown/DrilldownOption/index.d.ts.map +1 -1
  13. package/types/Drilldown/index.d.ts.map +1 -1
  14. package/LICENSE.md +0 -27
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [8.24.1](https://github.com/instructure/instructure-ui/compare/v8.24.0...v8.24.1) (2022-04-29)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **ui-drilldown,ui-options:** fix VoiceOver and Safari not reading Options.Item elements ([102c13d](https://github.com/instructure/instructure-ui/commit/102c13da991ad65ffde83ca7e0f23cbb760b8c68))
11
+
6
12
  # [8.24.0](https://github.com/instructure/instructure-ui/compare/v8.23.0...v8.24.0) (2022-04-26)
7
13
 
8
14
  **Note:** Version bump only for package @instructure/ui-drilldown
package/es/Drilldown/DrilldownOption/index.js CHANGED
@@ -51,7 +51,6 @@ let DrilldownOption = (_dec = withStyle(null, optionsItemThemeGenerator), _dec(_
51
51
  disabled: false,
52
52
  beforeLabelContentVAlign: 'start',
53
53
  afterLabelContentVAlign: 'start',
54
- descriptionRole: 'note',
55
54
  as: 'li',
56
55
  role: 'menuitem'
57
56
  }, _class2)) || _class);
package/es/Drilldown/index.js CHANGED
@@ -992,7 +992,6 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
992
992
  alignSelf: vAlignMap[afterLabelContentVAlign]
993
993
  }
994
994
  }, jsx("span", {
995
- role: "note",
996
995
  id: infoAriaId
997
996
  }, labelInfo)) : null));
998
997
  }
package/lib/Drilldown/DrilldownOption/index.js CHANGED
@@ -36,7 +36,6 @@ let DrilldownOption = (_dec = (0, _emotion.withStyle)(null, _uiOptions.optionsIt
36
36
  disabled: false,
37
37
  beforeLabelContentVAlign: 'start',
38
38
  afterLabelContentVAlign: 'start',
39
- descriptionRole: 'note',
40
39
  as: 'li',
41
40
  role: 'menuitem'
42
41
  }, _class2)) || _class);
package/lib/Drilldown/index.js CHANGED
@@ -1003,7 +1003,6 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
1003
1003
  alignSelf: vAlignMap[afterLabelContentVAlign]
1004
1004
  }
1005
1005
  }, (0, _emotion.jsx)("span", {
1006
- role: "note",
1007
1006
  id: infoAriaId
1008
1007
  }, labelInfo)) : null));
1009
1008
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-drilldown",
3
- "version": "8.24.1-snapshot.16+363893b5f",
3
+ "version": "8.24.1",
4
4
  "description": "A drilldown menu component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,28 +24,28 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.13.10",
27
- "@instructure/console": "8.24.1-snapshot.16+363893b5f",
28
- "@instructure/emotion": "8.24.1-snapshot.16+363893b5f",
29
- "@instructure/shared-types": "8.24.1-snapshot.16+363893b5f",
30
- "@instructure/ui-dom-utils": "8.24.1-snapshot.16+363893b5f",
31
- "@instructure/ui-icons": "8.24.1-snapshot.16+363893b5f",
32
- "@instructure/ui-options": "8.24.1-snapshot.16+363893b5f",
33
- "@instructure/ui-popover": "8.24.1-snapshot.16+363893b5f",
34
- "@instructure/ui-position": "8.24.1-snapshot.16+363893b5f",
35
- "@instructure/ui-prop-types": "8.24.1-snapshot.16+363893b5f",
36
- "@instructure/ui-react-utils": "8.24.1-snapshot.16+363893b5f",
37
- "@instructure/ui-selectable": "8.24.1-snapshot.16+363893b5f",
38
- "@instructure/ui-testable": "8.24.1-snapshot.16+363893b5f",
39
- "@instructure/ui-utils": "8.24.1-snapshot.16+363893b5f",
40
- "@instructure/ui-view": "8.24.1-snapshot.16+363893b5f",
27
+ "@instructure/console": "8.24.1",
28
+ "@instructure/emotion": "8.24.1",
29
+ "@instructure/shared-types": "8.24.1",
30
+ "@instructure/ui-dom-utils": "8.24.1",
31
+ "@instructure/ui-icons": "8.24.1",
32
+ "@instructure/ui-options": "8.24.1",
33
+ "@instructure/ui-popover": "8.24.1",
34
+ "@instructure/ui-position": "8.24.1",
35
+ "@instructure/ui-prop-types": "8.24.1",
36
+ "@instructure/ui-react-utils": "8.24.1",
37
+ "@instructure/ui-selectable": "8.24.1",
38
+ "@instructure/ui-testable": "8.24.1",
39
+ "@instructure/ui-utils": "8.24.1",
40
+ "@instructure/ui-view": "8.24.1",
41
41
  "prop-types": "^15"
42
42
  },
43
43
  "devDependencies": {
44
- "@instructure/ui-babel-preset": "8.24.1-snapshot.16+363893b5f",
45
- "@instructure/ui-color-utils": "8.24.1-snapshot.16+363893b5f",
46
- "@instructure/ui-test-locator": "8.24.1-snapshot.16+363893b5f",
47
- "@instructure/ui-test-utils": "8.24.1-snapshot.16+363893b5f",
48
- "@instructure/ui-themes": "8.24.1-snapshot.16+363893b5f"
44
+ "@instructure/ui-babel-preset": "8.24.1",
45
+ "@instructure/ui-color-utils": "8.24.1",
46
+ "@instructure/ui-test-locator": "8.24.1",
47
+ "@instructure/ui-test-utils": "8.24.1",
48
+ "@instructure/ui-themes": "8.24.1"
49
49
  },
50
50
  "peerDependencies": {
51
51
  "react": ">=16.8 <=17"
@@ -53,6 +53,5 @@
53
53
  "publishConfig": {
54
54
  "access": "public"
55
55
  },
56
- "sideEffects": false,
57
- "gitHead": "363893b5f0575cc9743cdaa7fae4c404f3fb9cca"
56
+ "sideEffects": false
58
57
  }
package/src/Drilldown/DrilldownOption/index.tsx CHANGED
@@ -52,7 +52,6 @@ class DrilldownOption extends Component<DrilldownOptionProps> {
52
52
  disabled: false,
53
53
  beforeLabelContentVAlign: 'start',
54
54
  afterLabelContentVAlign: 'start',
55
- descriptionRole: 'note',
56
55
  as: 'li',
57
56
  role: 'menuitem'
58
57
  }
package/src/Drilldown/README.md CHANGED
@@ -103,19 +103,19 @@ example: true
103
103
  ---
104
104
  <Drilldown rootPageId='root' width="20rem" maxHeight="30rem">
105
105
  <Drilldown.Page id="root">
106
- <Drilldown.Option id="option1" href="/#Options">
106
+ <Drilldown.Option id="linkExampleOption1" href="/#Options">
107
107
  Options component
108
108
  </Drilldown.Option>
109
- <Drilldown.Option id="option2"href="/#Menu">
109
+ <Drilldown.Option id="linkExampleOption2"href="/#Menu">
110
110
  Menu component
111
111
  </Drilldown.Option>
112
- <Drilldown.Option id="option3" href="/#Select">
112
+ <Drilldown.Option id="linkExampleOption3" href="/#Select">
113
113
  Options component
114
114
  </Drilldown.Option>
115
- <Drilldown.Option id="option4" href="/#SimpleSelect" disabled>
115
+ <Drilldown.Option id="linkExampleOption4" href="/#SimpleSelect" disabled>
116
116
  SimpleSelect component
117
117
  </Drilldown.Option>
118
- <Drilldown.Option id="option5" href="/#TreeBrowser">
118
+ <Drilldown.Option id="linkExampleOption5" href="/#TreeBrowser">
119
119
  TreeBrowser component
120
120
  </Drilldown.Option>
121
121
  </Drilldown.Page>
@@ -131,7 +131,7 @@ example: true
131
131
  <Drilldown rootPageId='root' width="20rem" maxHeight="30rem">
132
132
  <Drilldown.Page id="root">
133
133
  <Drilldown.Option
134
- id="option1"
134
+ id="renderElementExampleOption1"
135
135
  description="Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa."
136
136
  renderBeforeLabel={IconCheckSolid}
137
137
  renderAfterLabel={IconArrowOpenEndSolid}
@@ -141,7 +141,7 @@ example: true
141
141
  Option
142
142
  </Drilldown.Option>
143
143
  <Drilldown.Option
144
- id="option2"
144
+ id="renderElementExampleOption2"
145
145
  description="Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa."
146
146
  renderBeforeLabel={IconCheckSolid}
147
147
  renderAfterLabel={IconArrowOpenEndSolid}
@@ -151,7 +151,7 @@ example: true
151
151
  Option
152
152
  </Drilldown.Option>
153
153
  <Drilldown.Option
154
- id="option3"
154
+ id="renderElementExampleOption3"
155
155
  description="Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa."
156
156
  renderBeforeLabel={IconCheckSolid}
157
157
  renderAfterLabel={IconArrowOpenEndSolid}
@@ -564,13 +564,13 @@ class BackNavigationExample extends React.Component {
564
564
  renderTitle={showTitle && 'Root page'}
565
565
  renderActionLabel={showAction && 'Action!'}
566
566
  >
567
- <Drilldown.Option id="option1" subPageId='secondPage'>
567
+ <Drilldown.Option id="BackNavigationRoot1" subPageId='secondPage'>
568
568
  Option
569
569
  </Drilldown.Option>
570
- <Drilldown.Option id="option2" subPageId='secondPage'>
570
+ <Drilldown.Option id="BackNavigationRoot2" subPageId='secondPage'>
571
571
  Option
572
572
  </Drilldown.Option>
573
- <Drilldown.Option id="option3" subPageId='secondPage'>
573
+ <Drilldown.Option id="BackNavigationRoot3" subPageId='secondPage'>
574
574
  Option
575
575
  </Drilldown.Option>
576
576
  </Drilldown.Page>
@@ -583,9 +583,15 @@ class BackNavigationExample extends React.Component {
583
583
  ? ((prevPageTitle) => prevPageTitle ? `Back to ${prevPageTitle}` : 'Back')
584
584
  : undefined}
585
585
  >
586
- <Drilldown.Option id="option1">Option</Drilldown.Option>
587
- <Drilldown.Option id="option2">Option</Drilldown.Option>
588
- <Drilldown.Option id="option3">Option</Drilldown.Option>
586
+ <Drilldown.Option id="BackNavigationSecondPage1">
587
+ Option
588
+ </Drilldown.Option>
589
+ <Drilldown.Option id="BackNavigationSecondPage2">
590
+ Option
591
+ </Drilldown.Option>
592
+ <Drilldown.Option id="BackNavigationSecondPage3">
593
+ Option
594
+ </Drilldown.Option>
589
595
  </Drilldown.Page>
590
596
  </Drilldown>
591
597
  </Flex.Item>
@@ -997,13 +1003,13 @@ class DisabledExample extends React.Component {
997
1003
  disabled={disabledPages}
998
1004
  >
999
1005
  <Drilldown.Option
1000
- id="option1"
1006
+ id="disabledOption1"
1001
1007
  subPageId='secondPage'
1002
1008
  disabled={disabledOptions}
1003
1009
  >
1004
1010
  Option with subPage navigation
1005
1011
  </Drilldown.Option>
1006
- <Drilldown.Option id="option2" disabled={disabledOptions}>
1012
+ <Drilldown.Option id="disabledOption2" disabled={disabledOptions}>
1007
1013
  Option
1008
1014
  </Drilldown.Option>
1009
1015
  <Drilldown.Group
@@ -1105,13 +1111,13 @@ example: true
1105
1111
  shouldHideOnSelect={false}
1106
1112
  >
1107
1113
  <Drilldown.Page id="root" renderTitle='Should not hide on select'>
1108
- <Drilldown.Option id="option1">
1114
+ <Drilldown.Option id="shouldHideOption1">
1109
1115
  Option
1110
1116
  </Drilldown.Option>
1111
- <Drilldown.Option id="option2">
1117
+ <Drilldown.Option id="shouldHideOption2">
1112
1118
  Option
1113
1119
  </Drilldown.Option>
1114
- <Drilldown.Option id="option3">
1120
+ <Drilldown.Option id="shouldHideOption3">
1115
1121
  Option
1116
1122
  </Drilldown.Option>
1117
1123
  <Drilldown.Option
@@ -1152,14 +1158,14 @@ example: true
1152
1158
  maxHeight="30rem"
1153
1159
  >
1154
1160
  <Drilldown.Page id="Root Page" renderTitle='Root page'>
1155
- <Drilldown.Option id="option1" subPageId='Page Two'>
1161
+ <Drilldown.Option id="navRootOption1" subPageId='Page Two'>
1156
1162
  Go to Page Two
1157
1163
  </Drilldown.Option>
1158
- <Drilldown.Option id="option2" subPageId='Page Three'>
1164
+ <Drilldown.Option id="navRootOption2" subPageId='Page Three'>
1159
1165
  Go to Page Three
1160
1166
  </Drilldown.Option>
1161
1167
  <Drilldown.Option
1162
- id="option3"
1168
+ id="navRootOption3"
1163
1169
  onOptionClick={(_event, args) => {
1164
1170
  console.log(args.pageHistory)
1165
1171
  const nav = args.goToPage('Page Two')
@@ -1172,11 +1178,11 @@ example: true
1172
1178
  </Drilldown.Page>
1173
1179
 
1174
1180
  <Drilldown.Page id="Page Two" renderTitle='Page Two'>
1175
- <Drilldown.Option id="option1" subPageId='Page Three'>
1181
+ <Drilldown.Option id="navPage2Option1" subPageId='Page Three'>
1176
1182
  Go to Page Three
1177
1183
  </Drilldown.Option>
1178
1184
  <Drilldown.Option
1179
- id="option2"
1185
+ id="navPage2Option2"
1180
1186
  onOptionClick={(_event, args) => {
1181
1187
  console.log(args.pageHistory)
1182
1188
  const nav = args.goToPreviousPage()
@@ -1187,7 +1193,7 @@ example: true
1187
1193
  Manual "Back" navigation
1188
1194
  </Drilldown.Option>
1189
1195
  <Drilldown.Option
1190
- id="option3"
1196
+ id="navPage2Option3"
1191
1197
  onOptionClick={(_event, args) => {
1192
1198
  console.log(args.pageHistory)
1193
1199
  const nav = args.goToPage('Page Three')
@@ -1201,7 +1207,7 @@ example: true
1201
1207
 
1202
1208
  <Drilldown.Page id="Page Three" renderTitle='Page Three'>
1203
1209
  <Drilldown.Option
1204
- id="option1"
1210
+ id="navPage3Option1"
1205
1211
  onOptionClick={(_event, args) => {
1206
1212
  console.log(args.pageHistory)
1207
1213
  const nav = args.goToPage(args.pageHistory[0])
@@ -1212,7 +1218,7 @@ example: true
1212
1218
  Manual "Back" navigation
1213
1219
  </Drilldown.Option>
1214
1220
  <Drilldown.Option
1215
- id="option2"
1221
+ id="navPage3Option2"
1216
1222
  onOptionClick={(_event, args) => {
1217
1223
  console.log(args.pageHistory)
1218
1224
  const nav = args.goToPreviousPage()
package/src/Drilldown/index.tsx CHANGED
@@ -1205,9 +1205,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
1205
1205
  style={{ alignSelf: vAlignMap[afterLabelContentVAlign!] }}
1206
1206
  >
1207
1207
  {/* this container span is needed for correct vAlign */}
1208
- <span role="note" id={infoAriaId}>
1209
- {labelInfo}
1210
- </span>
1208
+ <span id={infoAriaId}>{labelInfo}</span>
1211
1209
  </span>
1212
1210
  ) : null}
1213
1211
  </div>