►
From YouTube: Building an accessible Accordion web part
Description
In this 11-minute Developer focused demo, Erik Benke introduces us to a web part for building/adding a collapsible accordion style FAQ to a SharePoint page or Teams tab. Functionally, the code invokes a get list items method to grab items from targeted list, populates the accordion and renders the formatted result. Each accordion item has a header and panel. The web part leverages the react-accessible-accordion library designed to be Accessible (works well with screen readers) and can be easily customized via CSS. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 27, 2020.
Demo Presenter: Erik Benke (Mentor Graphics) | @erikjbenke
Supporting materials:
• Repo - SPFx Accordion Section FAQ Builder web part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-accordion-section
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
I'm
eric
benke
and
I
really
appreciate
the
opportunity
to
show
you
my
accessible
accordion
web
part
today.
The
web
part
is
available
within
the
pnp
samples
for
you
to
play
around
with
or
to
use
within
your
tenant.
I'll
do
a
quick
summary
here.
So
it
allows
you
to
add
collapsible
accordion
sections
to
a
sharepoint
page
or
teams
tab
based
on
list
data.
A
It
works
great
for
adding
faqs
to
pages,
and
I
so
I'm
a
board
member
of
the
portland
sharepoint
users
group
and
I
originally
created
it
as
part
of
an
intro
to
the
sharepoint
framework
presentation
that
I
did.
I
got
a
lot
of
interest
and
suggestions
from
the
participants
there
and
in
just
a
moment,
you'll
see
a
demo.
A
When
I
show
you
the
demo
it'll,
it's
actually
going
to
be
based
on
some,
how
some
of
them
used
it
within
their
company's
tenant,
actually
so
real
life
example
there
and
it
leverages
the
react,
accessible,
accordion
library.
I
chose
this
for
several
reasons.
For
one
I
just
like
the
way
it
looked
visually
and
also,
very
importantly,
accessibility
was
a
high
priority
for
that
library.
So
it
works
very
well
with
screen
readers
and
it's
easily
customizable
via
css
and
there's
a
link
to
the
code
at
the
bottom.
All
right.
A
So
what
I'm
going
to
show?
You
is
similar
to
what
they
did,
but
not
identical
for
obvious
reasons,
but
this
will
give
you
an
idea
of
of
what
they
did
and
the
first
thing
I'm
going
to
show.
You
is
the
underlying
lists
that
I've
set
up,
because,
if
you're
going
to
use
this
web
part,
you
need
to
have
your
data
in
a
list
in
order
to
surface
it
within
the
accordion.
A
So
here's
a
teams
faq
list
that
I
created,
for
instance,
and
when
you
create
the
list
you're
going
to
want
to
keep
the
default
title
column
and
then
you'll
add
an
additional
content
column
and
it
needs
to
be
called
content.
You
can
make
it
a
multiple
lines
of
text
column
and
enable
enhanced
rich
text.
If
you
want
to
and
as
you
can
see
from
from
this
view
of
this
list,
I've
used
images
and
hyperlinks
in
this
particular
list,
and
then
I
also
have
another
one
here,
which
is
the
sharepoint
faq.
A
Part,
and
so
you
can
see
that
I
have
a
placeholder
that
prompts
me
to
choose
a
list
that
meets
the
correct
specifications
and
clicking
on
this
button,
or
of
course
you
can
use
a
little
pencil
icon
too
open
up
the
property
pane
here
and
so
I'll
give
my
accordion
a
title
which
will
be
displayed
just
above
it
so
call
it
teams
faq,
and
then
I
select
the
list
that
I
want
to
use
in
the
accordion.
So
in
this
case
teams
faq,
and
so
that
adds
adds
that
I'm
also
gonna.
A
A
A
A
This
is
what
was
built
using
the
react
framework
and
in
the
interest
of
time,
I'm
just
going
to
show
you
my
react
component
file
from
react,
accordion
dot
tsx,
which
is
where
most
of
the
heavy
lifting
for
this
web
part
occurs
at
the
top.
We
have
our
imports.
Of
course,
I've
highlighted
a
few
here,
there's
the
pmp
sp
library,
which
we
use
for
accessing
the
sharepoint
rest
api,
so
that
we
can
grab
the
data
from
our
selected
list
that
we
want
to
populate
the
accordion
with
the
pmp
placeholder
control
is
also
used.
A
Moving
down
into
the
react
accordion
class
on
line
20,
we
can
see
our
constructor
method.
This
is
important
for
setting
initial
state
for
the
component,
so
we
initialize
the
state
in
line
25,
and
then
we
invoke
the
get
list
items
method
to
populate
the
items
array
with
the
list,
data
that
we
want
to
have
in
state
for
our
accordion
react
component
and
then
moving
out
to
line
31.
Here.
There's
our
get
lists.
A
I'm
creating
a
list
selected
variable
a
boolean
type,
that's
true
when
list
id
is
not
undefined
and
has
a
length
greater
than
zero,
and
what
we're
going
to
display
for
this
div
depends
on
whether
the
list
selected
variable
is
true
or
false.
If
it's
false,
because
no
list
has
been
selected,
as
you
can
see,
in
line
56
through
63
that
we're
going
to
display
the
placeholder
component
that
prompts
the
user
to
select
a
list.
A
When
I
showed
you
the
demo,
like
my
first
accordion,
I
typed
in
teams,
faq
and
then
starting
in
line
67,
we
begin
to
generate
the
accordion
itself,
there's
a
number
of
components
here
that
are
part
of
the
library
and,
as
you
can
see,
they're
nested
within
each
accordion
that
we
create
we're,
probably
going
to
have
more
than
one
item.
So
that
means
multiple
accordion
items.
Accordion
item
here
represents
a
single
collapsible
section
of
the
accordion
and
includes
a
header
and
a
panel.
A
You
can
see
how
that's
laid
out
in
line
70
through
79,
so
in
order
to
have
each
item
in
our
sharepoint
list
represented
in
its
own
collapsible
section
of
the
accordion,
I
use
the
map
function
as
a
way
to
iterate
through
each
of
the
items
within
our
react.
Accordion
state
and
you
can
see
that
in
line
68
and
then
I
feed
the
value
of
the
title
of
the
particular
item
line
73
into
the
accordion
item
button
component.
A
It's
a
little
scary
looking,
but
that
was
intentional
on
the
react
developers.
Parts
other
concerns
that
you
might
expose
your
users
to
a
cross-site
scripting
attack.
If
you're,
not
careful.
In
this
case,
though,
it's
not
a
concern
right
because
we're
within
the
context
of
sharepoint-
and
we
know
exactly
where
this
data
is
coming
from.
A
That
is
it's
coming
from
the
content
field
of
a
list
item
and
the
reason
I
need
this
instead
of
just
item
dot
content
sort
of
like
I
did
with
the
item.title
value,
is
to
be
able
to
support
enhanced
rich
text
within
the
content
field,
since
sharepoint
provides
that
as
html
markup.
So
I
need
to
treat
it
as
html
instead
of
just
text.
Hugo
actually
tipped
me
off
to
this
simple
approach.
A
When
I
was
looking
at
much
more
complex
ways
to
enable
enhanced
rich
text
in
the
web
parts,
so
I
really
appreciate
his
his
guidance
and
contribution
there,
so
that
is
it.
Thank
you
and
once
again,
here's
where
you
can
find
the
code
and
also
how
to
reach
me
as
well,
fantastic,
very
great
demo.
Thank
you
eric
for
doing
that.