fix(radio-button): focuses first focusable radio-button element in group. by anveshmekala · Pull Request #7152 · Esri/calcite-design-system

anveshmekala · 2023-06-07T22:23:30Z

Related Issue: #7113

Summary

This PR will focus the first focusable calcite-radio-button when the user Tab in to the group.

…ocusable

eriklharper

Could you try updating other radio-buttons in a group in connectedCallback instead? If you can get that to work, let's also add a test for this that ensures the focus behavior is correct when adding or removing buttons.

…ocusable

eriklharper

This looks grand! Thanks for moving that logic into the connected callbacks :)

…ocusable

eriklharper

This looks excellent, thanks for adding those extra tests! Just remove those console logs and we should be good to go :)

jcfranco

⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪
⚪🔘⚪⚪⚪🔘⚪🔘🔘🔘⚪⚪🔘🔘🔘⚪🔘🔘🔘🔘⚪🔘⚪
⚪🔘🔘⚪⚪🔘⚪⚪🔘⚪⚪🔘⚪⚪⚪⚪🔘⚪⚪⚪⚪🔘⚪
⚪🔘⚪🔘⚪🔘⚪⚪🔘⚪⚪🔘⚪⚪⚪⚪🔘🔘🔘⚪⚪🔘⚪
⚪🔘⚪⚪🔘🔘⚪⚪🔘⚪⚪🔘⚪⚪⚪⚪🔘⚪⚪⚪⚪⚪⚪
⚪🔘⚪⚪⚪🔘⚪🔘🔘🔘⚪⚪🔘🔘🔘⚪🔘🔘🔘🔘⚪🔘⚪
⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪

jcfranco · 2023-06-20T23:36:48Z

@@ -94,6 +100,11 @@ export class RadioButton
  /** When `true`, the component is not displayed and is not focusable or checkable. */
  @Prop({ reflect: true }) hidden = false;


Sidebar: we should revisit custom hidden props since it's a reflected prop on HTMLElement.

jcfranco · 2023-06-20T23:40:07Z

+  isFocusable = (): boolean => {
    const radioButtons = this.queryButtons();
-    return !radioButtons.some((radioButton) => radioButton.checked) && radioButtons[0] === this.el;
+    const firstFocusable = radioButtons.find((radiobutton) => !radiobutton.disabled);


radiobutton ➡️ radioButton

jcfranco · 2023-06-20T23:41:22Z

      return undefined;
    }
