fix(material/tabs): prevent default keyboard actions on disabled links #27274

crisbeto · 2023-06-10T07:01:19Z

Fixes that while we were preventing clicks on disabled links using pointer-events, we didn't prevent keyboard events.

Fixes that while we were preventing clicks on disabled links using `pointer-events`, we didn't prevent keyboard events. Fixes angular#27270.

crisbeto · 2023-06-10T07:01:38Z

src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -73,31 +73,6 @@ describe('MDC-based MatTabNavBar', () => {
      expect(tabLinkElements[1].classList.contains('mdc-tab--active')).toBeTruthy();
    });

-    it('should add the disabled class if disabled', () => {


This functionality was covered in another test so I deleted this one.

naaajii · 2023-06-10T09:49:12Z

src/material/tabs/tab-nav-bar/tab-nav-bar.ts

-    if (this._tabNavBar.tabPanel && event.keyCode === SPACE) {
+    if (this.disabled && (event.keyCode === SPACE || event.keyCode === ENTER)) {
+      event.preventDefault();
+    } else if (this._tabNavBar.tabPanel && event.keyCode === SPACE) {


we can switch to focused tab when we press Enter key too? Shouldn't it be like:

else if (this._tabNavBar.tabPanel && (event.keyCode === SPACE || event.keyCode === ENTER))

The enter condition is in there since some browsers do clicks both on enter and space, IIRC.

got it, ig. I tried to navigate while tab being focused & pressing enter but it didn't navigate me, although it worked when I used spacebar only. Chrome 113.0.5672.92, Firefox 113.0.1 nor Chrome 104.0.5112.101.

#27274) Fixes that while we were preventing clicks on disabled links using `pointer-events`, we didn't prevent keyboard events. Fixes #27270. (cherry picked from commit 2fbb81d)

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/cdk](https://github.com/angular/components) | dependencies | minor | [`16.0.3` -> `16.1.1`](https://renovatebot.com/diffs/npm/@angular%2fcdk/16.0.3/16.1.1) | | [@angular/material](https://github.com/angular/components) | dependencies | minor | [`16.0.3` -> `16.1.1`](https://renovatebot.com/diffs/npm/@angular%2fmaterial/16.0.3/16.1.1) | --- ### Release Notes <details> <summary>angular/components</summary> ### [`v16.1.1`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#1611-lace-enigma-2023-06-14) [Compare Source](angular/components@16.1.0...16.1.1)  ### [`v16.1.0`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#1610-epoxy-proxy-2023-06-13) [Compare Source](angular/components@16.0.4...16.1.0) ##### material | Commit | Type | Description | | -- | -- | -- | | [3703cc912c](angular/components@3703cc9) | feat | **select:** add input to control the panel width ([#27188](angular/components#27188)) | | [9aee2ee77f](angular/components@9aee2ee) | feat | **tabs:** synchronize ink bar animation with tab ([#27056](angular/components#27056)) | | [0028c6833f](angular/components@0028c68) | feat | **tooltip:** add isDisabled method to harness ([#27038](angular/components#27038)) | | [0a58155814](angular/components@0a58155) | fix | **form-field:** ensure prefix and suffix are on top of other content ([#27050](angular/components#27050)) | | [764a68f980](angular/components@764a68f) | fix | **form-field:** ensure prefix and suffix are on top of other content ([#27050](angular/components#27050)) | | [cda36e9a7a](angular/components@cda36e9) | fix | **form-field:** make notch sizing more reliable ([#26028](angular/components#26028)) | | [57adfe4fbf](angular/components@57adfe4) | fix | **select:** incorrect position if initialized late ([#27198](angular/components#27198)) | | [bb6f61b874](angular/components@bb6f61b) | fix | **select:** provide horizontal fallback positions ([#27267](angular/components#27267)) | | [feaaab9dc9](angular/components@feaaab9) | fix | **slider:** fix cd for sliders w/ form controls ([#27250](angular/components#27250)) | | [1cb210bf32](angular/components@1cb210b) | fix | **stepper:** two-way binding for selectedIndex ([#27232](angular/components#27232)) | | [7400746646](angular/components@7400746) | fix | **tabs:** prevent default keyboard actions on disabled links ([#27274](angular/components#27274)) | | [44b57a5b26](angular/components@44b57a5) | fix | **tooltip:** change tooltip to use MDC's token API | ##### material-experimental | Commit | Type | Description | | -- | -- | -- | | [aec23ac348](angular/components@aec23ac) | feat | **theming:** add first part of token-based theming API ([#27000](angular/components#27000)) | ##### multiple | Commit | Type | Description | | -- | -- | -- | | [33a9543f61](angular/components@33a9543) | fix | fix VoiceOver confused by Select/Autocomplete's ARIA semantics ([#26861](angular/components#26861)) |  ### [`v16.0.4`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#1604-zirconium-zebra-2023-06-08) [Compare Source](angular/components@16.0.3...16.0.4) ##### material | Commit | Type | Description | | -- | -- | -- | | [f595c783c](angular/components@f595c78) | fix | **core:** Fix MacOS Hover feature compatibility with optgroup ([#27239](angular/components#27239)) | | [8fafa88ef](angular/components@8fafa88) | fix | **slider:** fix track getting out of sync ([#27218](angular/components#27218)) | | [c19bd4c77](angular/components@c19bd4c) | fix | **slider:** handle contextmenu events ([#27227](angular/components#27227)) | | [52a80fef1](angular/components@52a80fe) | fix | **tabs:** default stretchTabs value not picked up by nav bar ([#27212](angular/components#27212)) | | [b6a9895a0](angular/components@b6a9895) | fix | **tabs:** tab header is clickable if its disable ([#27091](angular/components#27091)) |  </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1929 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

angular-automatic-lock-bot · 2023-07-24T00:10:23Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

fix(material/tabs): prevent default keyboard actions on disabled links

298b3de

Fixes that while we were preventing clicks on disabled links using `pointer-events`, we didn't prevent keyboard events. Fixes angular#27270.

crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release labels Jun 10, 2023

crisbeto commented Jun 10, 2023

View reviewed changes

crisbeto requested review from mmalerba and andrewseguin June 10, 2023 07:02

naaajii reviewed Jun 10, 2023

View reviewed changes

andrewseguin approved these changes Jun 10, 2023

View reviewed changes

crisbeto added the action: merge The PR is ready for merge by the caretaker label Jun 10, 2023

crisbeto merged commit 2fbb81d into angular:main Jun 10, 2023
27 checks passed

crisbeto self-assigned this Jun 23, 2023

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(material/tabs): prevent default keyboard actions on disabled links #27274

fix(material/tabs): prevent default keyboard actions on disabled links #27274

crisbeto commented Jun 10, 2023

crisbeto Jun 10, 2023

naaajii Jun 10, 2023

crisbeto Jun 10, 2023

naaajii Jun 10, 2023 •

edited

angular-automatic-lock-bot bot commented Jul 24, 2023

fix(material/tabs): prevent default keyboard actions on disabled links #27274

fix(material/tabs): prevent default keyboard actions on disabled links #27274

Conversation

crisbeto commented Jun 10, 2023

crisbeto Jun 10, 2023

Choose a reason for hiding this comment

naaajii Jun 10, 2023

Choose a reason for hiding this comment

crisbeto Jun 10, 2023

Choose a reason for hiding this comment

naaajii Jun 10, 2023 • edited

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Jul 24, 2023

naaajii Jun 10, 2023 •

edited