fix: adapting Nicos solution regarding Angular consumption

db-ui · Nov 17, 2022 · 292c155 · 292c155
1 parent e132e58
commit 292c155
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 40 deletions.
diff --git a/...ages/db-ui-elements-stencil/src/components/db-breadcrumb/__tests__/db-breadcrumb.spec.tsx b/...ages/db-ui-elements-stencil/src/components/db-breadcrumb/__tests__/db-breadcrumb.spec.tsx
@@ -21,15 +21,15 @@ describe('db-breadcrumb', () => {
     const page = await newSpecPage({
       components: [DbBreadcrumb],
       html: `
-        <db-breadcrumb aria-label='Aria-Breadcrumb'>
+        <db-breadcrumb arialabel='Aria-Breadcrumb'>
           <db-link href='http://db.test/link1'>Link 1</db-link>
           <db-link href='//db.test/link2'>Link 2</db-link>
           <db-link href='#link3' aria-current='location'>Link 3</db-link>
         </db-breadcrumb>
       `
     });
     expect(page.root).toEqualHtml(`
-      <db-breadcrumb aria-label='Aria-Breadcrumb' >
+      <db-breadcrumb arialabel='Aria-Breadcrumb' >
           <nav class='cmp-breadcrumb' aria-label='Aria-Breadcrumb'>
             <ol>
               <li><db-link href='http://db.test/link1'>Link 1</db-link></li>

diff --git a/packages/db-ui-elements-stencil/src/components/db-breadcrumb/db-breadcrumb.tsx b/packages/db-ui-elements-stencil/src/components/db-breadcrumb/db-breadcrumb.tsx
@@ -24,7 +24,7 @@ export class DbBreadcrumb {
   /**
    * an optional [`aria-label`-attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)
    */
-  @Prop({ reflect: true, attribute: 'aria-label' }) ariaLabel: string;
+  @Prop({ reflect: true }) arialabel: string;
   private compData: DbLinkType[];
 
   private hasItemsWrapper: boolean;
@@ -55,7 +55,7 @@ export class DbBreadcrumb {
 
   render() {
     return (
-      <nav class="cmp-breadcrumb" aria-label={this.ariaLabel}>
+      <nav class="cmp-breadcrumb" aria-label={this.arialabel}>
         {this.compData && <ol innerHTML={getCompDataHtml(this.compData)} />}
         {!this.compData && (
           <ol>

diff --git a/packages/db-ui-elements-stencil/src/components/db-breadcrumb/readme.md b/packages/db-ui-elements-stencil/src/components/db-breadcrumb/readme.md
@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property    | Attribute    | Description                                                                                                                 | Type     | Default     |
-| ----------- | ------------ | --------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
-| `ariaLabel` | `aria-label` | an optional [`aria-label`-attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) | `string` | `undefined` |
-| `data`      | `data`       | The data attribute can be used to generate breadcrumb by data.                                                              | `string` | `undefined` |
+| Property    | Attribute   | Description                                                                                                                 | Type     | Default     |
+| ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
+| `arialabel` | `arialabel` | an optional [`aria-label`-attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) | `string` | `undefined` |
+| `data`      | `data`      | The data attribute can be used to generate breadcrumb by data.                                                              | `string` | `undefined` |
 
 
 ----------------------------------------------

diff --git a/showcase/angular-showcase/package-lock.json b/showcase/angular-showcase/package-lock.json