fix(tree,tree-item): replace checkbox with div and a11y attributes #9849

aPreciado88 · 2024-07-24T23:26:07Z

Related Issue: #5615

Summary

Update tree-item component to use check icon / div with applicable a11y attributes instead of checkbox, when selection type is set to ancestors.

aPreciado88 · 2024-07-25T00:10:32Z

@SkyeSeitz @ashetland Could you please take a look at the chromatic build for Tree and see if it looks okay?

… to end tests

aPreciado88 · 2024-07-26T00:26:59Z

After discussing with design, two follow up issues came up.

Update the Card, Tile and any other components where icon is serving as a checkbox, to use --calcite-color-border-input on their checkbox icon's idle state.
Add scale="large" examples to the tree.html demos page.

cc @geospatialem @brittneytewks

…-fields

driskull

Code looks good just have some questions on the a11y and roles.

driskull · 2024-07-26T17:02:30Z

packages/calcite-components/src/components/tree-item/tree-item.tsx

-            checked={this.selected}
+        <div class={CSS.checkboxContainer}>
+          <div
+            aria-checked={toAriaBoolean(this.selected)}


I think this div might need a role (maybe checkbox). I ran the test app through aXe toolbar and it showed this:

@geospatialem do you know what this might need?

I'm not sure we even need aria-checked here because the tree-item role has aria-selected so that should really account for selection to a screen reader right?

@driskull Adding role="checkbox" gets rid of the error above. Do we want to get rid of aria-checked entirely?

cc @geospatialem

From testing, it looks like we should omit this div to only contain the class and tabIndex. For instance:

<div class={CSS.checkboxContainer}> <div class={CSS.checkbox} tabIndex={-1}> <calcite-icon ...

Instead we'd add the contents to the Host tree-item element to announce the selection via aria-live="polite":

<Host aria-checked={this.selectionMode === "ancestors" ? toAriaBoolean(this.selected) : undefined} aria-expanded={this.hasChildren ? toAriaBoolean(isExpanded) : undefined} aria-hidden={toAriaBoolean(hidden)} aria-live="polite" calcite-hydrated-hidden={hidden} role="treeitem" tabIndex={this.disabled ? -1 : 0} >

The above would also remove the aria-selected attribute, which currently contains:

... aria-selected={this.selected ? "true" : showCheckmark ? "false" : undefined} ...

Not sure if there is an impact there, but I didn't notice one in testing.

The above two code changes allow JAWS and NVDA to hear the selections and live changes, in addition to passing all axe conditions.

geospatialem

Have a few considerations to modify the changes at the host level, which also help AT pick up the changes live and fulfill the axe requirements.

packages/calcite-components/src/components/tree-item/tree-item.tsx

geospatialem · 2024-07-29T19:54:02Z

packages/calcite-components/src/components/tree-item/tree-item.tsx

-            checked={this.selected}
+        <div class={CSS.checkboxContainer}>
+          <div
+            aria-checked={toAriaBoolean(this.selected)}


From testing, it looks like we should omit this div to only contain the class and tabIndex. For instance:

<div class={CSS.checkboxContainer}> <div class={CSS.checkbox} tabIndex={-1}> <calcite-icon ...

geospatialem · 2024-07-29T19:56:48Z

packages/calcite-components/src/components/tree-item/tree-item.tsx

-            checked={this.selected}
+        <div class={CSS.checkboxContainer}>
+          <div
+            aria-checked={toAriaBoolean(this.selected)}


Instead we'd add the contents to the Host tree-item element to announce the selection via aria-live="polite":

<Host aria-checked={this.selectionMode === "ancestors" ? toAriaBoolean(this.selected) : undefined} aria-expanded={this.hasChildren ? toAriaBoolean(isExpanded) : undefined} aria-hidden={toAriaBoolean(hidden)} aria-live="polite" calcite-hydrated-hidden={hidden} role="treeitem" tabIndex={this.disabled ? -1 : 0} >

The above would also remove the aria-selected attribute, which currently contains:

... aria-selected={this.selected ? "true" : showCheckmark ? "false" : undefined} ...

Not sure if there is an impact there, but I didn't notice one in testing.

