class Primer::Alpha::Dialog
the dialog.
‘aria-labelledby` relationship between the title and the unique id of
The combination of both `:title` and `:dialog_id` establishes an
hex id is generated.
setting `:dialog_id`. If no `:dialog_id` is given, a default randomize
- **Dialog unique id**: A dialog should be unique. Give a unique id
used as the main heading inside the dialog.
Give an accessible name setting `:title`. The accessible name will be
so screen readers are aware of the purpose of the dialog when it opens.
- **Dialog Accessible Name**: A dialog should have an accessible name,
@accessibility
to confirm actions, ask for disambiguation or to present small forms.
A `Dialog` is used to remove the user from the main application flow,
def before_render
def before_render with_header unless header? with_body unless body? end
def initialize(
-
system_arguments
(Hash
) -- <%= link_to_system_arguments_docs %> -
visually_hide_title
(Boolean
) -- If true will hide the heading title, while still making it available to Screen Readers. -
position_narrow
(Symbol
) -- The position of the dialog when narrow. <%= one_of(Primer::Alpha::Dialog::POSITION_NARROW_OPTIONS) %> -
position
(Symbol
) -- The position of the dialog. <%= one_of(Primer::Alpha::Dialog::POSITION_OPTIONS) %> -
size
(Symbol
) -- The size of the dialog. <%= one_of(Primer::Alpha::Dialog::SIZE_OPTIONS) %> -
subtitle
(String
) -- Provides additional context for the dialog, also setting the `aria-describedby` attribute. -
title
(String
) -- Describes the content of the dialog. -
id
(String
) -- The id of the dialog.
def initialize( title:, subtitle: nil, size: DEFAULT_SIZE, position: DEFAULT_POSITION, position_narrow: DEFAULT_POSITION_NARROW, visually_hide_title: false, id: self.class.generate_id, **system_arguments ) @system_arguments = deny_tag_argument(**system_arguments) @id = id.to_s @title = title @subtitle = subtitle @size = size @position = position @position_narrow = position_narrow @visually_hide_title = visually_hide_title @system_arguments[:tag] = "modal-dialog" @system_arguments[:role] = "dialog" @system_arguments[:id] = @id @system_arguments[:aria] = { modal: true } @system_arguments[:aria] = merge_aria( @system_arguments, { aria: { disabled: true, labelledby: "#{@id}-title", describedby: "#{@id}-description" } } ) @system_arguments[:classes] = class_names( "Overlay", "Overlay-whenNarrow", SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)], "Overlay--motion-scaleFade", system_arguments[:classes] ) @backdrop_classes = class_names( POSITION_MAPPINGS[fetch_or_fallback(POSITION_OPTIONS, @position, DEFAULT_POSITION)], POSITION_NARROW_MAPPINGS[fetch_or_fallback(POSITION_NARROW_MAPPINGS, @position_narrow, DEFAULT_POSITION_NARROW)] ) end