Remove labelled-by attribute from SVG when title attribute is passed (#249)

* Add title tag to SVG's if title attribute is set

* Update src/Svg.php

* Pass tile directly to the method as param

* Better variable name for title element

* Update regular expression, consider <svg> may be passed with not attributes.

* Svg class tests to ensure aria attribute and title element are added correctly.

* Add role as img: WCAG best practice

* Update tests to check for role attribute

* Update README.md - Add Accessibility section

* Update README.md

* Include usage example

* Remove aria-labelledby attribute

* Update tests: Remove checks for id and aria-labelledby

* Update docs: Examples without aria-labelledby

---------

Co-authored-by: Dries Vints <[email protected]>
Co-authored-by: Nicky <[email protected]>

Author: 3 people

README.md

@@ -568,11 +568,10 @@ Example result:
 <svg 
 	 title="Camera" 
 	 role="img" 
-	 aria-labelledby="svg-inline--title-ajx18rtJBjSu" 
 	 xmlns="http://www.w3.org/2000/svg"
 	 viewBox="0 0 448 512"
 >
-	<title id="svg-inline--title-ajx18rtJBjSu">
+	<title>
 		Camera
 	</title>
 	<path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>

src/Svg.php

@@ -43,14 +43,8 @@ public function contents(): string
      */
     public function addTitle(string $title): string
     {
-        // generate a random id for the title element
-        $titleId = 'svg-inline--title-'.Str::random(10);
-
         // create title element
-        $titleElement = '<title id="'.$titleId.'">'.$title.'</title>';
-
-        // add aria-labelledby attribute to svg element
-        $this->attributes['aria-labelledby'] = $titleId;
+        $titleElement = '<title>'.$title.'</title>';
 
         // add role attribute to svg element
         $this->attributes['role'] = 'img';

tests/SvgTest.php

@@ -205,7 +205,7 @@ public function it_can_add_title_tag_if_title_attribute_is_passed()
     {
         $svg = new Svg('heroicon-s-camera', '<svg></svg>', ['title' => 'Camera']);
 
-        $this->assertStringContainsString('><title id="svg-inline--title-', $svg->toHtml());
+        $this->assertStringContainsString('><title', $svg->toHtml());
         $this->assertStringContainsString('</title></svg>', $svg->toHtml());
     }
 
@@ -214,7 +214,6 @@ public function it_can_add_aria_labelledby_and_role_attributes_if_title_attribut
     {
         $svg = new Svg('heroicon-s-camera', '<svg></svg>', ['title' => 'Camera']);
 
-        $this->assertStringContainsString('aria-labelledby="svg-inline--title-', $svg->toHtml());
         $this->assertStringContainsString('role="img">', $svg->toHtml());
     }
 }