fix: Update button titles to aria-labels for improved accessibility in BpkNudger (#4228)

Co-authored-by: Tom Brown <tom.brown@skyscanner.net>

Author: tombrowndev

packages/bpk-component-nudger/src/BpkNudger.tsx

@@ -122,7 +122,7 @@ const BpkNudger = ({
             inputRef.current && setNativeValue(inputRef.current, newValue);
           }}
           disabled={minButtonDisabled}
-          title={decreaseButtonLabel}
+          aria-label={decreaseButtonLabel}
           aria-controls={id}
         >
           <AlignedMinusIcon />
@@ -166,7 +166,7 @@ const BpkNudger = ({
             inputRef.current && setNativeValue(inputRef.current, newValue);
           }}
           disabled={maxButtonDisabled}
-          title={increaseButtonLabel}
+          aria-label={increaseButtonLabel}
           aria-controls={id}
         >
           <AlignedPlusIcon />

packages/bpk-component-nudger/src/__snapshots__/BpkNudger-test.tsx.snap

@@ -10,9 +10,9 @@ exports[`BpkNudger should render as an on dark nudger correctly 1`] = `
     >
       <button
         aria-controls="nudger"
+        aria-label="Decrease"
         class="bpk-button bpk-button--icon-only bpk-button--secondary-on-dark"
         data-backpack-ds-component="Button"
-        title="Decrease"
         type="button"
       >
         <span
@@ -43,9 +43,9 @@ exports[`BpkNudger should render as an on dark nudger correctly 1`] = `
       />
       <button
         aria-controls="nudger"
+        aria-label="Increase"
         class="bpk-button bpk-button--icon-only bpk-button--secondary-on-dark"
         data-backpack-ds-component="Button"
-        title="Increase"
         type="button"
       >
         <span
@@ -79,9 +79,9 @@ exports[`BpkNudger should render correctly 1`] = `
     >
       <button
         aria-controls="nudger"
+        aria-label="Decrease"
         class="bpk-button bpk-button--icon-only bpk-button--secondary"
         data-backpack-ds-component="Button"
-        title="Decrease"
         type="button"
       >
         <span
@@ -112,9 +112,9 @@ exports[`BpkNudger should render correctly 1`] = `
       />
       <button
         aria-controls="nudger"
+        aria-label="Increase"
         class="bpk-button bpk-button--icon-only bpk-button--secondary"
         data-backpack-ds-component="Button"
-        title="Increase"
         type="button"
       >
         <span
@@ -148,10 +148,10 @@ exports[`BpkNudger should render correctly with a value < min 1`] = `
     >
       <button
         aria-controls="nudger"
+        aria-label="Decrease"
         class="bpk-button bpk-button--icon-only bpk-button--secondary"
         data-backpack-ds-component="Button"
         disabled=""
-        title="Decrease"
         type="button"
       >
         <span
@@ -182,9 +182,9 @@ exports[`BpkNudger should render correctly with a value < min 1`] = `
       />
       <button
         aria-controls="nudger"
+        aria-label="Increase"
         class="bpk-button bpk-button--icon-only bpk-button--secondary"
         data-backpack-ds-component="Button"
-        title="Increase"
         type="button"
       >
         <span
@@ -218,9 +218,9 @@ exports[`BpkNudger should render correctly with a value = max 1`] = `
     >
       <button
         aria-controls="nudger"
+        aria-label="Decrease"
         class="bpk-button bpk-button--icon-only bpk-button--secondary"
         data-backpack-ds-component="Button"
-        title="Decrease"
         type="button"
       >
         <span
@@ -251,10 +251,10 @@ exports[`BpkNudger should render correctly with a value = max 1`] = `
       />
       <button
         aria-controls="nudger"
+        aria-label="Increase"
         class="bpk-button bpk-button--icon-only bpk-button--secondary"
         data-backpack-ds-component="Button"
         disabled=""
-        title="Increase"
         type="button"
       >
         <span
@@ -288,10 +288,10 @@ exports[`BpkNudger should render correctly with a value = min 1`] = `
     >
       <button
         aria-controls="nudger"
+        aria-label="Decrease"
         class="bpk-button bpk-button--icon-only bpk-button--secondary"
         data-backpack-ds-component="Button"
         disabled=""
-        title="Decrease"
         type="button"
       >
         <span
@@ -322,9 +322,9 @@ exports[`BpkNudger should render correctly with a value = min 1`] = `
       />
       <button
         aria-controls="nudger"
+        aria-label="Increase"
         class="bpk-button bpk-button--icon-only bpk-button--secondary"
         data-backpack-ds-component="Button"
-        title="Increase"
         type="button"
       >
         <span
@@ -358,9 +358,9 @@ exports[`BpkNudger should render correctly with a value > max 1`] = `
     >
       <button
         aria-controls="nudger"
+        aria-label="Decrease"
         class="bpk-button bpk-button--icon-only bpk-button--secondary"
         data-backpack-ds-component="Button"
-        title="Decrease"
         type="button"
       >
         <span
@@ -391,10 +391,10 @@ exports[`BpkNudger should render correctly with a value > max 1`] = `
       />
       <button
         aria-controls="nudger"
+        aria-label="Increase"
         class="bpk-button bpk-button--icon-only bpk-button--secondary"
         data-backpack-ds-component="Button"
         disabled=""
-        title="Increase"
         type="button"
       >
         <span