The above two code changes allow JAWS and NVDA to hear the selections and live changes, in addition to passing all axe conditions.

packages/calcite-components/src/components/tree-item/tree-item.tsx

…f github.com:Esri/calcite-design-system into aPreciado88/5615-provide-valid-label-for-form-fields

aPreciado88 · 2024-07-29T20:58:18Z

@geospatialem I made the requested changes, please let me know if this looks okay!

driskull

Almost there! looking good @aPreciado88

packages/calcite-components/src/components/tree-item/tree-item.tsx

driskull · 2024-07-29T21:00:19Z

packages/calcite-components/src/components/tree-item/tree-item.tsx

-          {defaultSlotNode}
-        </label>
+        <div class={CSS.checkboxContainer}>
+          <div class={CSS.checkbox} tabIndex={-1}>


Does this need a tabindex of 1? Are we ever focusing this element?

It looks like it only gets focused on click, should I remove tabIndex?

I think so, whats the reasoning for focusing it?

We apply this css block when focusing the checkbox:

.checkbox:focus { @apply outline-none; color: var(--calcite-color-brand); }

But this focus would only happen when clicking on that element.

Could we apply this style to the checkbox when the tree-item host is focused? Then it would be consistent.

Something like

:host(:focus:not([disabled])) .checkbox{ @apply outline-none; color: var(--calcite-color-brand); }

Might also be nice to have on hover and active as well.

I updated this to apply the focused style when tree-item host is focused.
Regarding the hover state, design previously reviewed this and they don't want any styles applied when items are hovered.

I think this one still needs to be addressed.

Do we need/want the checkbox node to be focusable? (probably not).

Do we need hover/active/focus states on the host that style this? (maybe?)

@aPreciado88 styles look good, but doesn't the tabindex of -1 need to be removed?

@driskull Design reviewed the latest chromatic builds, and asked to remove the focused checkbox state. I pushed an update for that.

driskull · 2024-07-29T21:03:38Z

packages/calcite-components/src/components/tree-item/tree-item.tsx

