ARIA Patterns

1.2 #Principles.PersonFullname PersonFullname

Toggle example guides Toggle HTML markup

Markup for a person’s full name in "Px. First M. Last, Sx." format. For example: "Dr. Martin L. King, Jr."

See the [xPersonFullname rendering function](../api/global.html#xPersonFullname_renderer) for usage.

author
Chris Harvey
updated

DOM:

const {xPersonFullname} = require('aria-patterns')
document.querySelector('[itemtype="http://schema.org/Person"] > h1[itemprop="name"]').append(
  xPersonFullname.render({
    "@type": "Person",
    "familyName"     : "King",
    "givenName"      : "Martin",
    "additionalName" : "Luther",
    "honorificPrefix": "Dr.",
    "honorificSuffix": "Jr."
  })
)
Example

Dr. Martin L. King, Jr.

Markup: ../../test/out/x-person-fullname.test.html

<article itemscope="" itemtype="http://schema.org/Person">
  <h1 itemprop="name">
  <slot name="honorificPrefix" itemprop="honorificPrefix">Dr.</slot>
  <slot name="givenName" itemprop="givenName">Martin</slot>
  <abbr title="Luther" itemprop="additionalName">
    <slot name="additionalName">L.</slot>
  </abbr>
  <slot name="familyName" itemprop="familyName">King</slot><span>,</span>
  <slot name="honorificSuffix" itemprop="honorificSuffix">Jr.</slot>
</h1>
</article>
Source: p-PersonFullname.less, line 7