From 7536fbda91a0c2887c200b7208dc8de3feb35bf8 Mon Sep 17 00:00:00 2001
From: Vladimir Kharlampidi <nolimits4web@gmail.com>
Date: Wed, 10 Mar 2021 16:28:39 +0300
Subject: [PATCH] feat(navigation): set `disabled` prop on nav element if it is
 a `<button>` element

fixes #4312
---
 src/components/navigation/navigation.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
index 423f7b270..3800e90a0 100644
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@@ -2,19 +2,24 @@ import $ from '../../utils/dom';
 import { extend, bindModuleMethods } from '../../utils/utils';
 
 const Navigation = {
+  toggleEl($el, disabled) {
+    $el[disabled ? 'addClass' : 'removeClass'](this.params.navigation.disabledClass);
+    if ($el[0] && $el[0].tagName === 'BUTTON') $el[0].disabled = disabled;
+  },
   update() {
     // Update Navigation Buttons
     const swiper = this;
     const params = swiper.params.navigation;
+    const toggleEl = swiper.navigation.toggleEl;
 
     if (swiper.params.loop) return;
     const { $nextEl, $prevEl } = swiper.navigation;
 
     if ($prevEl && $prevEl.length > 0) {
       if (swiper.isBeginning) {
-        $prevEl.addClass(params.disabledClass);
+        toggleEl($prevEl, true);
       } else {
-        $prevEl.removeClass(params.disabledClass);
+        toggleEl($prevEl, false);
       }
       $prevEl[swiper.params.watchOverflow && swiper.isLocked ? 'addClass' : 'removeClass'](
         params.lockClass,
@@ -22,9 +27,9 @@ const Navigation = {
     }
     if ($nextEl && $nextEl.length > 0) {
       if (swiper.isEnd) {
-        $nextEl.addClass(params.disabledClass);
+        toggleEl($nextEl, true);
       } else {
-        $nextEl.removeClass(params.disabledClass);
+        toggleEl($nextEl, false);
       }
       $nextEl[swiper.params.watchOverflow && swiper.isLocked ? 'addClass' : 'removeClass'](
         params.lockClass,