fix(docs-infra): fix API list search color and styles (#31272)

- Add more spacing to inputs.
- Correct placeholder colors in inputs.
- Add aria label to input for accessibility.
- Clean up layout styles and mobile view.

Fixes #31265

PR Close #31272

aio/scripts/test-aio-a11y.js

@@ -21,7 +21,7 @@ sh.set('-e');
 // Constants
 const MIN_SCORES_PER_PAGE = {
   '': 100,
-  'api': 90,
+  'api': 100,
   'api/core/Directive': 90,
   'cli': 91,
   'cli/add': 91,

aio/src/app/custom-elements/api/api-list.component.html

@@ -15,7 +15,7 @@
   </aio-select>
 
   <div class="form-search">
-    <input #filter placeholder="Filter" (input)="setQuery($event.target.value)">
+    <input #filter placeholder="Filter" (input)="setQuery($event.target.value)" aria-label="Filter Search">
     <i class="material-icons">search</i>
   </div>
 </div>

aio/src/app/shared/select/select.component.html

@@ -1,6 +1,6 @@
 <div class="form-select-menu">
   <button class="form-select-button" (click)="toggleOptions()" [disabled]="disabled">
-    <strong>{{label}}</strong><span *ngIf="showSymbol" class="symbol {{selected?.value}}"></span>{{selected?.title}}
+    <span><strong>{{label}}</strong></span><span *ngIf="showSymbol" class="symbol {{selected?.value}}"></span><span>{{selected?.title}}</span>
   </button>
   <ul class="form-select-dropdown" *ngIf="showOptions">
     <li *ngFor="let option of options; index as i"
@@ -10,7 +10,7 @@
         (click)="select(option, i)"
         (keydown.enter)="select(option, i)"
         (keydown.space)="select(option, i); $event.preventDefault()">
-      <span *ngIf="showSymbol" class="symbol {{option.value}}"></span>{{option.title}}
+      <span *ngIf="showSymbol" class="symbol {{option.value}}"></span><span>{{option.title}}</span>
     </li>
   </ul>
 </div>

aio/src/app/shared/select/select.component.spec.ts

@@ -41,13 +41,11 @@ describe('SelectComponent', () => {
       expect(getButton().textContent!.trim()).toEqual('Label:');
     });
 
-    it('should contain a symbol `<span>` if hasSymbol is true', () => {
-      expect(getButton().querySelector('span')).toEqual(null);
+    it('should contain a symbol if hasSymbol is true', () => {
+      expect(getButtonSymbol()).toEqual(null);
       host.showSymbol = true;
       fixture.detectChanges();
-      const span = getButton().querySelector('span');
-      expect(span).not.toEqual(null);
-      expect(span!.className).toContain('symbol');
+      expect(getButtonSymbol()).not.toEqual(null);
     });
 
     it('should display the selected option, if there is one', () => {
@@ -55,7 +53,7 @@ describe('SelectComponent', () => {
       host.selected = options[0];
       fixture.detectChanges();
       expect(getButton().textContent).toContain(options[0].title);
-      expect(getButton().querySelector('span')!.className).toContain(options[0].value);
+      expect(getButtonSymbol()!.className).toContain(options[0].value);
     });
 
     it('should toggle the visibility of the options list when clicked', () => {
@@ -110,7 +108,7 @@ describe('SelectComponent', () => {
       fixture.detectChanges();
       expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
       expect(getButton().textContent).toContain(options[0].title);
-      expect(getButton().querySelector('span')!.className).toContain(options[0].value);
+      expect(getButtonSymbol()!.className).toContain(options[0].value);
     });
 
     it('should select the current option when enter is pressed', () => {
@@ -119,7 +117,7 @@ describe('SelectComponent', () => {
       fixture.detectChanges();
       expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
       expect(getButton().textContent).toContain(options[0].title);
-      expect(getButton().querySelector('span')!.className).toContain(options[0].value);
+      expect(getButtonSymbol()!.className).toContain(options[0].value);
     });
 
     it('should select the current option when space is pressed', () => {
@@ -128,7 +126,7 @@ describe('SelectComponent', () => {
       fixture.detectChanges();
       expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
       expect(getButton().textContent).toContain(options[0].title);
-      expect(getButton().querySelector('span')!.className).toContain(options[0].value);
+      expect(getButtonSymbol()!.className).toContain(options[0].value);
     });
 
     it('should hide when an option is clicked', () => {
@@ -177,6 +175,10 @@ function getButton(): HTMLButtonElement {
   return element.query(By.css('button')).nativeElement;
 }
 
+function getButtonSymbol(): HTMLElement | null {
+  return getButton().querySelector('.symbol');
+}
+
 function getOptionContainer(): HTMLUListElement|null {
   const de = element.query(By.css('ul'));
   return de && de.nativeElement;

aio/src/styles/1-layouts/_top-menu.scss

@@ -192,6 +192,11 @@ aio-search-box.search-container {
       outline: none;
     }
 
+    @include placeholder {
+      @include font-size(14);
+      color: $mediumgray;
+    }
+
     @include bp(big) {
       transition: width 0.4s ease-in-out;
 

aio/src/styles/2-modules/_api-list.scss

@@ -15,12 +15,17 @@ aio-api-list {
 
   .form-search input {
     width: 182px;
+
+    @media screen and (max-width: 600px) {
+      width: 100%;
+    }
   }
 
   .api-list-container {
     display: flex;
     flex-direction: column;
     margin: 0 auto;
+    padding-left: 0;
 
     h2 {
       margin-top: 16px;
@@ -37,8 +42,17 @@ aio-api-list {
     margin: 16px auto;
   }
 
-  .form-select-menu, .form-search {
+  .form-select-menu,
+  .form-search {
     margin: 8px;
+
+    @media screen and (max-width: 600px) {
+      margin-left: 0;
+    }
+  }
+
+  aio-select:first-child .form-select-menu {
+    margin-left: 0;
   }
 }
 
@@ -69,32 +83,17 @@ aio-api-list {
     box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
     box-sizing: border-box;
     border: 1px solid $white;
-    color: $blue-600;
-    @include font-size(16);
-    height: 32px;
+    border-radius: 4px;
+    color: $darkgray;
+    @include font-size(14);
     @include line-height(32);
     outline: none;
-    padding: 0 16px 0 32px;
+    padding: 4px 16px 4px 32px;
     transition: all .2s;
 
-    // PLACEHOLDER TEXT
-    // NOTE: Vendor-prefixed selectors must be on separate blocks, because one invalid/unknown
-    //       selector will invalidate the whole block.
-    &::placeholder {  // Chrome/Firefox/Safari
-      color: $blue-grey-100;
-      @include font-size(14);
-    }
-    &::-webkit-input-placeholder {  // QQ Browser
-      color: $blue-grey-100;
-      @include font-size(14);
-    }
-    &::-ms-input-placeholder {  // Edge
-      color: $blue-grey-100;
-      @include font-size(14);
-    }
-    &:-ms-input-placeholder {  // IE
-      color: $blue-grey-100;
+    @include placeholder {
       @include font-size(14);
+      color: $mediumgray;
     }
 
     &:focus {
@@ -108,7 +107,7 @@ aio-api-list {
     @include font-size(20);
     left: 8px;
     position: absolute;
-    top: 6px;
+    top: 12px;
     z-index: $layer-1;
   }
 }
@@ -149,6 +148,10 @@ aio-api-list {
   aio-select {
     width: 200px;
 
+    @media screen and (max-width: 600px) {
+      width: 100%;
+    }
+
     .symbol {
       margin-right: 8px;
     }

aio/src/styles/2-modules/_select-menu.scss

@@ -9,21 +9,24 @@
   box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
   box-sizing: border-box;
   border: 1px solid $white;
+  border-radius: 4px;
   color: $blue-grey-600;
-  @include font-size(12);
+  @include font-size(14);
   font-weight: 400;
-  height: 32px;
   @include line-height(32);
   outline: none;
-  padding: 0 16px;
+  padding: 4px 16px;
   text-align: left;
   width: 100%;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
 
   strong {
     font-weight: 600;
     margin-right: 8px;
-    text-transform: uppercase;
+    text-transform: capitalize;
   }
 
   &:focus {
@@ -54,9 +57,18 @@
     @include font-size(14);
     @include line-height(32);
     margin: 0;
-    padding: 0 16px 0 40px;
+    padding: 4px 16px 4px 40px;
     position: relative;
     transition: all .2s;
+    border: 1px solid transparent;
+
+    &:first-child {
+      border-radius: 4px 4px 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 4px 4px;
+    }
 
     &:hover {
       background: $blue-grey-50;
@@ -70,7 +82,7 @@
     .symbol {
       left: 16px;
       position: absolute;
-      top: 8px;
+      top: 12px;
       z-index: $layer-5;
     }
   }

aio/src/styles/_mixins.scss

@@ -56,6 +56,16 @@
   line-height: ($heightValue / 10) + rem;
 }
 
+// PLACEHOLDER
+// NOTE: Vendor-prefixed selectors must be on separate blocks, because one invalid/unknown
+//       selector will invalidate the whole block.
+@mixin placeholder {
+  &:-ms-input-placeholder      { @content; }  // IE
+  &::-ms-input-placeholder     { @content; }  // Edge
+  &::-webkit-input-placeholder { @content; }  // QQ Browser
+  &::placeholder               { @content; }  // Chrome/Firefox/Safari
+}
+
 @mixin rotate($degrees) {
   -moz-transform: rotate($degrees);
   -webkit-transform: rotate($degrees);