Merge pull request #44 from creative-commoners/pulls/2.0/aria-label-for-frame

FIX Add CMS configurable title for iframe to tell screenreaders it contains frame content
This commit is contained in:
Robbie Averill 2019-05-17 14:40:36 +12:00 committed by GitHub
commit a01b4609e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 2 deletions

View File

@ -8,6 +8,8 @@ use SilverStripe\Forms\CheckboxField;
use SilverStripe\Forms\NumericField; use SilverStripe\Forms\NumericField;
use SilverStripe\Forms\HTMLEditor\HtmlEditorField; use SilverStripe\Forms\HTMLEditor\HtmlEditorField;
use SilverStripe\ORM\FieldType\DBField; use SilverStripe\ORM\FieldType\DBField;
use SilverStripe\ORM\ValidationException;
use SilverStripe\ORM\ValidationResult;
/** /**
* Iframe page type embeds an iframe of URL of choice into the page. * Iframe page type embeds an iframe of URL of choice into the page.
@ -18,6 +20,7 @@ class IFramePage extends Page
{ {
private static $db = array( private static $db = array(
'IFrameURL' => 'Text', 'IFrameURL' => 'Text',
'IFrameTitle' => 'Varchar',
'AutoHeight' => 'Boolean(1)', 'AutoHeight' => 'Boolean(1)',
'AutoWidth' => 'Boolean(1)', 'AutoWidth' => 'Boolean(1)',
'FixedHeight' => 'Int(500)', 'FixedHeight' => 'Int(500)',
@ -45,7 +48,11 @@ class IFramePage extends Page
$fields = parent::getCMSFields(); $fields = parent::getCMSFields();
$fields->removeFieldFromTab('Root.Main', 'Content'); $fields->removeFieldFromTab('Root.Main', 'Content');
$fields->addFieldToTab('Root.Main', $url = new TextField('IFrameURL', 'Iframe URL')); $fields->addFieldsToTab('Root.Main', [
$url = TextField::create('IFrameURL', 'Iframe URL'),
TextField::create('IFrameTitle', 'Description of contents (title)')
->setDescription(_t(__CLASS__ . '.TITLE_DESCRIPTION', 'Used by screen readers')),
]);
$url->setRightTitle( $url->setRightTitle(
DBField::create_field( DBField::create_field(
'HTMLText', 'HTMLText',

View File

@ -9,7 +9,7 @@
<div class="nonvisual-indicator" style="position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0;"> <div class="nonvisual-indicator" style="position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0;">
<%t SilverStripe\\IFrame\\IFramePage.ExternalNote "Please note the following section of content is possibly being delivered from an external source (IFRAME in HTML terms), and may present unusual experiences for screen readers." %> <%t SilverStripe\\IFrame\\IFramePage.ExternalNote "Please note the following section of content is possibly being delivered from an external source (IFRAME in HTML terms), and may present unusual experiences for screen readers." %>
</div> </div>
<iframe id="Iframepage-iframe" style="$Style" src="$IFrameURL" class="$Class">$AlternateContent</iframe> <iframe id="Iframepage-iframe" style="$Style" src="$IFrameURL" class="$Class" title="$IFrameTitle">$AlternateContent</iframe>
<% end_if %> <% end_if %>
$BottomContent $BottomContent
</div> </div>