docs: improve accessibility of attribute-binding example (#41432)

PR Close #41432

aio/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts

@@ -13,17 +13,17 @@ describe('Attribute binding example', () => {
   });
 
   it('should display an Aria button', async () => {
-    expect(await element.all(by.css('button')).get(0).getText()).toBe('Go for it with Aria');
+    expect(await element.all(by.css('button')).get(0).getText()).toBe('Create and set an attribute with Aria');
   });
 
-  it('should display a blue background on div', async () => {
+  it('should display a black background on div', async () => {
     const div = element.all(by.css('div')).get(1);
-    expect(await div.getCssValue('background-color')).toEqual('rgba(25, 118, 210, 1)');
+    expect(await div.getCssValue('background-color')).toEqual('rgba(0, 0, 0, 1)');
   });
 
-  it('should display a blue div with a red border', async () => {
+  it('should display a black div with a light blue double border', async () => {
     const div = element.all(by.css('div')).get(1);
-    expect(await div.getCssValue('border')).toEqual('2px solid rgb(212, 30, 46)');
+    expect(await div.getCssValue('border')).toEqual('16px double rgb(87, 209, 255)');
   });
 
   it('should display a div with many classes', async () => {

aio/content/examples/attribute-binding/src/app/app.component.css

@@ -1,22 +1,32 @@
 .special {
-  background-color: #1976d2;
+  background-color: black;
   color: #ffffff;
+  margin-bottom: .5rem;
+  padding: 1rem;
 }
 
-.item {
-  font-weight: bold;
-}
 .clearance {
-  border: 2px solid #d41e2e;
-
-}
-.item-clearance {
-  font-style: italic;
-
+  border: 1rem double #57d1ff;
 }
 
-.new-class {
-  background-color: #ed1b2f;
-  font-style: italic;
-  color: #fff;
+/* Styles for demo */
+
+comp-with-host-binding {
+  display: block;
+  margin: 1rem 0;
+}
+
+td {
+  padding: 1rem;
+  text-align: center;
+}
+
+h3 {
+  padding: 1rem 0 .75rem 0;
+}
+
+.readability {
+  background-color: black;
+  padding: .5rem;
+  margin: 1rem 0;
 }

aio/content/examples/attribute-binding/src/app/app.component.html

@@ -35,19 +35,22 @@
 <!-- The `class.special` binding overrides any value for the `special` class in `classExpression`.  -->
 <div [class.special]="isSpecial" [class]="classExpression">Some text.</div>
 
-<!-- The `style.color` binding overrides any value for the `color` property in `styleExpression`.  -->
-<div [style.color]="color" [style]="styleExpression">Some text.</div>
+<!-- The `style.border` binding overrides any value for the `border` property in `styleExpression`.  -->
+<div [style.border]="border" [style]="styleExpression">Some text.</div>
 <!-- #enddocregion basic-specificity -->
 
 <!-- #docregion source-specificity -->
 <h3>Source specificity</h3>
 
 <!-- The `class.special` template binding overrides any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.-->
-<comp-with-host-binding [class.special]="isSpecial" dirWithClassBinding>Some text.</comp-with-host-binding>
+
+<comp-with-host-binding [class.special]="isSpecial" dirWithClassBinding></comp-with-host-binding>
+
 
 <!-- The `style.color` template binding overrides any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. -->
-<comp-with-host-binding [style.color]="color" dirWithStyleBinding>Some text.</comp-with-host-binding>
-<!-- #enddocregion source-specificity -->
+<div>
+  <comp-with-host-binding [style.color]="color" dirWithStyleBinding></comp-with-host-binding>
+</div>
 
 <!-- #docregion dynamic-priority -->
 <h3>Dynamic vs static</h3>
@@ -55,15 +58,18 @@
 <!-- If `classExpression` has a value for the `special` class, this value overrides the `class="special"` below -->
 <div class="special" [class]="classExpression">Some text.</div>
 
-<!-- If `styleExpression` has a value for the `color` property, this value overrides the `style="color: blue"` below -->
-<div style="color: blue" [style]="styleExpression">Some text.</div>
+<!-- If `styleExpression` has a value for the `border` property, this value overrides the `style="border: dotted darkblue 3px"` below -->
+<div style="border: dotted darkblue 3px" [style]="styleExpression">Some text.</div>
 
 <!-- #enddocregion dynamic-priority -->
 
-<!-- #docregion style-delegation -->
-<comp-with-host-binding dirWithHostBinding></comp-with-host-binding>
-<!-- #enddocregion style-delegation -->
+<div class="readability">
+  <!-- #docregion style-delegation -->
+  <comp-with-host-binding dirWithHostBinding></comp-with-host-binding>
+  <!-- #enddocregion style-delegation -->
+</div>
 
 <!-- #docregion attribute-decorator -->
 <app-my-input-with-attribute-decorator type="number"></app-my-input-with-attribute-decorator>
 <!-- #enddocregion attribute-decorator -->
+

aio/content/examples/attribute-binding/src/app/app.component.ts

@@ -6,10 +6,11 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  actionName = 'Go for it';
+  actionName = 'Create and set an attribute';
   isSpecial = true;
   canSave = true;
   classExpression = 'special clearance';
-  styleExpression = 'color: red';
+  styleExpression = 'border: solid red 3px';
   color = 'blue';
+  border = '.5rem dashed black';
 }

aio/content/examples/attribute-binding/src/app/comp-with-host-binding.component.ts

@@ -9,11 +9,10 @@ export class CompWithHostBindingComponent {
   isSpecial = false;
 
   @HostBinding('style.color')
-  color = 'green';
+  color = 'pink';
 
   // #docregion hostbinding
   @HostBinding('style.width')
   width = '200px';
   // #enddocregion hostbinding
-
 }

aio/content/examples/attribute-binding/src/app/my-input-with-attribute-decorator.component.ts

@@ -2,7 +2,7 @@ import { Attribute, Component } from '@angular/core';
 
 @Component({
   selector: 'app-my-input-with-attribute-decorator',
-  template: 'The type of the input is: {{ type }}'
+  template: '<p>The type of the input is: {{ type }}</p>'
 })
 export class MyInputWithAttributeDecoratorComponent {
   constructor(@Attribute('type') public type: string) { }