From 66c189582fbf8dc55c30ac2e4418c6cee109a142 Mon Sep 17 00:00:00 2001
From: Schalk Neethling <sneethling@mozilla.com>
Date: Mon, 24 May 2021 18:50:56 +0200
Subject: [PATCH] fix: change title attribute example

Change the `title` attribute interactive example as the current example use case is problematic from an accessibility perspective and is not the best use case to use for the example.

fix #1822
---
 .../global-attributes/attribute-title.html             | 10 ++++++----
 .../global-attributes/css/attribute-title.css          | 10 ++++++++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/live-examples/html-examples/global-attributes/attribute-title.html b/live-examples/html-examples/global-attributes/attribute-title.html
index e3fa064e4..335249661 100644
--- a/live-examples/html-examples/global-attributes/attribute-title.html
+++ b/live-examples/html-examples/global-attributes/attribute-title.html
@@ -1,4 +1,6 @@
-<p>The three primary web development technologies are
-<abbr title="Hypertext Markup Language">HTML</abbr>,
-<abbr title="Cascading Stylesheets">CSS</abbr>, and
-JavaScript.</p>
+<p>Use the <code>title</code> attribute on an <code>iframe</code> to clearly identify the content of the <code>iframe</code> to screen readers.</p>
+
+<div class="frame-container">
+  <iframe title="Wikipedia page for the HTML language" src="https://en.m.wikipedia.org/wiki/HTML"></iframe>
+  <iframe title="Wikipedia page for the CSS language" src="https://en.m.wikipedia.org/wiki/CSS"></iframe>
+</div>
diff --git a/live-examples/html-examples/global-attributes/css/attribute-title.css b/live-examples/html-examples/global-attributes/css/attribute-title.css
index ac90cfee0..d83a5a720 100644
--- a/live-examples/html-examples/global-attributes/css/attribute-title.css
+++ b/live-examples/html-examples/global-attributes/css/attribute-title.css
@@ -1,3 +1,13 @@
 .output {
     font: 1rem 'Fira Sans', sans-serif;
 }
+
+.output .frame-container {
+    display: flex;
+    gap: 24px;
+}
+
+.output .frame-container iframe {
+    height: 100%;
+    width: 50%;
+}