@@ -280,9 +289,10 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent

    return (
      <Host
+        aria-checked={this.selectionMode === "ancestors" ? toAriaBoolean(this.selected) : undefined}


Just want to confirm aria-checked is ok instead of aria-selected. The treeitem role says either is ok.

Either aria-selected or aria-checked can be used to indicate selection for treeitem elements. Some user interfaces indicate selection with aria-selected in single-select trees and with aria-checked in multi-select trees.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treeitem_role

It seems like depending on the selectionMode it should use either aria-checked (multiple) or aria-selected (single)

@aPreciado88 It looks like based on @driskull comment above, there may be a need for both depending on the selectionMode type, where only one would be present for the selectionMode value.

aPreciado88 · 2024-07-29T23:50:22Z

@driskull I updated with the requested updates 🚀

packages/calcite-components/src/components/tree-item/tree-item.tsx

packages/calcite-components/src/components/tree-item/tree-item.scss

driskull · 2024-07-29T23:54:11Z

packages/calcite-components/src/components/tree-item/tree-item.tsx

-          {defaultSlotNode}
-        </label>
+        <div class={CSS.checkboxContainer}>
+          <div class={CSS.checkbox} tabIndex={-1}>


I think this one still needs to be addressed.

Do we need/want the checkbox node to be focusable? (probably not).

Do we need hover/active/focus states on the host that style this? (maybe?)

…-fields

driskull · 2024-07-30T17:46:50Z

Looks good!

…f github.com:Esri/calcite-design-system into aPreciado88/5615-provide-valid-label-for-form-fields

geospatialem

The below might be WRT the icon package and Windows conflicts. Ignore the contents below, but I'll need additional time to conduct a review as my setup is completely hosed as a result. ☠️

~~Hm, did something happen WRT child tree-items? It doesn't look like the "Grandchild #" tree-items are being depicted in most cases across the demo page.~~

calcite-design-system/packages/calcite-components/src/demos/tree.html

Lines 386 to 407 in 6b69401

    
           <calcite-tree slot="children"> 
        
             <calcite-tree-item label="test item"> 
        
               <span>Grandchild 1</span> 
        
               <calcite-tree slot="children"> 
        
                 <calcite-tree-item label="test item"> 
        
                   <span>Great Grandchild 1</span> 
        
                 </calcite-tree-item> 
        
                 <calcite-tree-item label="test item"> 
        
                   <span>Great Grandchild 2</span> 
        
                 </calcite-tree-item> 
        
                 <calcite-tree-item label="test item"> 
        
                   <span>Great Grandchild 3</span> 
        
                 </calcite-tree-item> 
        
               </calcite-tree> 
        
             </calcite-tree-item> 
        
             <calcite-tree-item label="test item"> 
        
               <span>Grandchild 2</span> 
        
             </calcite-tree-item> 
        
             <calcite-tree-item label="test item"> 
        
               <span>Grandchild 3</span> 
        
             </calcite-tree-item> 
        
           </calcite-tree>

…-fields

github-actions · 2024-08-11T01:55:18Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

…-fields

geospatialem

Resetting my status so we can merge the changes in. Will verify the fixes during the verification process! 💪🏻

…to-monorepo * origin/dev: (37 commits) chore: release next fix(tree,tree-item): replace checkbox with div and a11y attributes (#9849) feat(combobox-item): add `heading` property (deprecates `textLabel`) and add `label` property (#9987) chore: stop requesting review from ben/franco for all PRs (#10040) feat: add close-caption, transcript, flag, and flag-slash (#10039) build(deps): update dependency @cspell/eslint-plugin to v8.13.2 (#10036) build(deps): update angular-cli monorepo to v18.1.4 (#10035) build(deps): clean up ui-icon dependencies (#10024) build: update browserslist db (#10033) docs: update component READMEs (#10034) ci: fix chromatic and pr-semantic check trigger events (#10041) chore: release next fix(label): prevent focusing and toggling elements slotted within a label when a text selection occurs (#9990) build(deps): update dependency @floating-ui/dom to v1.6.9 (#10025) build(deps): update dependency postcss to v8.4.41 (#10027) ci: new version of husky no longer need npx (#10030) build(deps): update dependency lerna to v8.1.8 (#10026) build(deps): update dependency chromatic to v11.7.0 (#9995) build(deps): update dependency eslint-plugin-jsdoc to v48.11.0 (#9997) chore: release next ...

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.31.0</summary> ## [3.31.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.30.0...@esri/calcite-ui-icons@3.31.0) (2024-08-28) ### Features * Add close-caption, transcript, flag, and flag-slash ([#10039](#10039)) ([85c7d69](85c7d69)) * Add layer-connection ([#10067](#10067)) ([46dd2ee](46dd2ee)) ### Bug Fixes * Update close-caption, and transcript ([#10077](#10077)) ([2e86904](2e86904)) </details> <details><summary>@esri/calcite-components: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.1...@esri/calcite-components@2.12.0) (2024-08-28) ### Features * **accordion, accordion-item:** Add component tokens ([#9861](#9861)) ([48f7f08](48f7f08)) * **action, action-bar, action-group, action-menu, action-pad:** Add component tokens ([#10058](#10058)) ([de96c24](de96c24)) * **alert:** Add 'queue' property to prioritize the ordering of alerts when opened ([#10029](#10029)) ([3aa47a4](3aa47a4)) * **combobox-item:** Add `heading` property (deprecates `textLabel`) and add `label` property ([#9987](#9987)) ([90920a0](90920a0)) * **dialog:** Add CSS variables to offset the position ([#9904](#9904)) ([660f0c5](660f0c5)) * **dialog:** Add escapeDisabled property ([#10081](#10081)) ([1ca8fba](1ca8fba)) * **dialog:** Add outsideCloseDisabled property ([#9978](#9978)) ([f1d89b9](f1d89b9)) * **dialog:** Add resizable and dragEnabled properties ([#9804](#9804)) ([e3e499e](e3e499e)) * **icon:** Add component tokens ([#10062](#10062)) ([34d5689](34d5689)) * **input-time-zone:** Display selected time zone country in region mode selection ([#9988](#9988)) ([1575729](1575729)) * **loader:** Add `determinate-value` type ([#9957](#9957)) ([7f21726](7f21726)) * **panel:** Add '--calcite-panel-content-space' style ([#10117](#10117)) ([0e3ebcb](0e3ebcb)) * **table:** Update multiple selection iconography ([#10125](#10125)) ([f2b2016](f2b2016)) * **tooltip:** Allow focusing and clicking on interactive elements within a tooltip ([#9914](#9914)) ([a3c144c](a3c144c)) ### Bug Fixes * **accordion-item:** Align focus styles across browsers ([#9944](#9944)) ([2e29b42](2e29b42)) * **alert:** Properly form a queue of alerts ([#10032](#10032)) ([b24d6ac](b24d6ac)) * **color-picker:** Prevent text selection when using color sliders/field ([#10043](#10043)) ([ab33e4d](ab33e4d)) * **combobox, input-date-picker, input-number, input-text, input-time-picker, input, radio-button-group, segmented-control, select, text-area:** Use toAriaBoolean in aria-invalid attribute to provide valid AT error messaging ([#10079](#10079)) ([78bc096](78bc096)) * **combobox:** Update placeholder-icon color ([#9956](#9956)) ([d916ca4](d916ca4)) * **dialog, flow-item:** Slotted closable panels should not close the component ([#10130](#10130)) ([ce2513d](ce2513d)) * **dialog:** Allow shell to be slotted inside ([#10118](#10118)) ([ea3a6de](ea3a6de)) * **dialog:** Fix escapeDisabled when the escape key is pressed on the panel ([#10097](#10097)) ([9a5f1f1](9a5f1f1)) * Ensure `beforeOpen`/`open` and `beforeClose`/`close` events emit properly ([#9958](#9958)) ([7e2764f](7e2764f)) * **filter:** Fix setFocus method ([#10149](#10149)) ([f4a959a](f4a959a)) * **input-date-picker:** Fix selection for the "bs" and "it-CH" locales ([#9976](#9976)) ([368d9e2](368d9e2)) * **input-date-picker:** Prevent console error when using a lang ([#10162](#10162)) ([e7bf604](e7bf604)) * **input-time-zone:** Translate region names ([#9940](#9940)) ([f975adb](f975adb)) * **input, combobox, input-date-picker, input-number, input-text, input-time-picker, radio-button-group, segmented-control, select, text-area:** Provide clear field error messaging for AT ([#9880](#9880)) ([46ad7d2](46ad7d2)) * **input, input-number, input-text:** No longer set focus when a validation message is clicked ([#10008](#10008)) ([529bb5a](529bb5a)) * **label:** Prevent focusing and toggling elements slotted within a label when a text selection occurs ([#9990](#9990)) ([49d6ae1](49d6ae1)) * **list-item:** Prevent scrolling when item is focused. ([#9948](#9948)) ([eab1e06](eab1e06)) * **panel:** Define heading and description line height ([#10085](#10085)) ([5478eb9](5478eb9)) * **slider:** Prevent text selection when using the slider ([#10073](#10073)) ([04bf325](04bf325)) * **slider:** Resolve step & snap floating point precision ([#10148](#10148)) ([613bc47](613bc47)) * **stepper-item:** Update component to take full width when parent's layout is "vertical" ([#10009](#10009)) ([03a5a30](03a5a30)) * **tree,tree-item:** Replace checkbox with div and a11y attributes ([#9849](#9849)) ([b1ac951](b1ac951)) ### Performance Improvements * **input-time-zone:** Improve memory footprint by leveraging browser cache and releasing utils after their use ([#9945](#9945)) ([a3d2141](a3d2141)) ### Reverts * "build(deps): remove unused cheerio package ([#10049](#10049))" ([#10057](#10057)) ([d271ab1](d271ab1)) * Add stories ([#10131](#10131)) ([e3a6590](e3a6590)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.31.0-next.4 to 3.31.0 </details> <details><summary>@esri/calcite-components-angular: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.1...@esri/calcite-components-angular@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> <details><summary>@esri/calcite-components-react: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.1...@esri/calcite-components-react@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.31.0</summary> ## [3.31.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.30.0...@esri/calcite-ui-icons@3.31.0) (2024-08-28) ### Features * Add close-caption, transcript, flag, and flag-slash ([#10039](#10039)) ([85c7d69](85c7d69)) * Add layer-connection ([#10067](#10067)) ([46dd2ee](46dd2ee)) ### Bug Fixes * Update close-caption, and transcript ([#10077](#10077)) ([2e86904](2e86904)) </details> <details><summary>@esri/calcite-components: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.1...@esri/calcite-components@2.12.0) (2024-08-28) ### Features * **accordion, accordion-item:** Add component tokens ([#9861](#9861)) ([48f7f08](48f7f08)) * **action, action-bar, action-group, action-menu, action-pad:** Add component tokens ([#10058](#10058)) ([de96c24](de96c24)) * **alert:** Add 'queue' property to prioritize the ordering of alerts when opened ([#10029](#10029)) ([3aa47a4](3aa47a4)) * **combobox-item:** Add `heading` property (deprecates `textLabel`) and add `label` property ([#9987](#9987)) ([90920a0](90920a0)) * **dialog:** Add CSS variables to offset the position ([#9904](#9904)) ([660f0c5](660f0c5)) * **dialog:** Add escapeDisabled property ([#10081](#10081)) ([1ca8fba](1ca8fba)) * **dialog:** Add outsideCloseDisabled property ([#9978](#9978)) ([f1d89b9](f1d89b9)) * **dialog:** Add resizable and dragEnabled properties ([#9804](#9804)) ([e3e499e](e3e499e)) * **icon:** Add component tokens ([#10062](#10062)) ([34d5689](34d5689)) * **input-time-zone:** Display selected time zone country in region mode selection ([#9988](#9988)) ([1575729](1575729)) * **loader:** Add `determinate-value` type ([#9957](#9957)) ([7f21726](7f21726)) * **panel:** Add '--calcite-panel-content-space' style ([#10117](#10117)) ([0e3ebcb](0e3ebcb)) * **table:** Update multiple selection iconography ([#10125](#10125)) ([f2b2016](f2b2016)) * **tooltip:** Allow focusing and clicking on interactive elements within a tooltip ([#9914](#9914)) ([a3c144c](a3c144c)) ### Bug Fixes * **accordion-item:** Align focus styles across browsers ([#9944](#9944)) ([2e29b42](2e29b42)) * **alert:** Properly form a queue of alerts ([#10032](#10032)) ([b24d6ac](b24d6ac)) * **color-picker:** Prevent text selection when using color sliders/field ([#10043](#10043)) ([ab33e4d](ab33e4d)) * **combobox, input-date-picker, input-number, input-text, input-time-picker, input, radio-button-group, segmented-control, select, text-area:** Use toAriaBoolean in aria-invalid attribute to provide valid AT error messaging ([#10079](#10079)) ([78bc096](78bc096)) * **combobox:** Update placeholder-icon color ([#9956](#9956)) ([d916ca4](d916ca4)) * **dialog, flow-item:** Slotted closable panels should not close the component ([#10130](#10130)) ([ce2513d](ce2513d)) * **dialog:** Allow shell to be slotted inside ([#10118](#10118)) ([ea3a6de](ea3a6de)) * **dialog:** Fix escapeDisabled when the escape key is pressed on the panel ([#10097](#10097)) ([9a5f1f1](9a5f1f1)) * Ensure `beforeOpen`/`open` and `beforeClose`/`close` events emit properly ([#9958](#9958)) ([7e2764f](7e2764f)) * **filter:** Fix setFocus method ([#10149](#10149)) ([f4a959a](f4a959a)) * **input-date-picker:** Fix selection for the "bs" and "it-CH" locales ([#9976](#9976)) ([368d9e2](368d9e2)) * **input-date-picker:** Prevent console error when using a lang ([#10162](#10162)) ([e7bf604](e7bf604)) * **input-time-zone:** Translate region names ([#9940](#9940)) ([f975adb](f975adb)) * **input, combobox, input-date-picker, input-number, input-text, input-time-picker, radio-button-group, segmented-control, select, text-area:** Provide clear field error messaging for AT ([#9880](#9880)) ([46ad7d2](46ad7d2)) * **input, input-number, input-text:** No longer set focus when a validation message is clicked ([#10008](#10008)) ([529bb5a](529bb5a)) * **label:** Prevent focusing and toggling elements slotted within a label when a text selection occurs ([#9990](#9990)) ([49d6ae1](49d6ae1)) * **list-item:** Prevent scrolling when item is focused. ([#9948](#9948)) ([eab1e06](eab1e06)) * **panel:** Define heading and description line height ([#10085](#10085)) ([5478eb9](5478eb9)) * **slider:** Prevent text selection when using the slider ([#10073](#10073)) ([04bf325](04bf325)) * **slider:** Resolve step & snap floating point precision ([#10148](#10148)) ([613bc47](613bc47)) * **stepper-item:** Update component to take full width when parent's layout is "vertical" ([#10009](#10009)) ([03a5a30](03a5a30)) * **tree,tree-item:** Replace checkbox with div and a11y attributes ([#9849](#9849)) ([b1ac951](b1ac951)) ### Performance Improvements * **input-time-zone:** Improve memory footprint by leveraging browser cache and releasing utils after their use ([#9945](#9945)) ([a3d2141](a3d2141)) ### Reverts * "build(deps): remove unused cheerio package ([#10049](#10049))" ([#10057](#10057)) ([d271ab1](d271ab1)) * Add stories ([#10131](#10131)) ([e3a6590](e3a6590)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.31.0-next.4 to 3.31.0 </details> <details><summary>@esri/calcite-components-angular: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.1...@esri/calcite-components-angular@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> <details><summary>@esri/calcite-components-react: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.1...@esri/calcite-components-react@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> **Related Issue:** # ## Summary Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

aPreciado88 added 2 commits July 24, 2024 09:31

fix(tree-item): provide a valid a11y label for form fields

8462d8b

fix(tree,tree-item): provide a valid a11y label for form fields

6ea4dd3

github-actions bot assigned aPreciado88 Jul 24, 2024

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jul 24, 2024

aPreciado88 added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jul 24, 2024

aPreciado88 added this to the 2024-07-30 - Jul Release milestone Jul 24, 2024

fix(tree,tree-item): add label prop to storybook tests

7bf7434

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 25, 2024

fix(tree,tree-item): update indeterminate state checkbox icon and end…

cda50ab

… to end tests

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 25, 2024

fix(tree,tree-item): remove checkbox on hover css

8bf68f3

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 25, 2024

Merge branch 'dev' into aPreciado88/5615-provide-valid-label-for-form…

3cbb666

…-fields

driskull reviewed Jul 26, 2024

View reviewed changes

geospatialem requested changes Jul 29, 2024

View reviewed changes

aPreciado88 added 2 commits July 29, 2024 13:55

fix(tree-item): update a11y props and end to end test

e3c3bb0

Merge branch 'aPreciado88/5615-provide-valid-label-for-form-fields' o…

eee773b

…f github.com:Esri/calcite-design-system into aPreciado88/5615-provide-valid-label-for-form-fields

aPreciado88 requested a review from geospatialem July 29, 2024 20:57

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 29, 2024

driskull requested changes Jul 29, 2024

View reviewed changes

fix(tree-item): add aria-selected or aria-checked based on selectionMode

f0053a1

driskull reviewed Jul 29, 2024

View reviewed changes

aPreciado88 added 2 commits July 30, 2024 10:41

fix(tree-item): update end to end tests

c60efd7

Merge branch 'dev' into aPreciado88/5615-provide-valid-label-for-form…

da40476

…-fields

aPreciado88 added 2 commits July 30, 2024 11:41

fix(tree-item): remove focused checkbox styling

bd3f229

Merge branch 'aPreciado88/5615-provide-valid-label-for-form-fields' o…

5fe1cfc

…f github.com:Esri/calcite-design-system into aPreciado88/5615-provide-valid-label-for-form-fields

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 30, 2024

fix(tree-item): merge dev

6b69401

aPreciado88 added skip visual snapshots Pull requests that do not need visual regression testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 30, 2024

geospatialem reviewed Aug 1, 2024

View reviewed changes

Merge branch 'dev' into aPreciado88/5615-provide-valid-label-for-form…

d8fda37

…-fields

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Aug 11, 2024

Merge branch 'dev' into aPreciado88/5615-provide-valid-label-for-form…

ca0770a

…-fields

geospatialem self-requested a review August 12, 2024 23:18

geospatialem approved these changes Aug 12, 2024

View reviewed changes

aPreciado88 merged commit b1ac951 into dev Aug 12, 2024
9 checks passed

aPreciado88 deleted the aPreciado88/5615-provide-valid-label-for-form-fields branch August 12, 2024 23:20

geospatialem mentioned this pull request Aug 13, 2024

Tree: update selection affordance in ancestors mode #8227

Closed

6 tasks

geospatialem added the visual changes Issues with visual changes that are added for consistency, but are not backwards compatible. label Aug 13, 2024

benelan mentioned this pull request Aug 28, 2024

chore: release main #10171

Merged

benelan mentioned this pull request Aug 28, 2024

chore: release main (#10171) #10172

Merged

benelan mentioned this pull request Aug 28, 2024

chore: release main (#10171) #10173

Closed

calcite-admin mentioned this pull request Sep 30, 2024

chore: release main #10457

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(tree,tree-item): replace checkbox with div and a11y attributes #9849

fix(tree,tree-item): replace checkbox with div and a11y attributes #9849

aPreciado88 commented Jul 24, 2024

aPreciado88 commented Jul 25, 2024

aPreciado88 commented Jul 26, 2024

driskull left a comment

driskull Jul 26, 2024

aPreciado88 Jul 29, 2024

geospatialem Jul 29, 2024

geospatialem Jul 29, 2024

geospatialem left a comment

geospatialem Jul 29, 2024

geospatialem Jul 29, 2024

aPreciado88 commented Jul 29, 2024

driskull left a comment

driskull Jul 29, 2024

aPreciado88 Jul 29, 2024

driskull Jul 29, 2024

aPreciado88 Jul 29, 2024

driskull Jul 29, 2024

driskull Jul 29, 2024

aPreciado88 Jul 29, 2024

driskull Jul 29, 2024

driskull Jul 29, 2024

aPreciado88 Jul 30, 2024

driskull Jul 29, 2024

geospatialem Jul 29, 2024

aPreciado88 commented Jul 29, 2024

driskull Jul 29, 2024

driskull commented Jul 30, 2024

geospatialem left a comment •

edited

Loading

github-actions bot commented Aug 11, 2024

geospatialem left a comment

	<calcite-tree slot="children">
	<calcite-tree-item label="test item">
	<span>Grandchild 1</span>
	<calcite-tree slot="children">
	<calcite-tree-item label="test item">
	<span>Great Grandchild 1</span>
	</calcite-tree-item>
	<calcite-tree-item label="test item">
	<span>Great Grandchild 2</span>
	</calcite-tree-item>
	<calcite-tree-item label="test item">
	<span>Great Grandchild 3</span>
	</calcite-tree-item>
	</calcite-tree>
	</calcite-tree-item>
	<calcite-tree-item label="test item">
	<span>Grandchild 2</span>
	</calcite-tree-item>
	<calcite-tree-item label="test item">
	<span>Grandchild 3</span>
	</calcite-tree-item>
	</calcite-tree>

fix(tree,tree-item): replace checkbox with div and a11y attributes #9849

fix(tree,tree-item): replace checkbox with div and a11y attributes #9849

Conversation

aPreciado88 commented Jul 24, 2024

Summary

aPreciado88 commented Jul 25, 2024

aPreciado88 commented Jul 26, 2024

driskull left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

geospatialem left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aPreciado88 commented Jul 29, 2024

driskull left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aPreciado88 commented Jul 29, 2024

Choose a reason for hiding this comment

driskull commented Jul 30, 2024

geospatialem left a comment • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Aug 11, 2024

geospatialem left a comment

Choose a reason for hiding this comment

geospatialem left a comment •

edited

Loading