-    return this.checked || this.isDefaultSelectable() ? 0 : -1;
+    if (this.checked || this.isFocusable()) {


No love for the previous ternary? 😭

Oops, there was some extra code in if block earlier. Will revert to ternary.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.4.3</summary> ## [1.4.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.4.2...@esri/calcite-components@1.4.3) (2023-06-26) ### Bug Fixes * **accordion-item:** support items working across shadowDOM ([#7035](#7035)) ([6378e35](6378e35)), closes [#6167](#6167) * **alert:** Sets autoCloseDuration to "medium" by default ([#7157](#7157)) ([1b9a8ed](1b9a8ed)) * **alert:** Update alert queue when an alert is removed from the DOM ([#7189](#7189)) ([edd59eb](edd59eb)) * **combobox, dropdown, input-date-picker, input-time-picker, popover, tooltip:** Prevent repositioning from affecting other floating components ([#7178](#7178)) ([1b02dae](1b02dae)) * Ensure mouse events are blocked for disabled components in Firefox ([#7107](#7107)) ([271d985](271d985)) * **input-date-picker:** Fix showing the placeholder when resetting the value ([#7156](#7156)) ([8d60ffd](8d60ffd)) * **input, input-number:** Allows numeric characters. ([#7213](#7213)) ([739f0af](739f0af)) * **input,input-number:** Allow typing decimal separator in firefox for arabic locale ([#7173](#7173)) ([595e6f2](595e6f2)) * **list:** No longer has incorrect border width ([a810943](a810943)) * **list:** Update selectedItems property on all item selection changes ([#7204](#7204)) ([da048f6](da048f6)) * **menu-item:** Ensure correct order of rendered icons ([#7098](#7098)) ([fd344e9](fd344e9)), closes [#7097](#7097) * **navigation:** Label is no longer a required property ([#7084](#7084)) ([ba2bd4d](ba2bd4d)) * **radio-button-group:** No longer focus first radio button on label click and adds `setFocus` method. ([#7050](#7050)) ([4267b8c](4267b8c)) * **radio-button, radio-button-group:** Prevent emitting events when selecting a checked radio button ([#7102](#7102)) ([77fcc81](77fcc81)) * **radio-button:** Focuses first focusable radio-button element in group. ([#7152](#7152)) ([dd7ec60](dd7ec60)) * **scrim:** Responsively set the scale of the loading spinner ([#7182](#7182)) ([72c5943](72c5943)) * **tooltip:** Improve component timing ([#7172](#7172)) ([106f5d2](106f5d2)) * **tree-item:** Ensure expanded tree-item is displayed when expanded and made visible ([#7216](#7216)) ([3c0fbf5](3c0fbf5)) <details><summary>@esri/calcite-components-react: 1.4.3</summary> ## [1.4.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.4.2...@esri/calcite-components-react@1.4.3) (2023-06-26) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.4.3-next.7 to 1.4.3 </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> Co-authored-by: Ben Elan <no-reply@benelan.dev>

…issue-template-checkbox * origin/master: (32 commits) ci: double build cc when publishing to workaround stencil types bug (#7227) build: bump package versions back to 1.5.0-next.5 (#7228) chore: release latest (#7144) ci: hardcode release version due to reverting feat (#7225) fix(tree-item): ensure expanded tree-item is displayed when expanded and made visible (#7216) ci(release-please): pin action version and allow manually running action (#7222) fix(input, input-number): allows numeric characters. (#7213) build(t9n): generate json file containing t9n values (#7214) chore: release next fix(combobox, dropdown, input-date-picker, input-time-picker, popover, tooltip): Prevent repositioning from affecting other floating components (#7178) build: update browserslist db (#7192) build: ignore node_modules and build outputs when watching for changes during stencil tests (#7209) test: set up `disabled` helper to run a test per use case (#7089) ci: set design complete label conditionals (#7206) chore: release next fix(list): update selectedItems property on all item selection changes (#7204) chore: fix sorting logic for t9nmanifest entries (#7203) fix(radio-button): focuses first focusable radio-button element in group. (#7152) chore: release next fix(alert): update alert queue when an alert is removed from the DOM (#7189) ...

forceUpdate other radiobuttons in group

7e51b41

github-actions Bot assigned anveshmekala Jun 7, 2023

github-actions Bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jun 7, 2023

anveshmekala changed the title ~~fix(radio-button): focuses first focusable radio-button element in group.~~ fix(radio-button): focuses first focusable radio-button element in group. Jun 7, 2023

anveshmekala added 2 commits June 7, 2023 17:33

Merge branch 'master' into anveshmekala/7113-fix-radio-button-first-f…

1900ca3

…ocusable

remove calcite-radio-group from tests

1e2c62d

anveshmekala commented Jun 7, 2023

View reviewed changes

Comment thread packages/calcite-components/src/components/radio-button/radio-button.tsx Outdated

anveshmekala added skip visual snapshots Pull requests that do not need visual regression testing. pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed skip visual snapshots Pull requests that do not need visual regression testing. labels Jun 8, 2023

anveshmekala requested a review from jcfranco June 14, 2023 21:45

anveshmekala marked this pull request as ready for review June 14, 2023 21:45

anveshmekala requested a review from a team as a code owner June 14, 2023 21:45

eriklharper reviewed Jun 14, 2023

View reviewed changes

Comment thread packages/calcite-components/src/components/radio-button/radio-button.tsx Outdated

eriklharper requested changes Jun 14, 2023

View reviewed changes

anveshmekala added 2 commits June 16, 2023 12:09

feedback changes and add tests

4912760

Merge branch 'master' into anveshmekala/7113-fix-radio-button-first-f…

5356c56

…ocusable

anveshmekala marked this pull request as draft June 16, 2023 17:10

eriklharper reviewed Jun 16, 2023

View reviewed changes

Comment thread packages/calcite-components/src/components/radio-button/radio-button.tsx

eriklharper approved these changes Jun 16, 2023

View reviewed changes

anveshmekala added 4 commits June 16, 2023 15:21

Merge branch 'master' into anveshmekala/7113-fix-radio-button-first-f…

4ac4434

…ocusable

refactor

9beb381

refactor e2e tests

a943ebe

Merge branch 'master' into anveshmekala/7113-fix-radio-button-first-f…

62ff46a

…ocusable

anveshmekala 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 Jun 20, 2023

anveshmekala marked this pull request as ready for review June 20, 2023 16:52

eriklharper approved these changes Jun 20, 2023

View reviewed changes

Comment thread packages/calcite-components/src/components/radio-button/radio-button.tsx Outdated

Comment thread packages/calcite-components/src/components/radio-button/radio-button.tsx Outdated

remove console.log statements

82dadee

anveshmekala removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jun 20, 2023

anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jun 20, 2023

jcfranco approved these changes Jun 20, 2023

View reviewed changes

fix typos and refactor if else with ternary

4926b92

anveshmekala 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 Jun 21, 2023

anveshmekala merged commit dd7ec60 into master Jun 21, 2023

anveshmekala deleted the anveshmekala/7113-fix-radio-button-first-focusable branch June 21, 2023 15:45

github-actions Bot added this to the 2023 June patch priorities milestone Jun 21, 2023

calcite-admin mentioned this pull request Jun 21, 2023

chore: release latest #7144

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(radio-button): focuses first focusable radio-button element in group.#7152

fix(radio-button): focuses first focusable radio-button element in group.#7152
anveshmekala merged 11 commits intomasterfrom
anveshmekala/7113-fix-radio-button-first-focusable

anveshmekala commented Jun 7, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

eriklharper left a comment

Uh oh!

Uh oh!

eriklharper left a comment

Uh oh!

eriklharper left a comment

Uh oh!

Uh oh!

Uh oh!

jcfranco left a comment

Uh oh!

jcfranco Jun 20, 2023

Uh oh!

jcfranco Jun 20, 2023

Uh oh!

jcfranco Jun 20, 2023

Uh oh!

anveshmekala Jun 21, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -94,6 +100,11 @@ export class RadioButton
		/** When `true`, the component is not displayed and is not focusable or checkable. */
		@Prop({ reflect: true }) hidden = false;

Conversation

anveshmekala commented Jun 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

Uh oh!

Uh oh!

eriklharper left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

eriklharper left a comment

Choose a reason for hiding this comment

Uh oh!

eriklharper left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jcfranco left a comment

Choose a reason for hiding this comment

Uh oh!

jcfranco Jun 20, 2023

Choose a reason for hiding this comment

Uh oh!

jcfranco Jun 20, 2023

Choose a reason for hiding this comment

Uh oh!

jcfranco Jun 20, 2023

Choose a reason for hiding this comment

Uh oh!

anveshmekala Jun 21, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

anveshmekala commented Jun 7, 2023 •

edited

Loading