Fix a11y issue on BpkIconMarkerBackground (#3668)

Co-authored-by: Kathy Wang <[email protected]>
Skyscanner · Nov 14, 2024 · 60def25 · 60def25
1 parent 2d06b70
commit 60def25
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/packages/bpk-component-map/src/BpkIconMarkerBackground.js b/packages/bpk-component-map/src/BpkIconMarkerBackground.js
@@ -48,6 +48,7 @@ const BpkIconMarkerBackground = (props: Props) => {
         width="32"
         height="40"
         viewBox="0 0 32 40"
+        aria-hidden="true"
         className={classNames}
         {...rest}
       >
@@ -62,6 +63,7 @@ const BpkIconMarkerBackground = (props: Props) => {
       width="26"
       height="32"
       viewBox="0 0 26 32"
+      aria-hidden="true"
       className={classNames}
       {...rest}
     >

diff --git a/packages/bpk-component-map/src/__snapshots__/BpkIconMarker-test.js.snap b/packages/bpk-component-map/src/__snapshots__/BpkIconMarker-test.js.snap
@@ -12,6 +12,7 @@ exports[`BpkIconMarker should render correctly with a "buttonProps" attribute 1`
       type="button"
     >
       <svg
+        aria-hidden="true"
         class="bpk-icon-marker-background"
         height="32"
         viewBox="0 0 26 32"
@@ -45,6 +46,7 @@ exports[`BpkIconMarker should render correctly with a "className" attribute 1`]
       type="button"
     >
       <svg
+        aria-hidden="true"
         class="bpk-icon-marker-background"
         height="32"
         viewBox="0 0 26 32"
@@ -78,6 +80,7 @@ exports[`BpkIconMarker should render correctly with a "selected" attribute 1`] =
       type="button"
     >
       <svg
+        aria-hidden="true"
         class="bpk-icon-marker-background bpk-icon-marker-background--selected"
         height="40"
         viewBox="0 0 32 40"
@@ -111,6 +114,7 @@ exports[`BpkIconMarker should render properly 1`] = `
       type="button"
     >
       <svg
+        aria-hidden="true"
         class="bpk-icon-marker-background"
         height="32"
         viewBox="0 0 26 32"

diff --git a/packages/bpk-component-map/src/__snapshots__/BpkIconMarkerBackground-test.js.snap b/packages/bpk-component-map/src/__snapshots__/BpkIconMarkerBackground-test.js.snap
@@ -3,6 +3,7 @@
 exports[`BpkIconMarkerBackground should render properly 1`] = `
 <DocumentFragment>
   <svg
+    aria-hidden="true"
     class="bpk-icon-marker-background"
     height="32"
     viewBox="0 0 26 32"
@@ -19,6 +20,7 @@ exports[`BpkIconMarkerBackground should render properly 1`] = `
 exports[`BpkIconMarkerBackground should render properly with "disabled" 1`] = `
 <DocumentFragment>
   <svg
+    aria-hidden="true"
     class="bpk-icon-marker-background bpk-icon-marker-background--disabled"
     height="32"
     viewBox="0 0 26 32"
@@ -35,6 +37,7 @@ exports[`BpkIconMarkerBackground should render properly with "disabled" 1`] = `
 exports[`BpkIconMarkerBackground should render properly with "interactive" 1`] = `
 <DocumentFragment>
   <svg
+    aria-hidden="true"
     class="bpk-icon-marker-background bpk-icon-marker-background--interactive"
     height="32"
     viewBox="0 0 26 32"
@@ -51,6 +54,7 @@ exports[`BpkIconMarkerBackground should render properly with "interactive" 1`] =
 exports[`BpkIconMarkerBackground should render properly with "selected" 1`] = `
 <DocumentFragment>
   <svg
+    aria-hidden="true"
     class="bpk-icon-marker-background bpk-icon-marker-background--selected"
     height="40"
     viewBox="0 0 32 40"